콜백 함수에 대한 정리

 

 

콜백 함수란?

 

콜백 함수는 다른 코드에 인자로 넘겨주는 함수임

예를 들어, forEach, setTimeout과 같은 함수들이 콜백 함수를 사용함

콜백 함수는 특정 작업이 완료된 후, 또는 특정 조건이 만족되었을 때 호출되는 함수로,

필요에 따라 적절한 시점에 실행될 수 있음

 

 

콜백함수 제어권

콜백 함수는 제어권이 넘겨받는 코드에 의해 제어됨 이 제어권은 크게 두 가지로 나뉨

 

 

호출 시점에 대한 제어권

콜백 함수가 언제 호출될지는 콜백을 전달받은 코드가 결정함

예를 들어, setTimeout의 콜백 함수는 지정된 시간이 지난 후 호출됨

 

인자에 대한 제어권

콜백 함수가 호출될 때 전달되는 인자는 콜백을 호출하는 코드가 결정함

콜백 함수는 특정 데이터를 인자로 받거나, 특정 컨텍스트에서 호출될 수 있음

콜백함수에서 this

콜백 함수 내에서 this가 무엇을 가리키는지는 호출되는 맥락에 따라 달라짐

제어권을 가진 코드가 콜백 함수의 this를 특정 객체로 지정한 경우, 그 객체를 참조하게 됨

 

 

 

 

객체의 메서드를 콜백 함수로 전달할 때의 this 문제

 

객체의 메서드를 콜백 함수로 전달할 때, 메서드 내부의 this가 원래 객체를 잃어버릴 수 있음

이는 메서드가 다른 컨텍스트에서 호출되기 때문에 발생하는 문제임

이를 방지하기 위해 bind 메서드를 사용하여 this를 명시적으로 고정해야 함

 

this를 잃어버릴 때

 

 

const obj = {
  name: '이태규',
  dumb() {
    console.log(`바보, ${this.name}`);
  }
};

// dumb 메서드를 setTimeout의 콜백 함수로 전달
setTimeout(obj.dumb, 1000);  // "바보, undefined"

 

this를 명시적으로 고정할 때

const obj = {
  name: '이태규',
  dumb() {
    console.log(`바보, ${this.name}`);
  }
};

setTimeout(obj.dumb.bind(obj), 1000);  // "바보, 이태규"

 

 

 

콜백지옥

콜백 지옥은 콜백 함수가 중첩되면서 코드가 지나치게 복잡해지고,

깊은 들여쓰기가 반복되는 현상을 말함 이는 주로 이벤트 처리,

서버 통신과 같은 비동기적인 작업을 처리할 때 발생함

콜백 지옥을 피하기 위해 Promise, async/await과 같은 방법을 사용할 수 있음

 

동기(Synchronous) 

작업이 순차적으로 진행되며, 앞선 작업이 완료될 때까지 다음 작업이 시작되지 않음

예를 들어, 자바스크립트의 기본 실행 흐름이 동기적임

 

일상생활 속 예시 ex_) 카페에서 손님이 주문을 하면 해당 음료가 나올 때 까지 줄에서 기다림,

이는 메뉴가 나오기 전까지 다음 손님들은 주문을 하지 못하는 비효율적인 상황을 유발함

 

비동기(Asynchronous)

작업이 병렬적으로 진행될 수 있으며,

특정 작업이 완료되기를 기다리지 않고 다음 작업이 바로 시작됨

비동기 작업은 주로 서버 요청이나 타이머와 같은 상황에서 사용됨

 

일상생활 속 예시 ex_) 카페에서 손님들이 주문을 하면 진동벨을 주어 

메뉴가 완료될 때 까지 다른 곳에서 기다릴 수 있음 이는 다음 손님들의

주문까지 받아내어 시간적으로 효율이 늘어남

 

Promise

 

비동기 처리에 대한 약속이며 

Pending(대기)

처리가 완료되지 않은 상태 

Fulfilled(이행)

성공적으로 처리가 완료된 상태

Rejected(거부)

처리가 실패한 상태.

 

이렇게 3가지가 존재함 async, await문법으로

pending이 끝나고 fullfiled되거나 Rejected된 응답을 받을 수 있음

 

 

 

마무리

 

솔직히 콜백함수에 관련된 지식이 너무 많아서 완벽히 이해하진 않았지만

정리된 내용을 토대로 복습하다보면 알게되지 않을까 싶음 다음주도 화이팅