[TIL 17] 고차함수_1

yezo cha·2021년 6월 3일
0

JavaScript

목록 보기
10/19


< 주말 추가 공부 >

  • pipe 함수
  • forEach, find, sort, some, every
  • MapReduce 학습하기 (MapReduce Model)
  • 자바스크립트에서 커링(currying)과 클로저(closure)의 차이 이해하기 (js closure vs curry)
  • 선언형 프로그래밍(declarative programming)과 절차형 프로그래밍(imperative programming)의 차이를 배열 메소드를 통해 이해하기 (js imperative vs declarative)
  • 함수의 조합(function composition)에 대해 학습하기 (javascript function composition)

자바스크립트를 함수형 프로그래밍에 알맞은 언어로 만들어 주는 특성이 바로 자바스크립트가 고차 함수 개념을 받아들인다는 것이다.
고차 함수의 개념을 이해하기 위해서는 함수형 프로그래밍(Functional Programing)이 무엇인지, 퍼스트 클래스 함수(First-Class Functions)의 개념을 이해하는 것이 먼저다.

함수형 프로그래밍은 무엇일까?

함수형 프로그래밍은 함수를 다른 함수의 파라미터로 넘길 수도 있고, 리턴값으로 함수를 받을 수도 있는 프로그래밍 형태를 말한다.
자바스크립트는 함수형 프로그래밍을 구현한 언어이다.

퍼스트클래스 함수(First-Class Function)

자바스크립트는 함수를 일급 시민으로 대해준다.
자바스크립트 또는 다른 함수형 프로그래밍 언어 함수들은 전부 객체(Object)이기 때문이다.
자바스크립트에서 함수는, 객체의 특별한 타입이다.
함수를 파라미터로 다른 함수에 넘길 수도 있고, 다른 변수에 할당하거나 리턴할 수도 있다. 별걸 다 할 수 있다...
이러한 특성 때문에 자바스크립트에 존재하는 함수들이 퍼스트 클래스 함수라고 불린다.

고차 함수(Higher-Order Function)

함수를 인자(argument)로 받을 수 있고, 함수의 형태로 리턴할 수 있는 함수
간단히 말하자면, 함수를 인자로 받거나 함수를 출력(output)으로 리턴하는 함수를 말한다.

내장 고차 함수

filter

arr.filter(callback func)

function filterOddLengthWords(words) {
  const result = words.filter(word => word.length % 2);
  return result;
}

filter()는 주어진 함수의 특정 조건을 만족하는 모든 요소를 모아서 새로운 배열로 반환하는 메서드.
다시 말하자면, 배열에서 지정한 조건을 통과한 일부 element만 원할 때 사용 !
예를 들면, 배열에서 홀수만 걸러내거나, 특정 문자열이 포함 되는 요소들만 걸러내고 싶을 때 등등 사용 가능하다.
특정 조건은 filter 메서드의 인자로 전달되어야 하고, 함수 형태여야 한다.

map

arr.map(callback func)

// 문자열을 요소로 갖는 배열을 입력받아 각 요소의 길이를 요소로 갖는 새로운 배열을 리턴해보자.
function getLengthOfElements(arr) {
  return arr.map((el) => el.length)
}

map()은 배열 내의 모든 요소 각각에 동일한 함수를 적용한 값들을 모아 새로운 배열을 반환하는 메서드.
filter와 마찬가지로 기존 배열을 수정하지 않고 새로운 배열로 반환한다 !

reduce

arr.reduce(callback func, initialValue)

// 객체를 요소로 갖는 배열과 문자열을 입력받아 
// 각 요소의 'animal' 속성값이 문자열과 일치할 경우, 
// 해당 요소의 'score' 속성값을 모두 더한 값을 리턴해보자.
function calculateScore(records, value) {
  return records.reduce(function (acc, cur) {
    if(cur.animal === value) {
      return acc + cur.score;
    } else {
      return acc;
    }
  },0);
  
}

reduce()배열의 각 요소에 대해 reducer 함수(callback 함수)를 실행하고, 하나의 결과값을 return하는 메서드.
다시 말하자면, 여러 개의 데이터들이 속한 배열을 하나의 데이터로 응축(reduce)하는 것이다.
참고한 MDN

  • reducer함수는 4개의 인자를 갖게 된다. (필수는 아님)
    1. accumulator : acc - 콜백의 반환값을 누적한다.
    2. currentValue : cur - 현재 값. 처리할 현재 요소.
    3. currentIndex : idx - 현재 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작.
    4. array : src - 원본 배열. reduce()를 호출한 배열.

reducer함수에서 최종적으로 반환되는 값은 accumulator에 계속해서 누적된 하나의 값이라고 생각하면 된다.

profile
(ง •̀_•́)ง

0개의 댓글