5강. 콜백함수

콜백함수란?

콜백함수는 다른 함수의 매개변수로 전달되어, 해당 함수 내부에서 나중에 호출되는 함수를 의미한다.

function greeting(name) {
  console.log(`안녕하세요, ${name}님!`);
}

function processUserInput(callback) {
  const name = "민경";
  callback(name); // 전달받은 함수를 호출
}

processUserInput(greeting);

function greeting(name) {
  console.log(`안녕하세요, ${name}님!`);
}

function processUserInput(callback) {
  const name = "민경";
  callback(name); // 전달받은 함수를 호출
}

processUserInput(greeting);

위 예제에서, greeting 함수는 콜백 함수다.

• greeting함수는 processUserInput 함수의 매개변수로 전달되었고,
• processUserInput 함수 내부에서 호출

되기 때문이다.

.

익명함수를 이용한 콜백

콜백함수는 한 번만 사용하는 경우가 많아, 따로 함수를 정의하지 않고 아래와 같이 익명 함수 형태로 바로 전달하는 것이 일반적이다.

function processUserInput(callback) {
  const name = "민경";
  callback(name); // 전달받은 함수를 호출
}

//예제1
processUserInput(function(name) {
  console.log(`안녕하세요, ${name}님!`);
});

//예제2
processUserInput(function(name) {
  console.log(`무엇을 도와드릴까요, ${name}님?`);
});

function processUserInput(callback) {
  const name = "민경";
  callback(name); // 전달받은 함수를 호출
}

//예제1
processUserInput(function(name) {
  console.log(`안녕하세요, ${name}님!`);
});

//예제2
processUserInput(function(name) {
  console.log(`무엇을 도와드릴까요, ${name}님?`);
});

콜백함수를 사용하지 않았다면, 인삿말 함수와 도움말 함수를 각각 정의해야 해서 번거로웠을 것이다.

화살표 함수(Arrow Function)버전

위 예제의 function(){} 는 아래와 같이 () => {} 로 바꾸어 더 간결하게 사용할 수 있다.

function processUserInput(callback) {
  const name = "민경";
  callback(name);
}

processUserInput((name) => {
  console.log(`안녕하세요, ${name}님!`);
});

function processUserInput(callback) {
  const name = "민경";
  callback(name);
}

processUserInput((name) => {
  console.log(`안녕하세요, ${name}님!`);
});

이 화살표 함수 버전이 현재 가장 널리 쓰이는 콜백함수 사용법이다.

.

Q. 1000 밀리세컨드 대기 후 “hello”를 출력하도록 콜백함수를 써서 setTimeout 함수를 호출하시오.

// setTimeout(함수, 밀리세컨드) : 밀리세컨드 후에 함수 실행

// setTimeout(함수, 밀리세컨드) : 밀리세컨드 후에 함수 실행

setTimeout(() => {
  console.log("hello")}, 1000);

setTimeout(() => {
  console.log("hello")}, 1000);

.

콜백 함수가 필요한 이유?

콜백 함수가 중요한 이유는 비동기(Asynchronous)처리 때문이다.

• 동기 처리 : 코드가 위에서 아래로 순서대로 실행되는 방식. 한 작업이 끝나야 다음 작업이 시작됨.
• 비동기 처리 : 특정 작업의 완료를 기다리지 않고 다음 코드를 먼저 실행하는 방식. 시간이 오래 걸리는 작업(예: 파일 읽기, 네트워크 요청)을 기다리는 동안 다른 작업을 처리할 수 있어 효율적

콜백함수를 이용하면 비동기 처리가 가능한데, 이에 대해서는 깊은 설명이 필요하므로 여기서는 생략하겠다.

>>다음 강의 가기 : 6강
>>강좌 목록으로 돌아가기