함수를 값으로 다루기

함수도 값입니다

2.2 에서 함수를 변수에 담아 봤습니다. 담을 수 있다는 것은 값이라는 뜻입니다. 값이므로 다른 함수에 넘길 수도 있고, 함수가 돌려줄 수도 있습니다(2.5).

다른 함수에 넘겨 그쪽에서 부르게 하는 함수를 콜백(callback) 이라고 합니다. 3부의 배열 메서드와 4부의 이벤트, 5부의 비동기가 모두 이 방식으로 동작합니다.

함수를 변수에 담기

function twice(n) {
	return n * 2;
}

const f = twice;

console.log(f(5));
console.log(typeof twice);

괄호 없이 이름만 적으면 함수 자체를 담습니다(2.1). 담긴 이름으로도 그대로 부를 수 있습니다.

계산 방식을 넘겨받기

아래 calculate 는 무엇을 계산할지 스스로 정하지 않습니다. 계산할 함수를 넘겨받아 그것을 부릅니다.

function calculate(a, b, operation) {
	return operation(a, b);
}

const add = (x, y) => x + y;
const multiply = (x, y) => x * y;

console.log(calculate(3, 4, add));
console.log(calculate(3, 4, multiply));

넘길 때는 괄호를 붙이지 않습니다. calculate(3, 4, add()) 라고 적으면 함수가 아니라 실행 결과가 넘어갑니다.

그 자리에서 만들어 넘기기

한 번만 쓸 함수라면 이름을 붙이지 않고 그 자리에서 만들어 넘깁니다. 실제 코드에서 가장 많이 보는 모양입니다.

function calculate(a, b, operation) {
	return operation(a, b);
}

console.log(calculate(10, 3, (x, y) => x - y));
console.log(calculate(10, 3, (x, y) => x % y));

같은 일을 여러 번 하게 만들기

되풀이하는 방법은 함수 안에 두고, 무엇을 되풀이할지만 넘겨받습니다.

function repeat(count, action) {
	for (let i = 1; i <= count; i++) {
		action(i);
	}
}

repeat(3, n => console.log(`${n}번째`));
repeat(3, n => console.log("*".repeat(n)));

repeat 는 무엇을 할지 모르고, action 은 몇 번 도는지 모릅니다. 이렇게 나눠 두면 둘을 따로 바꿀 수 있습니다.

어디에서 다시 만나나

• 3부 — map · filter 는 "각 값을 어떻게 다룰지" 를 함수로 받습니다.
• 4부 — addEventListener 는 "눌렀을 때 할 일" 을 함수로 받습니다.
• 5부 — setTimeout 은 "나중에 할 일" 을 함수로 받습니다.

모양은 모두 같습니다. 할 일을 함수로 만들어 넘기고, 부르는 쪽이 때가 되면 부릅니다.

처음에 자주 걸리는 것

TypeError: operation is not a function

직접 해보기

이 단원의 정리