고차 함수

JavaScript에도 특별한 대우를 받는 일급 객체(first-class citizen)가 있습니다. 대표적인 일급 객체 중 하나가 함수입니다. JavaScript에서 함수는 아래와 같이 특별하게 취급됩니다.

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

함수를 변수에 할당할 수 있기 때문에, 함수를 배열의 요소나 객체의 속성 값으로 저장할 수 있습니다. 함수를 데이터(string, number, boolean, array, object)처럼 다룰 수 있습니다.

 

<고차 함수>

=> 함수를 리턴하는 함수

=> 함수를 전달인자로 받는 함수

 

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

함수를 리턴하는 경우이다.

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 메서드

 

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

걸러내는 기준이 되는 특정 조건은 filter 메서드의 전달인자로 전달된다. 이때 전달되는 조건은 함수의 형태이다.

filter 메서드는, 걸러내기 위한 조건을 명시한 함수를 전달인자로 받기 때문에 고차함수이다.

 

arr.filter를 실행하면 내부적으로 arr에 접근할 수 있다고 생각해도 된다.filter에 전달인자로 전달된 콜백 함수는 arr의 각 요소를 전달받아 호출된다.콜백함수가 true를 리턴하는 경우에만 새로운 배열에 추가돤다.

 

=> filter 메서드의 정확한 정의는 아래와 같다.

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 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] -->

const isLteFive = function (str){

    return str.length <= 5;

}; <!--길이 5 이하를 판별하는 함수 -->

 arr = ['hello', 'code', 'states', 'happy', 'hacking'];

 

 <!-- output = arr.filter(길이 5이하)

'길이 5이하'를 판별하는 함수가 조건으로서 filter 메서드의 전달인자로 전달됩니다. -->

 

let output = arr.filter(isLteFive);

console.log(output); <!-- ['hello', 'code','happy'] -->

 

🌻 배열의 map 메서드

특정 논리 함수에 의해 다른 요소로 지정된다.

map은 이렇게 하나의 데이터를 다른 데이터로 매핑(mapping) 할 때 사용합니다.

const double = function (num) {

    return num * 2;

};

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

 

let output = arr.map(double);

 

console.log(output);

<!-- => [2,4,6,8,10,12,14] -->

 

🌻 배열의 reduce 메서드

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

 

reduce는 문자열이나 숫자등을 합치거나 더하고 뺄 수도 있고, 제일 작은거나 큰 것을 비교할 수도 있고, 배열 이외의 다른 형태로도 만들 수 있다.

 

배열의 여러가지 사용법

배열의 각 요소 : 유저 정보

응축하는 방법 (함수) : 하나의 유저의 이름과 쉼표를 이어 붙인다.

원하는 형태 : 문자열로 누적

결과 : 쉼표로 구분되는 모든 유저의 이름

function joinName(resultStr, user){

    resultStr = resultStr + user.name + ',';

    return resultStr;

}

let users = [

    { name : 'Tim', age : 40 },

    { name : 'Yun', age : 20 },

    { name : 'Hee', age : 30 }

];

user.reduce(joinName, '');