고차함수, 내장고차함수

1. 일급객체 (first-clas citizen)

 일급 객체는 Javascript에서 특별한 대우를 받는다. 예를 들어, 일급 객체 중 하나인 함수는 변수에 할당할 수 있으며, 다른 함수의 전달인자로 전달될 수 있으며, 다른 함수의 결과로서 리턴할 수 있다. 그렇기에 함수를 데이터처럼 다룰 수 있다,

 

2. 고차 함수 (higher order function)

 고차 함수는 함수를 전달인자로 받을 수 있고, 함수를 리턴할 수 있는 함수이다. 그리고 다른 함수의 전달인자로 전달되는 함수를 콜백 함수(Callback function)라고 한다. 이 콜백 함수를 전달받은 고차 함수는 함수 내부에서 콜백 함수를 호출할 수 있으며 조건에 따라 이것의 실행 여부를 결정할 수도 있다. 그리고 함수를 리턴하는 함수는 커링 함수라고 한다. 

// 1. 다른 함수를 인자로 받는 경우
function plusOne(num) {
	return num + 1;
}

function square(func, num) {
	return func(num);
}

const result = square(plusOne, 3);
console.log(result);	// 4

// 2. 함수를 리턴하는 경우
function multiple(a) {
	return function(b) {
    	return a * b;
    }
}

const result2 = multiple(3)(5);
console.log(result2);	//	15

 

3. 내장 고차 함수 filter

 내장 고차 함수 filter는 배열 메서드로, 배열에서 조건에 맞는 요소들을 추려서 새로운 배열을 만드는 메서드이다. 이 때, 원본 배열은 변하지 않는다. 그리고 filter에서 이용되는 콜백 함수는 true, false를 반환해야 한다. 왜냐하면 콜백 함수는 filter의 거름망 역할을 하기 때문이다.

// 내장 고차 함수 filter
const arr = [1, 2, 3, 4];

const isEven = function(num) {
	return num % 2 === 0;
}

const newArray1 = arr.filter(isEven);	
const nowArray2 = arr.filter(a => { return a % 2 === 0; });	// arrow function을 이용할 수도 있다.
// newArray1 = [2, 4]
// newArray2 = [2, 4]

 

4. 내장 고차 함수 map

 내장 고차 함수 map은 배열 메서드로, 배열을 다른 데이터로 매핑(mapping) 할 때 사용하는 메서드이다. 그렇기에 map을 이용할 경우 새로운 배열이 만들어지며 이 때, 원본 배열은 변하지 않는다. 그리고 map 역시 콜백 함수가 필요한데, 새롭게 만들어지는 배열의 요소들은 기존 배열의 각 요소들을 인자로 받은 콜백 함수의 리턴값들이다.

// 내장 고차 함수 map
const double = function(num) {
	return num * 2;
}

const array = [1, 2, 3, 4];
const newArray = array.map(double);
console.log(newArray);	// [2, 4, 6, 8];

// arrow function 이용 가능
// const newArray = array.map(num => { return double(num); });

 

5. 내장 고차 함수 reduce

 내장 고차 함수 reduce는 배열 메서드로, 배열을 하나의 데이터로 응축(reduce)할 때 사용하는 메서드이다. 그렇기에 reduce를 이용할 경우, 새로운 값이 만들어지며 원본 배열은 변하지 않는다. 그리고 reduce 역시 콟백 함수가 필요하며, 이 콜백 함수는 배열의 매 인덱스마다 갱신될 값을 return해야 한다. (예를 들어 총합을 구할 경우 그 index까지의 합, 가장 긴 문자열을 구할 경우 그 순간까지의 가장 긴 문자열 등) 그리고 콜백 함수 뒤에는 초기값을 적어줄 수 있다.

// 내장 고차 함수 reduce
const sum = function(sum, cur) {
	return sum + cur;
}

const array = [1, 2, 3, 4];
const total = array.reduce(sum, 0);	// 초기값 = 0
console.log(total);	// 10

// arrow function
const total2 = array.reduce((acc, cur) => { return acc + cur; });