자바스크립트 비동기 처리

안녕하세요 우아한테크코스 4기 프론트엔드에서 시원한 콜라를 제공하고있습니다.

---

 

자바스크립트에서 비동기 처리에 사용되는 callback함수, Promise, async/await에 대해 간단히 알아본다.

동기식(Synchronous)? 비동기식(Asynchronous)?

• 동기식은 작업 실행의 순서가 정해져 있어 순서대로 실행되는것을 말한다

console.log('1')
console.log('2')
console.log('3')

/* 출력
1
2
3
*/

• 비동기식은 작업 실행의 순서에 상관없이 다음 순서의 작업이 실행되는것을 말한다.

console.log('1')

setTimeout(()=>{
	console.log('2')
},1000)

console.log('3')

/* 출력
1
3
2
*/

자바스크립트 비동기 처리

자바스크립트는 크게 3가지의 비동기 처리 방식을 가지고 있다.

• callback 함수
• Promise
• Promise를 활용한 async/await

다음 예시를 보고 각 사용방식을 알아본다.

1. Callback 함수사용

• callback 함수 미사용

const printAnimal = (animal) => {
	console.log(animal);
}

const callPrint = () => {
	let animal = 'dog';
	
	console.log(animal);

	setTimeout(() => {
		animal = 'cat';
	},1000);

	return animal;
}

printAnimal(callPrint());

/* 출력
dog
dog
*/

• callback 함수 사용

const printAnimal = (animal) => {
	console.log(animal);
}

const callPrint = (callback) => {
	let animal = 'dog';
	
	console.log(animal);

	setTimeout(() => {
		animal = 'cat';
		callback(animal)
	},1000);

}

callPrint(printAnimal)

/* 출력
dog
(...1초 후)
cat
*/

2. Promise

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('cat');
  }, 1000);
});

const printAnimal = () => {
  const animal = 'dog';

  console.log(animal);

  promise.then(newAnimal => {
    console.log(newAnimal);
  });
};

printAnimal();

/* 출력
dog
(...1초 후)
cat
*/

3. async/await

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('cat');
  }, 1000);
});

const printAnimal = async() => {
  let animal = 'dog';

  console.log(animal);

	animal = await promise;
	console.log(animal);
};

printAnimal();

/* 출력
dog
(...1초 후)
cat
*/