JavaScript
함수를 값으로 전달하기
함수도 다른 함수의 입력으로 전달할 수 있습니다.
이럴 때 필요해요
클릭 처리와 배열 변환에 등장하는 함수 전달 문법을 익힙니다.
어떻게 동작하나요?
함수를 호출하는 것과 함수 자체를 전달하는 것은 다릅니다. greet는 함수 값이고 greet()는 그 함수를 지금 실행한 결과입니다.
다른 함수에 전달해 나중에 또는 필요한 시점에 호출하게 하는 함수를 콜백이라고 부릅니다. 콜백이라고 반드시 비동기인 것은 아닙니다. 아래 apply는 전달받은 함수를 즉시 호출합니다.
n => n + 1은 숫자 n을 받아 1을 더한 값을 반환하는 화살표 함수입니다. 간단한 함수는 이름 없이 바로 전달할 수도 있습니다. 함수가 바깥 값을 기억하는 원리는 이후 클로저에서 다룹니다.
코드 예제
동작을 설명하는 읽기 전용 예제입니다.
function apply(value, transform) {
return transform(value);
}
const addOne = n => n + 1;
console.log(apply(2, addOne)); // 3apply에 함수 값을 전달하고 내부에서 호출하여 3을 반환합니다.
자주 헷갈리는 포인트
- 함수 전달과 함수 즉시 호출을 구분합니다.
- 콜백을 사용한다는 사실만으로 비동기 실행이라고 판단하지 않습니다.
내 말로 설명해 보기
apply(2, addOne)에서 addOne은 언제 호출될까요?
생각할 단서 함수 이름 뒤에 호출 괄호가 처음 나타나는 줄을 찾아보세요.
예시 답변 확인
설명에 들어갈 핵심
- 함수도 다른 함수의 입력으로 전달할 수 있습니다.
- apply에 함수 값을 전달하고 내부에서 호출하여 3을 반환합니다.
예시 답변
apply 함수 안에서 transform(value)를 실행할 때 호출됩니다. 예제는 기다리는 작업 없이 동기적으로 3을 반환합니다.
문장을 그대로 외우기보다 예제의 값과 실행 흐름을 떠올리며 설명해 보세요.