[JavaScript] 함수 심화

콜백함수

콜백함수의 정의

• 콜백함수는 다른 함수에서 호출될 때 실행되는 함수입니다.
• 콜백함수는 다른 함수에 인수로 전달됩니다.

콜백함수의 종류

• 이름이 있는 함수 콜백: 미리 정의된 이름이 있는 함수를 인수로 전달합니다.
• 익명 함수 콜백: 함수를 직접 인수로 전달합니다.

콜백함수의 사용

• 콜백함수는 다른 함수에서 비동기(asynchronous) 코드를 처리할 때 사용됩니다.
• setTimeout(), setInterval(), XMLHttpRequest(), jQuery.ajax() 등 많은 자바스크립트 함수에서 콜백함수가 사용됩니다.

콜백함수의 구현

function getData(callback) {
	// 비동기적으로 데이터를 가져온 후에
	callback(data);
}
 
function myCallback(data) {
	// 가져온 데이터를 사용하여 작업을 수행합니다.
}
 
getData(myCallback);

고차함수

고차함수는 함수를 인수로 받거나 함수를 반환하는 함수를 말합니다. 이전에 다룬 콜백함수와 유사한 개념으로, 자바스크립트에서 함수를 일급 객체로 다룰 수 있는 특성을 활용한 것입니다.

고차함수의 정의

• 함수를 인수로 받거나 함수를 반환하는 함수를 말합니다.
• 함수를 일급 객체로 다룰 수 있는 자바스크립트의 특성을 활용합니다.

고차함수의 사용

• 고차함수는 함수의 재사용성을 높이고 코드의 가독성을 높일 수 있습니다.
• Array.prototype.map(), Array.prototype.filter(), Array.prototype.reduce() 등 많은 자바스크립트 함수가 고차함수입니다.

함수를 인수로 받는 고차함수의 예시

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(function(num) {
	return num * 2;
});
console.log(doubled); // [2, 4, 6, 8, 10]

• 위 코드는 numbers 배열의 모든 요소에 2를 곱한 새로운 배열을 생성합니다. 이때 map() 함수는 인수로 전달된 함수를 배열의 각 요소에 적용하여 새로운 배열을 반환합니다.

함수를 반환하는 고차함수의 예시

• 함수를 반환하는 고차함수의 예시로는 클로저(closure)가 있습니다.

function add(x) {
	return function(y) {
		return x + y;
	};
}
 
const addFive = add(5);
console.log(addFive(3)); // 8

• 위 코드는 add() 함수가 함수를 반환하는 고차함수입니다. add() 함수는 인수로 전달된 x 값을 기억하는 함수를 반환합니다. 이후에 addFive 변수에 add(5)를 할당하면, add() 함수에서 반환된 함수가 addFive 변수에 할당됩니다. 이후에 addFive(3)을 호출하면, add(5)에서 기억된 x값과 전달된 y값을 더한 결과인 8이 반환됩니다.

고차함수의 주의점

• 고차함수는 코드의 가독성을 높이고 함수의 재사용성을 높일 수 있지만, 너무 많이 사용할 경우 코드의 복잡도를 증가시킬 수 있습니다.
• 함수를 인수로 받는 고차함수를 사용할 때는 적절한 인자와 리턴값을 사용해야 합니다. 함수를 반환하는 고차함수는 일반적으로 인자와 리턴값이 명확하게 정의되어 있어야 합니다.
• 너무 많은 중첩된 함수를 사용하면 코드의 가독성이 저하될 수 있으며, 불 필요한 함수 호출로 성능이 저하될 수 있습니다. 적절한 함수 중첩과 함수 추상화를 통해 코드의 가독성과 성능을 모두 고려해야 합니다.

콜백함수와 고차함수의 차이점

예를 들어, Array.prototype.map, Array.prototype.filter, Array.prototype.reduce 등은 고차함수이면서 콜백함수를 사용합니다.