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

고차함수란 함수를 인자로 받거나 함수를 결과로 반환하는 함수이다.

JavaScript의 내장 함수로는 Array.prototype.map , Array.prototype.filter , Array.prototype.reduce 가 있다.

 

 

 

Array.prototype.map

---

map() 메소드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열로 반환해준다.callback 함수는 호출될 때 대상 요소의 값, 그 요소의 인덱스, 그리고 map을 호출한 원본 배열 3개의 인자를 받는다.

 

map() 메소드를 사용하지 않는 경우

const array1 = [1, 4, 9, 16];
const array2 = [];

for(let i = 0; i < array1.length; i++) {
    array2.push(array1[i] * 2);
}

console.log(array2);  // [2, 8, 18, 32]

map() 메소드를 사용하는 경우

const array1 = [1, 4, 9, 16];

const array2 = array1.map(function(element) {
    return element * 2;
}

console.log(array2);  // [2, 8, 18, 32]

*arrow function 사용

const array1 = [1, 4, 9, 16];

const array2 = array1.map(element => element * 2);

console.log(array2);  // [2, 8, 18, 32]

 

Array.prototype.filter

---

filter() 메소드는 배열 내 각 요소에 대해 callback 함수의 테스트를 통과한 배열 요소들을 가진 새로운 배열을 생성한다. callback 함수 테스트를 통과하지 못한 배열 요소는 건너뛰고 새로운 배열에 포함되지 않는다. callback 함수는 호출될 때 요소값, 요소 인덱스, 순회(traverse)되는 배열 객체를 인자로 받는다.

 

filter() 메소드를 사용하지 않는 경우

const fruits = [
  { name: 'apple', price: 1000 },
  { name: 'banana', price: 1500 },
  { name: 'mango', price: 2000 },
  { name: 'grape', price: 3000 },
  { name: 'orange', price: 5000 }
]

const expensiveFruits = [];

for(let i = 0; i < fruits.length; i++) {
  if (fruits[i].price >= 3000) {
    expensiveFruits.push(fruits[i]);
  }
}

console.log(expensiveFruits);  
// [ { name: 'grape', price: 3000 }, { name: 'orange', price: 5000 } ]

filter() 메소드를 사용하는 경우

const fruits = [
  { name: 'apple', price: 1000 },
  { name: 'banana', price: 1500 },
  { name: 'mango', price: 2000 },
  { name: 'grape', price: 3000 },
  { name: 'orange', price: 5000 }
]

const expensiveFruits = fruits.filter(fruit => fruit.price >= 3000);

console.log(expensiveFruits);  
// [ { name: 'grape', price: 3000 }, { name: 'orange', price: 5000 } ]

 

 

Array.prototype.reduce

---

reduce() 메소드는 배열의 각 요소에 대해 주어진 콜백 함수(reducer)를 실행하고, 하나의 결과값을 반환한다.reduce() 메소드는 콜백 함수(reducer), 초기값(옵션) 을 인자로 받는다.

reducer는 인자로 accumulator(콜백의 반환값을 누적), currentValue(처리할 현재 요소), currentIndex(처리할 현재 요소의 인덱스), array를 받는다.

 

reduce() 메소드를 사용하지 않는 경우

const array1 = [1, 2, 3, 4, 5];
let sum = 0;

for(let i = 0; i < array1.length; i++) {
  sum += array1[i];
}

console.log(sum);  // 15

reduce() 메소드를 사용하는 경우

const array1 = [1, 2, 3, 4, 5];

const sum = array1.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
});

console.log(sum);  // 15

 

 

사용자 정의 고차함수

---

map(), filter(), reduce() 이외에도 필요에 따라 직접 고차함수를 만들어 사용할 수 있다.

const stringArray = ['apple', 'banana', 'orange', 'kiwi', 'grapefruit'];

function stringToLength(array, func) {
  const resultArray = [];
  for(let i = 0; i < array.length; i++) {
    resultArray.push(func(array[i]);
  }
  return resultArray;
}

const stringLengthArray = stringToLength(stringArray, function(element) {
  return element.length;
});

console.log(stringLengthArray);  // [5, 6, 6, 4, 10]

 

 

 

 

고차함수는 추상성이 높은 기능을 정의하기 때문에 코드의 가독성을 높여준다. 추상성이 높다는 것은 중요하거나 자주 반복되는 특성만을 가지고 있는 것이다. 그래서 고차함수에서는 반복적으로 가지고 있는 기능을 정의해두고, 나머지 디테일한 기능들은 인자로 넣는 callback 함수를 통해 정의해주는 방식으로 사용해주면 된다.

 

 

 

 

참고한 사이트

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce