[코딩애플] js part 3-4. 동기/비동기처리와 콜백함수라는 용어 깔끔하게 정리

동기/비동기처리와 콜백함수라는 용어 깔끔하게 정리

자바스크립트는 동기식 처리(Synchronous)

• 한 번에 코드 한 줄씩 차례로 실행
• 병렬처리 가능하다? ㄴㄴ
• 자바스크립트는 오래걸리는 연산 만나면 멈춤

console.log(1);
console.log(2);
console.log(3);
// 1
// 2
// 3
// => 동기!

비동기식처리(Asynchronous)

• 오래걸리는 작업이 있으면 제껴두고 다른거부터 처리하는 방식
• 자바스크립트가 아니라 자바스크립트 실행하는 브라우저 덕분에 가능
• 오래걸리거나 실행까지 오래 걸리는 함수들
  • setTimeout
  • eventListener
  • ajax

setTimeout

console.log(1);
setTimeout(() => {console.log(2)}, 1000);
console.log(3);
// 1
// 3
// 2

• 1초간 쉬지 않고 3을 출력한다.
• **setTimeout**: 비동기식처리를 도와주는 함수
• stack -> 대기실 -> queue -> (stack이 비었을 때) stack : 코드 실행

eventListener

element.addEventListener('click', function(){...})

ajax

$.ajax()

• 요청을 하고 뭔가를 실행해준다.

sync as async

➡️자바스크립트는 오래 걸리는 연산 만나면 멈춤 (=동기식처리, synchronous)

➡️Web API와 연관된 특수한 함수들을 쓰면 작업이 오래걸릴 때 다른거부터 실행 가능(=비동기식 처리, asynchronous)

자바스크립트를 순차적으로 실행하려면? ➡️ "콜백함수" 사용

**콜백함수?** 함수 안에 함수가 들어가 있는 것. 자바스크립트를 순차적으로 실행려면 콜백함수를 사용해야 한다.

setTimeout

console.log(1);
setTimeout(() => {}, 1000); // 이 코드는 1초간 Web API 대기실로 보내짐
console.log(2); // 그리고 이걸 바로 실행함

1초 쉰다음 2를 실행하고 싶다면? setTimeout 콜백함수 안에 넣으면 됨.

콜백함수를 만들고 그 안에 기능 개발을 하면 순차적으로 실행된다.

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

eventListener

eventListener에서도 똑같다.

addEventListener('click', function() {});

클릭되었을 때 실행해주세요~ 라고 콜백함수를 사용했다.

근데 콜백함수를 실행할 때 외부에서 함수를 작성했으면 반드시 소괄호 없이 **함수명으로 작성**해야 한다. 왜냐하면 함수()는 함수를 실행해달라는거니까. 클릭을 하지도 않았는데 함수를 실행하면 안되는 거니까.

콜백함수를 이용한 함수 디자인

첫째함수() 다음에 둘째함수()를 실행하고 싶은 경우,(첫째함수 -> 둘째함수)

function 첫째함수() {
    
}
function 둘째함수() {
    
}
첫째함수();
둘째함수();

이렇게 실행하면 실패할 수 있다. 왜냐하면 Web API로 보내질 수도 있으니까. 그래서 둘째함수가 먼저 실행될 수도 있다.

그래서 콜백함수를 이용해서 순차적으로 실행할 수 있다.

첫째함수(둘째함수);

그러면 더 안전하게 순차적으로 실행할 수 있다.

사용 방법

function 첫째함수(구멍){
	console.log(1);
    구멍(); // =둘쨰함수(); 가 실행됨
}
function 둘째함수(){
    console.log(2);
}
첫째함수(둘째함수);
// 1
// 2

특징

**콜백함수는 함수 디자인 패턴일 뿐, 동기, 비동기 이런게 아니다.**

setTimeout, eventListener, ajax 등 **Web API를 써야만 비동기처리가 가능**하다.

콜백함수의 문제점

첫째함수(function(){
  둘째함수(function(){
    셋째함수(function(){
      어쩌구..
    });
  });
}):

• 코드가 보기가 싫다
• 콜백지옥에 빠질 수 있다

이걸 방지하기 위해 더 쉽게 쓸 수 있도록 자바스크립트에서 제공되는 문법이 Promise 패턴이다. 만들긴 어려운데 쓰기는 쉽다.

첫째함수().then(function(){
    
}).then(function(){
    
})

코드가 비슷한데 옆으로 길어지진 않고, 순차적으로 실행되는 느낌도 든다.