[JS] 고차함수

Pavel_Dmr·2022년 6월 21일

Javascript 기초

JavaScript

목록 보기

4/9

일급 객체(First-Class-Citizen)
고차 함수(Higher-Order Function)
배열 인스턴스 메소드를 자유롭게 사용
고차 함수를 활용한 코드 작성

🍮 일급 객체 (First-Class-Citizen)

자바스크립트와 같은 함수형 언어에서의 함수는 다른 명령형 언어에서의 함수와 차이점이 있다.

일급 객체란 생성,대입,연산,인자 또는 리턴값으로서의 전달 등 프로그래밍 언어의 기본적 조작을 제한없이 사용할 수 있는 대상을 의미한다.

변수나 객체에 저장할 수 있다.

이와 같음이 가능한 것은 함수 또한 객체로 취급되기 때문

const a = function(){} // 함수지만 변수에 할당됨

다른 함수의 파라미터로 전달 될 수 있다.

함수는 객체. 즉 값이기으로도 취급할 수 있기 때문에.
다른 함수의 인자로 전달 할 수 있습니다.
함수에서 파라미터로 다른 함수을 받는 함수를 콜백함수라 합니다.

function cal(func, num)
{    return func(num)}

function increase(num)
{    return num+1}

function decrease(num)
{    return num-1}

console.log(cal(increase, 1));
console.log(cal(decrease, 1));

다른 함수의 결과로서 리턴될 수 있다.

함수를 데이터처럼 다룰 수 있다. 변수에 저장 가능하기에, 배열의 요소나 객체의 프로퍼티값으로 저장 가능하다.

무명의 리터럴로 표현이 가능하다.

네임 없이 인라인으로 작성가능.

🍳 고차 함수 (Higher Order Function)

고차 함수는 함수를 인자(Argument)로 받거나 함수를 반환(Return)함으로서 작동하는 함수를 말합니다. 더 간략히 설명하면, 함수를 실행,출력하는 것을 반환하는 함수를 말합니다.

예를 들면, Array의 인스턴스 메소드인, Array.prototype.map , Array.prototype.filter , Array.prototype.reduce 와 같은 언어 내에서 제공하는 API는 고차 함수입니다.

고차 함수가 동작하는 방식

위에 예시를 든 map,filter,reduce 기준으로 고차함수가 동작하는 방식을 확인해보자.

// 화살표 함수
map,filter((element) => { /* ... */ })
map,filter((element, index) => { /* ... */ })
map,filter((element, index, array) => { /* ... */ })

// 콜백 함수
map,filter(callbackFn)
map,filter(callbackFn, thisArg)

// 인라인 콜백 함수
map,filter(function(element) { /* ... */ })
map,filter(function(element, index) { /* ... */ })
map,filter(function(element, index, array){ /* ... */ })
map,filter(function(element, index, array) { /* ... */ }, thisArg)

알아볼 3가지 메서드에서 기본적으로 콜백함수로 기본으로 한 작업을 수행하고, 작업방식에 따라, 화살표(람다식),콜백,인라인 콜백으로 작성할 수 있다.

Array.prototype.map

map() 메소드는 input으로 들어온 배열 내 요소를 인자로 제공받는 콜백 함수를 호출함으로써 새로운 배열을 만듭니다.

map() 메소드는 콜백 함수에서 리턴 받은 값을 가져올 것입니다.
그리고 그 값들을 이용한 새로운 배열을 만듭니다.

인라인 콜백함수을 이용한 map() 사용

const arr1 = [1, 2, 3];

const arr2 = arr1.map(function(item) {
  return item * 2;
});

console.log(arr2);

화살표 함수(람다식)을 이용한 map() 사용

const arr1 = [1, 2, 3];
const arr2 = arr1.map(item => item * 2);
console.log(arr2);

위에선 너무 어렵게 설명이 되어 있는데, 간단하게 생각하면 콜백함수에서 특정 요구조건에 해당하는 값으로 변환해 준다. 라고 생각하면 쉽다.

map()은 배열내 요소들을 특정조건에 해당하는 값으로 변환한다. 그리고 그걸 배열로 리턴한다.라고 생각하면 된다.
위 예시 같은 경우엔 요소에 곱하기2을 한 후 리턴한다.

Array.prototype.filter

filter() 메소드는 콜백 함수에 의해 제공된 조건를 통과한 요소를 가진 새로운 배열을 만듭니다.
filter() 메소드로 넘겨진 콜백 함수는 3가지 인자를 받습니다. element, index, array를 받습니다.

화살표(람다식) 함수

const persons = [
  { name: 'Lee', age: 16 },
  { name: 'Park', age: 18 },
  { name: 'Kim', age: 27 },
  { name: 'Ann', age: 14 },
  { name: 'Jung', age: 24},
];
//persons 객체의 프로퍼티 age의 값이 18살 이상인 요소만을 가진 배열을 리턴합니다.
const fullAge = persons.filter(person => person.age >= 18);
console.log(fullAge);

마치 if문 처럼 조건이 true가 되는 요소만 받아서, 배열로 리턴합니다.

Array.prototype.reduce

reduce() 메소드는 호출하는 배열의 각각의 요소에 대해서 콜백 함수를 실행하고, 하나의 결과 값만 리턴합니다.
참고로 reduce(), reduceRight() 이느냐에 따라서 요소에 접근하는 순서가 달라진다.
reduce는 순차적으로,reduceRight()는 역순이다.
reduce는 이름 그대로 감소시킨다로, 배열 요소을 단일 값으로 줄인다는 소리다.
reduce 메소드는 파라미터로 리듀서(콜백)함수, 초기값(Optional)을 가질 수 있다.

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

// 배열내 요소을 전부 합하는 reduce(콜백함수)
const sum = arr.reduce(function(a, b) {
  return a + b;
});

// output 15
console.log(sum);
console.log(sum/arr.length);

간단하게 배열 요소의 합을 구하는 콜백이다. 평균도 간단하게 구할 수 있다.

Optional로 주어지는 초기값 파라미터가 같은 경우에 사용자가 지정하는 경우, 배열의 첫번째 인자값이 된다.

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

// 배열내 요소을 전부 합하는 reduce(콜백함수)
const sum = arr.reduce(function(a, b) {
  return a + b;
},10);

// output 25
console.log(sum);
console.log(sum/arr.length);

첫번째 인자로 10이 주어지고, 순차적으로 더해 단일 값으로 만들면서 25라는 값이 나왔다.

3가지 이외에도 다양한 인스턴스 메서드들이 있다.