[기술면접] JavaScript 부분 11

<목차>

22. 콜백 함수
23. 콜백 함수의 제어권

22. 콜백 함수

• 다른 함수에 인자로 전달되는 함수
• 특정 작업이 완료된 후 실행되도록 설계
• 비동기 처리, 이벤트 처리, 타이머 설정 등에서 널리 사용
• 콜백 함수를 사용하면 함수의 실행을 특정 이벤트의 완료 시점이나 다른 함수의 반환 시점에 연결할 수 있음
• 단순하고 이해하기 쉬운 패턴을 제공
• 작은 규모의 프로젝트나 간단한 비동기 처리에 적합
• 중첩된 콜백 함수 사용은 코드를 복잡하게 만들고 가독성이 떨어지는 "콜백 지옥"이 발생
• 에러 핸들링과 예외 처리가 복잡해질 수 있음
• 콜백 지옥 문제를 해결하기 위해 Promise 와 async/await 같은 더 진보된 비동기 패턴 선호

콜백 함수의 주요 사용 사례
1. 비동기 작업 완료 후 실행: 네트워크 요청이나 파일 I/O 작업 후 결과를 처리할 때

function requestData(callback) {
  // 비동기 요청을 가정한 예제
  console.log("데이터 요청 중...");
  setTimeout(() => {
    // 요청이 완료되었다고 가정하고 콜백 함수 호출
    callback('데이터 수신 완료');
  }, 2000); // 2초 후 콜백 함수 실행
}

requestData((response) => {
  console.log("응답:", response);
});

이 예에서 requestData 함수는 비동기 요청을 모방합니다. 요청이 완료되면 콜백 함수가 호출되고, 결과를 출력합니다.

2. 이벤트 리스너: 사용자의 입력이나 다른 이벤트 발생 후 실행

// HTML 요소에 이벤트 리스너 추가
document.getElementById('myButton').addEventListener('click', function() {
  console.log('버튼 클릭됨!');
});

여기서 addEventListener 함수는 두 번째 인자로 콜백 함수를 받습니다. 사용자가 버튼을 클릭하면 이 콜백 함수가 실행됩니다.

3. 타이머 함수: 일정 시간 후 함수를 실행

setTimeout(() => {
  console.log("3초 후 실행");
}, 3000);

setTimeout 함수는 첫 번째 인자로 받은 콜백 함수를 지정된 시간(여기서는 3000 밀리초 후) 후에 실행합니다.

Q. 자바스크립트의 콜백함수의 개념을 설명하고 예시를 들어주세요.

23. 콜백 함수의 제어권

• 제어권 이양은 함수가 콜백을 받는 순간 발생
• 콜백을 전달받은 함수가 언제, 어덯게, 그리고 몇 번 콜백을 호출할지 결정 할 수 있는 권한을 가지게 되었다는 의미
• 콜백 함수의 실행 조건, 시점, 실행 환경 등이 제어권을 가진 함수에 의해 결정

제어권 이양의 핵심 요소

1. 언제 : 외부 함수에 의해 호출 타이밍이 결정.ex) 비동기 작업이 완료되었을 때, 이벤트가 발생했을 때 등
2. 어떻게 : 콜백 함수를 호출할 때 전달되는 인자를 외부 함수가 결정
3. 몇 번 : 콜백 함수는 필요에 따라 한 번만 호출될 수도 있고, 여러 번 호출될 수도 있다. ex) 이벤트 리스터

예시

1. Array.prototype.map()

• 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행, 콜백 함수에서 반환된 결과로 새 배열을 생성. 여기서 map()함수는 콜백 함수의 호출 타이밍, 인자, 그리고 호출 횟수를 제어

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(function(item) {
  return item * 2; // 콜백 함수에서 반환된 값은 새 배열의 요소가 됩니다.
});

console.log(doubled); // [2, 4, 6, 8]

2. setTimeout()

• 지정된 시간이 지난 후 콜백 함수를 한 번 실행
• 함수는 콜백 함수의 실행 타이밍을 제어하며 해당 콜백 함수는 지연시간이 지난 후 실행됨

console.log("처리 시작");

setTimeout(function() {
  console.log("지연 처리");
}, 2000); // 2000밀리초(2초) 후에 콜백 함수 실행

console.log("처리 종료");

Q. 어떤 항목에서 콜백함수를 전달받은 함수에게 제어권이 이양되는지 설명해주시고 그 예시를 알려주세요.