✨ 동기, 비동기

자바스크립트는 항상 동기식(synchronous) 처리이다. → 한번에 코드 한줄씩 차례차례 실행

📍 비동기식 처리

print(1)
time.sleep(1)
print(2)

파이썬에서는 이런식으로 작성하면 1출력되고, 1초 쉰 후 2가 출력된다.
자바스크립트에서 이런식으로 작성해보자

console.log(1);
setTimeout(function(){}, 1000);
console.log(2);

이렇게 작성했는데 문제가 발생했다. 1,2가 콘솔창에 동시에 출력된다.
자바스크립트 실행머신인 웹브라우저는 setTimeout과 같은 특수 코드들을 발견했을 시 다른 코드부터 실행하려고 한다.
따라서 setTimeout을 내버려 두고 밑의 console.log(2)부터 실행한다.
→ 비동기 방식

비동기 방식 : 실행이 오래 걸리는 코드는 대기시키고 실행이 바로 가능한 코드들부터 처리하는 방식. 주로 setTimeout, addEventListener, ajax관련 함수들을 대기시킨다.
자바스크립트는 동기식 처리를 지원하는데 위와 같은 비동기 함수들은 비동기식으로 동작시킨다.

console.log(1);
setTimeout(function(){
  console.log(2);
}, 1000);
console.log(3);

따라서 위와 같이 작성해야 1,3을 출력한 뒤에 2를 출력할 수 있다.

자바스크립트는 비동기상황에서 코드를 순차적으로 실행하고 싶을 때 콜백함수를 활용한다.
콜백함수 : 함수 안의 함수

✨ 콜백함수

순차적으로 함수를 실행해보자

function f1(){
  console.log(1)
}

function f2(){
  console.log(2)
}

f1();
f2();

차례로 f1,f2가 실행될까?
답은 '아니오'이다. 만약 f1이 setTimeout같은 코드면 나중에 실행될 수 있음
순차적으로 실행되는 것을 보장하는 코드를 작성해보자

function f1(func){
  console.log(1);
  func();
}

function f2(){
  console.log(2)
}

f1(f2);

이렇게 파라미터를 만들어주면 된다. 함수 안에 함수를 넣어 실행시킬 수 있다.

f1(function(){
  console.log(2)
});

또는 이와 같은 방식으로 작성할 수도 있다.

여러개의 콜백함수를 쓸 시에 다음과 같아진다.

f1(function(){
  f2(function(){
    f3(function(){
      ..
    });
  });
});

그러나 ES6의 Promise를 사용해 다음과 같이 작성할 수도 있다.

f1().then(function(){
   그 담에 실행할거
}).then(function(){
   그 담에 실행할거
});

then 키워드를 넣어 조금더 가독성이 좋아졌다.