4. 콜백함수

4-1 콜백 함수란?

• 콜백 함수: 다른 코드의 인자로 넘겨주는 함수
  • 콜백 함수를 넘겨받은 코드는 필요에 따라 적절한 시점에 실행할 것
  • 콜백 함수는 제어권과 관련이 있다.
  • 다른 코드에게 인자로 넘겨줌으로써 제어권도 함께 위임한 함수

 

4-2 제어권

4-2-1 호출 시점

• 콜백 함수의 제어권을 넘겨받은 코드는 콜백 함수 호출 시점에 대한 제어권을 가짐

 

4-2-2 인자

• map의 구조: Array.prototype.map(callback [, thisArg])
  • 첫 번째 인자로 callback함수, 생략가능한 두번째 인자로 콜백 함수 내부에서 this로 인식할 대상을 측정 가능.
  • thisArg 생략 시 전역객체가 바인딩
  • 메서드의 대상이 되는 배열의 모든 요소들을 처음부터 끝까지 하나씩 꺼내어 콜백 함수를 반복 호출 → 실행 결과들을 모아 새로운 배열을 만듦
• 인자들의 이름은 사용자가 명명한 것 뿐
  • 컴퓨터는 무조건 순서에 의해서만 각각을 구분하고 인식함
• 콜백 함수를 사용하는 주체는 사용자가 아님.
  • 콜백 함수의 제어권을 넘겨받은 메서드는 콜백 함수를 호출할 때 인자에 어떤 값들을 어떤 순서로 넘길 것인지에 대한 제어권을 가짐

 

4-2-3 this

• 콜백 함수도 함수이기 때문에 기본적으로는 this가 전역객체를 참조.
• 다만 제어권을 넘겨받을 코드에서 콜백 함수에 별도로 this를 지정한 경우에는 그 대상을 참조

 

4-3 콜백 함수는 함수다

• 콜백 함수로 어떤 객체의 메서드를 전달하더라도 그 메서드는 메서드가 아닌 함수로서 호출됨
  • 메서드로서 호출할 때가 아닌 한 객체와의 직접적인 연관이 없어짐
  • → 별도로 this를 지정하는 인자를 지정하지 않으면 함수 내부의this는 전역객체

 

4-4 콜백 함수 내부의 this에 다른 값 바인딩하기

• 전통적으로 this를 다른 변수에 담아 콜백 함수로 활용할 함수에서는 this 대신 그 변수를 사용하게 하고, 이를 클로저로 만드는 방식이 많이 쓰임.
• 다른 방식은 bind

 

4-5 콜백 지옥과 비동기 제어

• 콜백 지옥: 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상.
• 비동기: 동기의 반대말
  • 동기적인 코드: 현재 실행 중인 코드가 완료된 후에야 다음 코드를 실행하는 방식
    • CPU의 계산에 의해 즉시 처리가 가능한 대부분의 코드는 동기적인 코드
  • 비동기적인 코드: 현재 실행중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어감
    • 별도의 요청, 실행 대기, 보류 등과 관련된 코드는 비동기적인 코드
• 비동기적인 일련의 작업을 동기적으로, 혹은 동기적인 것처럼 보이게끔 처리해주는 장치를 마련하려고 노력함.
• Promise
  • new 연산자와 함께 호출한 promise의 인자로 넘겨주는 콜백함수는 호출할 때 바로 실행
  • 함수 내부에 resolve또는 reject 함수를 호출하는 구문이 있을 경우 둘 중 하나가 실행되기 전까지 then또는 catch로 넘어가지 않음
  • → 비동기 작업이 완료될 때 resolve또는 reject를 호출하는 방법으로 비동기 작업의 동기적 표현 가능
• Generator
  • ‘*’이 붙은 함수가 바로 Generator 함수
  • Generator 함수를 실행하면 Iterator가 반환
    • Iterator는 next라는 메서드를 가지고 있음
    • next 메서드를 호출하면 Generator 함수 내부에서 가장 먼저 등장하는 yield에서 함수의 실행을 멈춤
  • 비동기 작업이 완료되는 시점마다 next 메서드를 호출한다면 Generator 함수 내부의 소스가 위에서부터 아래로 순차적으로 진행.
• async/await
  • 비동기 작업을 수행하고자 하는 함수 앞에 async를 표기
  • 함수 내부에서 실질적인 비동기 작업이 필요한 위치마다 await를 표기하는 것만으로 뒤의 내용을 Promise의 then과 흡사한 효과를 얻을 수 있다.