[JS] 자바스크립트 동기와 비동기: 쓰레드(Thread)와 콜백함수(Callback)

 자바스크립트의 동기와 비동기 작업에 대해 알아보겠습니다.

 

[ Contents ]

 

 

1. 자바스크립트 동기

순차적으로 작업이 실행되는 방식

 코드가 실행되는 통상적인 방식입니다.

 

console.log("a");
console.log("b");
console.log("c");

 코드는 위에서부터 아래로 순차적으로 실행됩니다. 그래서 C/C++, java 같은 언어를 '절차형 프로그래밍 언어'라고도 하죠.

 

 

 

2. 자바스크립트 비동기

동시에 여러 작업이 진행되는 방식

 비동기 방식은 병렬처리와 일맥상통합니다. 프로그램에서 작업을 처리하는 주체를 '쓰레드(Thread)'라고 하며, 여러 개의 멀티 스레드가 동시에 작업을 처리합니다.

 

출처: 웹 프론트엔드를 위한 자바스크립트 첫 걸음

 비동기 방식이 동기 방식보다 당연히 효율성과 속도, 성능이 좋습니다.

 웹페이지를 불러올 때, 이미지나 영상이 다 로딩되지 않았는데도 다른 기능을 사용할 수 있는 건 '비동기 방식'이기 때문입니다. 하나의 쓰레드가 끝나지 않더라도 다른 쓰레드들은 영향을 받지 않고 독립적으로 작업합니다.

 

반응형

 

 

3. 비동기와 콜백(Callback) 함수

콜백(Callback) 함수: 인수로 넘겨받는 함수

 자바스크립트는 함수도 객체로 인식하기 때문에, 함수를 파라미터로 넘겨줄 수 있습니다. callback 함수는 다른 함수의 파라미터로 쓰이는 함수를 말하며, 해당 함수에서 호출할 함수입니다. 

 

const work = (callback) => {
  setTimeout(() => {
    console.log("3초 대기");
    callback();
  }, 3000);
};

work(() => {
  console.log("종료");
});

 보통은 해당 함수의 맨 끝에 callback() 하고 호출하기 때문에, 함수가 끝난 뒤에 호출할 함수라고도 부릅니다.

 위 예시에서는 setTimeout 함수로 3초 쉬고, console.log("3초 대기")가 실행되고 callback() 함수를 호출합니다. 여기서 callback함수는 colsole.log("종료")입니다.

 익명함수 표기법이 섞여서 다소 혼동될 수 있으나, 콜백함수는 '인수로 넘겨받은 함수'라고 생각하면 됩니다.