0130 - 0205 WIL : JavaScript 콜백함수, HTTP

주요 키워드

콜백함수 (Callback Function)

💡 callback : "호출(실행)하다" call + "뒤돌아오다" back = 되돌아 호출하다
⇒ 특정함수 X를 호출하면서 특정 조건일때 함수Y를 실행하여 알려달라..
X입장에서 조건 충족 여부를 스스로 판단하고 Y를 직접 호출

 

다른 함수에 인자로 넘겨주는 함수

콜백함수를 인자로 받은 함수(고차함수)에 제어권도 함께 위임하여 해당 함수의 내부 로직에 따라 적절한 시점에 실행된다.

주로 비동기 작업이 완료된 후 코드를 실행할 때 사용된다.

 

동기적인 콜백함수

즉시 넘겨받은 콜백 함수를 호출하고 실행한다.

function sayHello(name) {
  alert(`Hello, ${name}`);
}

function promptInput(callback) {
  const name = prompt("Please enter your name.");
  callback(name);
}

promptInput(sayHello); // sayHello()가 콜백함수로 promptInput 함수의 인자로 들어감

비동기적인 콜백 함수

나중에 해당 함수를 호출할 때 사용한다. 특정 조건이 충족되거나 거부되면 Promise의 .then() 블록 내부에서 실행된다.

 

고차함수(Higher order function)

콜백함수를 인자로 전달받거나, 함수를 반환하는 함수를 말한다.

고차 함수는 인자로 받은 함수를 필요한 시점에 호출하거나 클로저를 생성하여 반환한다.

제어권

제어권 넘겨받은 코드, 즉 콜백함수를 인자로 가지는 고차함수는

• 콜백함수 호출 시점을 스스로 판단하고 실행한다.
• 콜백함수 호출할 때 인자 값들과 순서를 정한다.
• 콜백함수의 this가 무엇을 바라볼지 정한다 (정하지 않으면 전역객체를 바인딩)

콜백 지옥

콜백 함수가 여러 번 반복되어 들여쓰기가 과하게 사용되는 현상

비동기적인 작업을 수행할 때 자바스크립트에서 자주 발생되는 문제

가독성이 떨어지고 코드 유지보수에 좋지 않음