[JavaScript] 고차함수 복습

hyxoo·2023년 5월 3일

📌 고차함수 (Higher-Order Function)

고차 함수(Higher order function)는 함수를 인자로 전달받거나 함수를 결과로 반환하는 함수를 말한다. 즉, 고차 함수는 인자로 받은 함수를 필요한 시점에 호출하거나 클로저를 생성하여 반환한다. 자바스크립트의 함수는 일급 객체이므로 값처럼 인자로 전달할 수 있으며 반환할 수도 있다.

고차 함수는 불변성(Immutability)을 지향하는 함수형 프로그래밍에 기반을 두고 있다. 함수형 프로그래밍은 함수를 다른 함수의 파라미터로 넘길 수도 있고 반환(return) 값으로 함수를 받을 수도 있는 프로그래밍 형태를 말한다.

✔️ 일급 객체(first-class citizen)

비행기의 first class 처럼 JavaScript에는 특별한 대우를 받는 일급 객체가 있다. 대표적인 일급 객체로는 함수가 있다.

❗️ 일급 객체의 특징

변수에 할당(assignment) 할 수 있다.
다른 함수의 인자(argument)로 전달될 수 있다.
다른 함수의 결과로서 리턴될 수 있다.

함수를 변수에 할당할 수 있다는 것은 함수를 배열의 요소나 객체의 속성값으로 저장할 수 있고, 함수를 데이터를 다루듯이 다룰 수 있다는 것을 의미한다.

📌 JavaScript 내장 고차함수

✔️ Array.filter()

filter()는 배열 메서드 중 하나로 모든 배열의 요소 중에서 특정 조건을 만족하는 요소를 걸러내는 메서드이다. 배열의 각 요소를 순회하며 callback함수를 실행하며 조건에 맞는 요소만을 갖는 배열을 반환한다.

arr.filter(callback(element[, index[, array]])[, thisArg])

💡 callback function

각 요소의 조건을 판단할 함수로 true를 반환하면 요소를 유지하고 false를 반환하면 제외한다.

element : 배열의 현재 요소
index(Optional) : 배열의 현재 요소의 인덱스
array(Optional) : 호출한 배열

💡 thisArg (Optional)

callback함수를 실행할때 this로 사용되는 값이다.

📎 예시

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

// 현재 요소를 2로 나눈 나머지가 1일 경우 홀수
const filter1 = numbers.filter((num) => (num) % 2 === 1);

console.log('filter =', filter1); // filter = [1, 3, 5]

✔️ Array.map()

map()은 하나의 데이터를 다른 데이터로 맵핑할 때 사용되는 메서드이다. 배열을 순서대로 불러 각 요소에 대해 callback 함수을 실행한 결과로 새로운 배열을 만든다.

arr.map(callback(element[, index[, array]])[, thisArg])

💡 callback function

element : 배열의 현재 요소
index(Optional) : 배열의 현재 요소의 인덱스
array(Optional) : 호출한 배열

💡 thisArg (Optional)

callback함수를 실행할때 this로 사용되는 값이다.

📎 예시1 - 숫자의 제곱으로 이루어진 새로운 Number배열 만들기

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

const mapAee = numbers.map(num => num * num);

console.log('map =', mapAee); // map = [1, 4, 9, 16, 25]

📎 예시2 - Number배열로 숫자와 인덱스를 갖는 Object배열 만들기

const numbers = [1, 3, 5, 7, 9];

const objectArr = numbers.map((number, index) => ({ number, index }));

console.log('objectArr =', objectArr); // objectArr = [ { "number": 1, "index": 0 } , ... ]

📎 예시3 - Object배열로 새로운 Object배열 만들기

기존 배열은 유지하면서 새로운 배열을 만들 수 있다.

const persons = [
  {
    name: '김코딩',
    age: 22,
  },
  {
    name: '박해커',
    age: 25,
  },
  {
    name: '최공부',
    age: 24,
  }
];

const tenYearsAgo = persons.map((person) => {
  const obj = persons;
  
  // 10년 전 나이
  obj.age -= 10;
  
  return returnObj;
})

console.log('10년 전 사람들은 ', tenYearsAgo);

/*

[
  {
    name: '김코딩',
    age: 12,
  },
  {
    name: '박해커',
    age: 15,
  },
  {
    name: '최공부',
    age: 14,
  }
];

*/