[TIL] Day18-고차함수

공부중인 개발자·2021년 4월 28일

CODESTATES 고차함수

TIL

목록 보기

18/64

고차함수

first class citizen

1급 시민의 조건

변수에 담을 수 있다.
인자로 전달할 수 있다.
반환값(리턴)으로 전달 할 수 있다.

1급 객체, 1급 함수도 존재
1급 함수는 런타임 생성이 가능하고 익명으로 생성이 가능할 경우
자바스크립트에서는 객체를 1급 시민으로 취급

고차 함수

고차 함수는 함수를 인자로 받을 수 있고, 함수의 형태로 리턴할 수 있는 함수

이때 다른 함수의 인자(argument)로 전달되는 함수를 콜백 함수라고 합
콜백 함수를 전달받은 고차 함수는, 함수 내부에서 이 콜백 함수를 호출(invoke) 할 수 있습니다. caller는 조건에 따라 콜백 함수의 실행 여부를 결정할 수 있음

고차함수의 종류

다른 함수를 인자로 받는 경우

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

함수를 리턴하는 경우

function (num1) {
  return function (num2) {
    return num2 + num1;
  };
}

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

function multi(num) {
  return num * num;
}

function multiple(num1, func) {
  const gobHaGi = func(num1);
  return function (num2) {
    return num2 * gobHaGi;
  };
}

내장 고차함수

javascript에 미리저장되어 있는 함수(예시는 MDN의 예시를 가져옴)

forEach()
주어진 함수를 배열 요소 각각에 대해 실행

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

find()
주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환, 그런 요소가 없다면 undefined를 반환

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12

filter()
주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

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

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

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

console.log(map1);
// expected output: Array [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));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15
// 예시를 보고만 이해하기 힘드므로 mdn사이트와 다른 블로거들의 자료를 보자

sort()
배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환

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

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

some()
배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트, 빈 배열에서 호출하면 무조건 false를 반환

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

// checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// expected output: true

every()
배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트, 빈 배열에서 호출하면 무조건 true를 반환

const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// expected output: true

내장 고차함수는 다양하게 존재하며 위에 나와있는것을 응용하여 다양한 방법으로 내장함수를 이용할 수 있고 해야한다.

코플릿 문제를 풀며 알게 된것

arguments 객체
함수에 전달된 인수에 해당하는 Array 형태의 객체
function(a, b, c) {} 에 대해서 arguments[0] === a arguments[1] === b arguments[2] === c
전달된 인수가 배열형태의 객체
arguments 객체는 Array가 아니다
Array와 비슷하지만, length 빼고는 pop()과 같은 어떤 Array 속성도 없다. 그러나 실제 Array로 변환할 수 있다.
flat()
모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성

const arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]