[JS/Node] 고차함수

• 고차함수를 통해 높은 수준에서 사고하는 방식, 보다 복잡한 알고리즘을 직접 구현

고차함수 이해하기

특별한 대우를 받는 함수 - 일급 객체

• 변수에 할당(assignment) 가능 : 함수를 배열의 요소나 객체의 속성값으로 저장 가능. 함수를 데이터(string, number, boolean, array, object)를 다루듯이 다룰 수 있다는 걸 의미함.

• 다른 함수의 인자(argument)로 전달 가능.

• 다른 함수의 결과로서 리턴 가능.

• 호이스팅 : 선언된 위치에 관계없이 어디서든 함수를 사용할 수 있도록 한다. 코드가 실행되는 과정에서 함수 선언부를 코드의 최상단으로 끌어올리는 것처럼 보이게 한다.

  • 함수 표현식(function expression) : 호이스팅 적용 (X)
    const ~~ = function(){}
  • 함수 선언식(function declaration) : 호이스팅(Hoisting) 적용 (O)
    function ~~(){}
    • 함수 선언식의 호이스팅에 지나치게 의존하면, 코드의 유지 보수가 쉽지 않음.
    • 코드 리뷰나 디버깅을 할 때, 코드를 위아래로 왔다 갔다 하게 될 수 있다. 함수 선언식은 어느 위치에나 함수를 선언할 수 있고, 함수의 실행 위치도 중요하지 않다. 반면에 함수 표현식은 함수의 할당과 실행의 위치에 따라 결과가 달라지기 때문에, 코드의 위치를 어느 정도 예측할 수 있다.

• 변수에 함수를 할당하는 경우 : 함수 표현식은 변수에 할당한 다음 사용할 수 있습니다.

/*
 * 아래는 변수 square에 함수를 할당하는 함수 표현식입니다.
 * 자바스크립트에서 함수는 일급 객체이기 때문에 변수에 저장할 수 있습니다.
 *
 * 함수 표현식은 할당 전에 사용할 수 없습니다.
 * square(7); // --> ReferenceError: Can't find variable: square
 */

const square = function (num) {
  return num * num;
};

// square에는 함수가 저장되어 있으므로 (일급 객체), 함수 호출 연산자 '()'를 사용할 수 있습니다.
output = square(7);
console.log(output); // --> 49

고차 함수(higher order function)란

: 1. 함수를 인자(argument)로 받을 수 있고, 2. 함수의 형태로 리턴할 수 있는 함수.
(함수 내부에서 변수에 함수를 할당가능. 함수는 이 변수를 리턴 가능.)

• 콜백 함수(callback function) : 다른 함수(caller)의 인자(argument)로 전달되는 함수
• 커리 함수 : 함수를 리턴하는 함수. 정확하게 구분하자면, 고차 함수가 커리 함수를 포함.

1. 다른 함수를 인자로 받는 경우 : ( 인자 :: 콜백 함수 )

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

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

/*
 * 함수 doubleNum은 다른 함수를 인자로 받는 고차 함수입니다.
 * 함수 doubleNum의 첫 번째 인자 func에 함수가 들어올 경우
 * 함수 func는 함수 doubleNum의 콜백 함수입니다.
 * 아래와 같은 경우, 함수 double은 함수 doubleNum의 콜백 함수입니다.
 */
let output = doubleNum(double, 4);
console.log(output); // -> 8

2. 함수를 리턴하는 경우 : func( )( )

function adder(added) {
  return function (num) {
    return num + added;
  };
}

/*
 * 함수 adder는 다른 함수를 리턴하는 고차 함수입니다.
 * adder는 인자 한 개를 입력받아서 함수(익명 함수)를 리턴합니다.
 * 리턴되는 익명 함수는 인자 한 개를 받아서 added와 더한 값을 리턴합니다.
 */

// adder(5)는 함수이므로 함수 호출 연산자 '()'를 사용할 수 있습니다.
let output = adder(5)(3); // -> 8
console.log(output); // -> 8

// adder가 리턴하는 함수를 변수에 저장할 수 있습니다.
// javascript에서 함수는 일급 객체이기 때문입니다.
const add3 = adder(3);
output = add3(2);
console.log(output); // -> 5

3. ( 1 + 2 ) : 함수를 인자로 받고, 함수를 리턴하는 경우

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

function doubleAdder(added, func) {
  const doubled = func(added);
  return function (num) {
    return num + doubled;
  };
}

/*
 * 함수 doubleAdder는 고차 함수입니다.
 * 함수 doubleAdder의 인자 func는 함수 doubleAdder의 콜백 함수입니다.
 * 함수 double은 함수 doubleAdder의 콜백으로 전달되었습니다.
 */

// doubleAdder(5, double)는 함수이므로 함수 호출 기호 '()'를 사용할 수 있습니다.
doubleAdder(5, double)(3); // -> 13

// doubleAdder가 리턴하는 함수를 변수에 저장할 수 있습니다. (일급 객체)
const addTwice3 = doubleAdder(3, double);
addTwice3(2); // --> 8

내장 고차함수 이해하기

• 자바스크립트에는 기본적으로 내장된 고차함수 : filter, map, reduce

filter 메소드

: 모든 배열의 요소 중에서 특정 조건을 만족하는 요소를 걸러내는 메소드

• 걸러내는 기준이 되는 특정 조건은 filter 메소드의 인자로 전달. 이때 전달되는 조건은 함수의 형태.
• 배열의 각 요소가 특정 논리(함수)에 따르면, 사실(boolean)일 때 따로 분류(filter).

// 함수 표현식
const isEven = function (num) {
  return num % 2 === 0;
};

let arr = [1, 2, 3, 4];
// let output = arr.filter(짝수);
// '짝수'를 판별하는 함수가 조건으로서 filter 메소드의 인자로 전달됩니다.
let output = arr.filter(isEven);
console.log(output); // ->> [2, 4]


//배열과 임의의 값을 입력받아 기존 배열에서 keeper와 일치하는 요소만 필터
// 코플릿-11번
function keep(arr, keeper) {
  return arr.filter( function(el) {
    return el === keeper; 
  });
}

map 메소드

: map은 이렇게 하나의 데이터를 다른 데이터로 맵핑(mapping) 할 때 사용

• 배열의 각 요소가 특정 논리(함수)에 의해 다른 요소로 지정(map).
• el을 변경하고 저장한뒤 다음 el을 만드는 것이 아니라 각 el결과를 임시저장하여 한번에 return 된다. 따라서 각 요소의 변경이 서로에게 영향을 줄수 있다.

// 각 요소의 변경이 서로에게 영향을 줄수 있다. - 확인예시 HA Section1 - 05_test5
function test5(arr) {
  // TODO: 여기에 코드를 작성합니다.
  let obj = {};
  return arrToobj = arr.map((el) =>{
    for( let i = 0;  i < el.length; i++ ){
      obj[el[i][0]] = el[i][1];
    }
    return obj;
  });
}

let list = [
  [
    ['firstName', 'Joe'],
    ['age', 42],
    ['gender', 'male'],
  ],
  [
    ['firstName', 'Mary'],
    ['lastName', 'Jenkins'],
    ['age', 36],
    ['gender', 'female'],
  ],
  [
    ['lastName', 'Kim'],
    ['age', 40],
    ['gender', 'female'],
  ],
];

let output = test5(list);
console.log(output)

//수를 요소로 갖는 배열을 입력받아 각 요소를 2배 곱한 새로운 배열을 리턴
// 코플릿-15번
function getDoubledElements(arr) {
  return arr.map(function(el){
    return el*2;
  })
}

//수를 요소로 갖는 배열을 입력받아 각 요소가 2의 배수인지에 대한 정보를 요소로 갖는 새로운 배열을 리턴
// 코플릿-17번
function checkEvenOrNot(arr) {
  return arr.map(function(el){
    if (el % 2 === 0 && el > 0){
      return 'ok';
    } else{
      return 'no';
    }
  })
}


//객체와 키를 입력받아 키에 해당하는 값이 배열인 경우, 배열의 각 요소를 제곱한 새로운 배열을 리턴
// 코플릿-20번
function square(number) {
  return number * number;
}

function getSquaredElementsAtProperty(obj, property) {
  if(!Array.isArray(obj[property])){
    return [];
  }
  return obj[property].map( square );
  // 
}

reduce 메소드

: reduce는 이렇게 여러 데이터를, 하나의 데이터로 응축(reduce)할 때 사용

• 배열의 각 요소를 특정 방법(함수)에 따라 원하는 하나의 형태로 응축(reduction).

// number 타입을 요소로 갖는 배열을 입력받아 배열의 모든 요소의 합을 리턴
// 코플릿-23번 . 초기값 쓰기
function computeSumOfAllElements(arr) {
  if(arr.length === 0){
    return 0;
  }
  return arr.reduce(function(acc, cur){
    return acc + cur;
  },0)
}


// number 타입을 요소로 갖는 배열을 입력받아 배열의 모든 요소의 곱을 리턴
// 코플릿-24번 . 초기값 안쓰기
function computeProductOfAllElements(arr) {
  // TODO: 여기에 코드를 작성합니다.
  if(arr.length === 0){
    return 1;
  }
  return arr.reduce(function(acc, cur){
    return acc * cur;
  })
}

코플릿 26번 이후 부터 풀어보기