[JavaScript] 고차함수(Higher-Order Function)

고차함수

목표

• first-class citizen의 세 가지 특징

• higher-order functiond의 이해

• 내장 고차함수에 대한 이해

  • forEach

  • find

  • filter

  • map

  • reduce

  • sort

  • some

  • every

• 추상화(Abstraction)에 대한 이해

• 추상화 관점에서 고차 함수가 갖는 이점

First-class citizen

JS에서는 특별한 대우를 받는 first-class citizen가 있습니다. 이 중 하나가 데이터를 다루듯이 사용할 수 있는 함수 입니다. 따라서 함수는 변수에 저장할 수 있습니다.

console.log(a(2));

const a = function (num) {
    return num * 2;
}
/*
 * 오류가 발생 - 변수에 함수를 할당한 경우 Hoisting이 적용되지 않음
 * VM558:1 Uncaught SyntaxError: Identifier 'a' has already been declared
 */

console.log(b(2));

function b(num){
    return num * 2;
}

/*
 * 오류가 발생하지 않음 - Hoisting 적용
 */

고차함수

고차함수(Higher-Order Function)란 하나 이상의 function을 인자(argument)로 function 형태로 반환하는 함수입니다. 이때, function 인자를 callback 함수라 합니다. 고차함수는 내부에서 조건에 따라 callback 함수를 호출(invoke)하여 사용합니다.

function funcA (num) {
    return num * 2;
};

const hdf = function (func, num) {
    return func(num);
};

console.log(hdf(funcA, 4));

내장 고차함수

JS는 기본적으로 여러 고차함수를 제공합니다. MAN web docs를 참조하시기 바랍니다. 아래 함수들은 주로 사용하는 내장 고차함수입니다. 함수명 - 추상화된 설명과 예시로 구성되어 있습니다. (추상화 : 복잡한 과정이나 내용을 주요 과정이나 목적의 요약을 의미)

filter - 배열에서 조건을 만족하는 값들을 배열로 반환

/*
 * arr.filter(callback(item, index, array) => true, false를 반환하는 조건)

 * Array.prototype.filter = function(func) {
 *   const arr = this;
 *   const newArr = []
 *   for(let i = 0; i < arr.length; i++) {
 *     if (func(arr[i]) === true) {
 *       newArr.push(this[i])
 *     }
 *   }
 *   return newArr;
 * }
 */
const arr = [1, 2, 3, 4, 5, 6, 7, 8];

const result = arr.filter(item => item % 2 === 0); // 짝수 반환

console.log(result); // [2, 4, 6, 8]

find - 배열에서 조건을 만족하는 첫번째 값을 반환

const arr = [1, 2, 3, 4, 5, 6, 7, 8];

const result = arr.find(item => item % 2 === 0); // 짝수 반환

console.log(result); // 2

forEach - 반환값이 없는 배열 반복문

// arr.forEach((value, index, array) => {
// 반복할 표현식
// })

const arr = [1, 2, 3, 4];

const result = arr.forEach((vlaue) => {
    console.log(value);
});
// 1
// 2
// 3
// 4

console.log(result); // undefined

map - 반환값을 배열로 반환하는 배열 반복문

// arr.map((value, index, array) => {
//     return 반환값;
// })

const arr = [1, 2, 3, 4];

const result = arr.map((value) => value * 2);

console.log(result); // [2, 4, 6, 8]

reduce - 하나의 값만 반환하는 배열 반복문

// arr.reduce((acc, value, index, array) => {
//     return 반환값;
// }, initialValue)

const arr = [1, 2, 3, 4];

const result = arr.reduce((acc, value) => acc + value, 0);

console.log(result); // 10

sort - 배열을 정렬하여 배열을 반환

// arr.sort([compareFunction])
// boolean값을 반환하는 compareFunction이 없을 경우 기본적으로 오름차순으로 정렬
// function compareFunction(a, b){
//  if(a < b) return -1; // -1일때 변경
// }

const arr = [2, 3, 1, 4];

const result = arr.sort(compareFunction);

console.log(result); // [1, 2, 3, 4];

some - 배열에서 하나라도 조건을 만족하면 true 리턴

// arr.some((currentValue, index, array)=>{return (true or false);}, thisArg)
// thisArg : 콜백함수에서 실행할 this 값

const arr = [2, 3, 1, 4];

const result1 = arr.some((value)=>value===1);
console.log(result); // true;
const result1 = arr.some((value)=>value===7);
console.log(result); // false;

every - 배열에서 모두 조건을 만족하면 true 리턴

// arr.some((currentValue, index, array)=>{return (true or false);}, thisArg)
// thisArg : 콜백함수에서 실행할 this 값

const arr = [2, 3, 1, 4];

const result1 = arr.every((value)=>value===1);
console.log(result); // false
const result1 = arr.every((value)=>value<7);
console.log(result); // true - 모두 7보다 작은 숫자이기 때문

참조

• mdn Web Docs