고차함수

Taehye.on·2023년 3월 14일
0

코드스테이츠 44기

목록 보기
26/89
post-thumbnail

D-21

section 2가 시작되었다. 코플릿 문제도 많고 알아야 할 개념들도 너무 많아 쉴 틈이 없었다.
고차함수의 정의, 고차함수의 다양한 메서드 등
알아야 할 개념들을 먼저 정리해보자.


🔍 일급객체란?

JavaScript에서 함수는 일급객체다.
일급 객체는 변수에 할당이 가능하고 다른 함수의 결과로 리턴이 가능하다.
그리고 다른 함수의 전달인자로 전달이 가능한데
이 때 함수에 인자로 전달되는 함수를 콜백 함수라 한다.

🔍 고차함수란?

고차함수는 함수를 전달인자로 받거나 (콜백 함수)
함수를 리턴하는 함수이다. (커링 함수)


🔍 메서드

메서드란 객체에 들어있는 함수를 말하는데 대표적인 배열 내장 메서드 4가지를 알아보자.

📌 map

map은 배열의 각 요소에 콜백 함수를 적용시킨 요소를 가진 새로운 배열을 리턴하는 메서드이다.

문제 : 수를 요소로 갖는 배열을 입력받아 각 요소를 2배 곱한 새로운 배열을 리턴

function getDoubledElements(arr) { //arr: number 타입을 요소로 갖는 배열
  return arr.map(function (el) {
    return el * 2; 
  });
}

let output = getDoubledElements([1, 2, 3, 4]);
console.log(output); // --> [2, 4, 6, 8]

📌 filter

filter는 배열의 각 요소에 콜백 함수를 적용시켰을 때,
true를 리턴하는 요소들만 모은 새로운 배열을 리턴하는 메서드이다.

문제 : 배열과 임의의 값(discarder)을 입력받아 
기존 배열에서 discarder와 일치하는 요소가 제거된 새로운 배열을 리턴

function removeElement(arr, discarder) { //arr: 임의의 요소를 갖는 배열,discarder: 원시 자료형
  return arr.filter(function (el) { 
    if (el !== discarder) { 
      return true; 
    } else { 
      return false; 
    }
  });
}

let output = removeElement([1, 2, 3, 2, 1], 2);
console.log(output); // --> [1, 3, 1]

📌 reduce

reduce는 배열의 각 요소를 콜백 함수에 맞게 하나로 응축시킨 값을 리턴하는 메서드이다.

문제 : 문자열을 요소로 갖는 배열을 입력받아 배열에서 가장 긴 문자열을 리턴

function getLongestElement(arr) { //string 타입을 요소로 갖는 배열
  return arr.reduce(function (a, b) {
    if (a.length >= b.length) {
      return a;
    } else {
      return b;
    }
  }, ''); // 초기값을 빈 문자열로 설정
}

let output = getLongestElement(['one', 'two', 'three']);
console.log(output); // --> 'three'

📌 forEach

forEach는 배열에 활용이 가능한 메서드로 파라미터로 주어진 함수를 배열 요소 각각에 대해 실행하는 메서드다.

map과 비슷하지만 차이점은 따로 return하는 값이 없다.

var array=[1,2,3]
array.forEach(x=>{
    console.log(x); // --> 1, 2, 3
}

🤷‍♂️ 고차함수를 써야하는 이유

추상화를 통한 효율성 증대를 위해 고차함수를 사용해야 한다.
추상화란 복잡한 어떤 것을 압축해서 핵심만 추출한 상태로 만드는 것으로
단순한 값을 전달받아 처리하는 수준인 값 수준의 추상화,
함수를 전달받아 처리하는 수준인 사고의 추상화로 부른다.
정리하면 고차함수를 통해 더 높은 수준에서 생각할 수 있으며,
이는 생산성도 비약적으로 상승할 수 있다.

0개의 댓글