4-3 고차함수

고차함수를 배우기 전 알아보는

first-class citizen(특별한 대우를 받는 함수)?

자바스크립트에는 first class가 있다. 바로 특별한 대우를 받는 부분이 있다. 이런 객체를 일급객체(first-class citizen)라고 한다. 그리고 일급객체중에는 함수(function)이 있다.

즉, 자바스크립트에서 함수는 아래와 같은 특별 취급을 받는다.

1. 변수에 할당(assignment)할 수 있다.
함수를 변수에 할당할 수 있기 때문에 데이터를 다루듯이 다룰 수 있다. 여기서 데이터는 string, number, boolean, array, object가 있다.
예를들면 함수 표현식이 있다.(호이스팅이 안된다.)

// 함수표현식은 변수에 할당된 함수를 말한다.
const square = function(num) {
  return num * num
};

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

Tip으로 함수선언식을 사용하여 호이스팅에 지나치게 의존하는것은 코드의 유지보수로 좋지 않기때문에 함수 표현식을 이용해 함수의 할당과 실행의 위치를 정확히 코딩하므로 바른 코딩 작업을 하는데 수월합니다.
2. 다른 함수의 인자(argument)로 전달될 수 있다.
3.다른 함수의 결과로서 리턴될 수 있다.

고차함수란?

영어로는 higher order function.
함수를 인자로 받는 함수.
함수를 리턴하는 함수.

콜백함수란?

1.다른 함수의 인자(argument)로 전달되는 함수

function square(function circle(PI)); 
//여기서 function circle()함수가 callback함수다.
//응답하는함수라고 생각하면 개념이 쉬울 것이다.
//callback함수 : function circle()
//caller함수 : function square()

function double(num) {
  return num*2 
}

function doubleNum(func, num){
  let doubleArr = [];
  return func(num);
}
// 함수 doubleNum은 다른 함수를 인자로 받는 고차 함수
// 함수doubleNum은 첫번째 인자 func에 함수가 들어올 경우
// 함수 func는 함수 doubleNum의 콜백함수

let output = doubleNum(double, 4);
console.log(output) ; //->. 8
// 함수doubleNum의 콜백함수는 double이다.
// 함수doubleNum은 caller이다.

2. 함수를 리턴하는 경우

function adder(added) {
  return function (num) {
    return num + added;
  };
}
// 함수 adder은 다른 함수를 리턴하는 고차함수
// adder는 인자 한 개를 입력받아서 함수(익명 함수)를 리턴
// 리턴되는 익명 함수는 인자 한 개를 받아서 added와 더한 값을 리턴

let output = adder(5)(3); //5는 added, 3은 num
console.log(output) // 3+5므로 8출력
//adder(5)는 함수이므로 함수 호출 연산자 '()'을 사용한다

const add3 = adder(3); //3은 added
output = add3(2); //2는 num
console.log(output); //2+3이므로 5출력

3. 함수를 인자로 받고, 함수를 리턴하는 경우

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

function doubleArr(added, func) {
  const doubled = func(added);
  return function (num) {
    return num + doubled;
  };
}
//함수 doubleAdder는 고차함수
//함수 doubleAdder의 인자 func는 doubleAdder함수의 콜백함수
//함수 double은 함수 doubleAdder의 콜백으로 전달됨

//자, 그럼 고차함수를 실행해보자 
doubleAdder(5, double)(3); //-> 13

//코드 하나씩 해석해보자.
function doubleAdder(5, double) {
  const double = double(5); 
//double(5)실행하면 doubled = 10이 들어감
  return function(3) {
    return 3+10; // -> 결국 13리턴
    
//자, 다음 고차함수 실행해보자
const addTwice3 = doubleAdder(3, double);
//코드실행해보자
function doubleAdder(3,double) {
  const addTwice3 = double(3); //-> 6
 addTwice3(2); // ->8
// function(2) {
//  return 2+3;    

arguments란?

-arguments객체는 함수에 전달된 인수에 해당하는 Array형태의 객체.
-arguments는 유사배열로 배열처럼 length속성과 더불어 0부터 인덱스를 가지고 있지만 Array의 내장 메서드인 forEach, map같은것을 사용할 수 없다는 것이 특징이다.

function func1(...arguments) {
  console.log(arguments[0]);
  // expected output: 1

  console.log(arguments[1]);
  // expected output: 2

  console.log(arguments[2]);
  // expected output: 3
}

func1(1, 2, 3); //1,2,3이 각각 출력됨

filter()?
-배열 내장 고차함수
-배열의 요소 중 특정 조건을 만족하는 요소들만을 걸러내는 메소드

forEach()?
-배열 내장 고차함수
-주어진 함수를 배열 요소 각각에 대해 실행하는 메소드
-for문 대신 사용 가능

const items = ['item1', 'item2', 'item3'];
const copy = [];

// 이전
for (let i=0; i<items.length; i++) {
  copy.push(items[i]);
}

// 이후
items.forEach(function(item){
  copy.push(item);
});

find()?
-배열 내장 고차함수
-주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환하는 메소드. 그런 요소가 없다면 undefined를 반환한다.

const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found); // expected output: 12

map()?
-배열 내장 고차함수
-배열 내의 각각의 요소에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

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

// pass a function to map
const map1 = array1.map(x => x * 2);

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

reduce()?
-배열 내장 고차함수
-배열의 각 요소에 대해 주어진 리듀서(reducer)함수를 실행하고, 하나의 결과값을 반환한다.

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator - currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));// 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));// 15

sort()?
-배열 내장 고차함수
-배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환한다. 정렬은 stable sort가 아닐 수 있다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따른다.

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
//  [1, 100000, 21, 30, 4]

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers); // [1, 2, 3, 4, 5]

some()?
-배열 내장 고차함수
-배열 안의 요소 중 주어진 판별 함수를 한개라도 통과하면 true를 반환하고 판별함수의 조건에 한개라도 맞지 않고 모든 요소가 통과하지 못한다면 false를 반환한다.
-빈 배열에서 호출하면 무조건 false를 반환한다.

const array = [1, 3, 5];
// checks whether an element is even
const even = (element) => element % 2 === 0;
console.log(array.some(even)); // false

const array = [1, 3, 5, 10];
// checks whether an element is even
const even = (element) => element % 2 === 0;
console.log(array.some(even)); // true

every()?
-배열 내장 고차함수
-배열 안의 모든 요소가 주어진 판별 함수를 모두 통과하는지 테스트한다.(true or false)
-빈 배열에서 호출하면 무조건 true를 반환한다.

const isBelowThreshold = (currentValue) => currentValue < 40;
const array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBelowThreshold)); // true

const isBelowThreshold = (currentValue) => currentValue < 40;
const array1 = [1, 30, 39, 29, 10, 13, 40];
console.log(array1.every(isBelowThreshold)); // false