내장 고차함수 이해

js에 기본적으로 내장 되어있는 고차함수들이 있다.

바로배열 메소드들 중 일부가 고차함수에 해당한다.

filter

filter메소드는 배열의 요소 중 특정 조건을 만족하는 요소들만 걸러내는 (filter) 메소드 이다.

예를들어, 수(number)를 요소로 갖는 배열중 짝수만 걸러내거나, 18보다 작은수를 걸래내는식, 문자열을 요소로 갖는배열중 길이가10이하인 문자열만 걸러내거나 'korea'만 걸러낼수도 있다.

// 아래 코드에서 '짝수'와 '길이 5 이하'는 문법 오류(syntax error)에 해당합니다.
// 의미만 이해하도록 합니다.
let arr = [1, 2, 3, 4];
let output = arr.filter(짝수);
console.log(output); // ->> [2, 4]

arr = ['hello', 'code', 'states', 'happy', 'hacking'];
output = arr.filter(길이 5 이하)
console.log(output); // ->> ['hello', 'code', 'happy']

// 함수 표현식
const isEven = function (num) {
  return num % 2 === 0;
};

let arr = [1, 2, 3, 4];
// let output = arr.filter(짝수);
// '짝수'를 판별하는 함수가 조건으로서 filter 메소드의 인자로 전달됩니다.
let output = arr.filter(isEven);
console.log(output); // ->> [2, 4]

const isLteFive = function (str) {
  // Lte = less then equal
  return str.length <= 5;
};

arr = ['hello', 'code', 'states', 'happy', 'hacking'];
// output = arr.filter(길이 5 이하)
// '길이 5 이하'를 판별하는 함수가 조건으로서 filter 메소드의 인자로 전달됩니다.
let output = arr.filter(isLteFive);
console.log(output); // ->> ['hello', 'code', 'happy']

// 보다 정확한 정의
// Immersive 과정에서 프로토 타입과 this를 학습하신 후에
// 아래 코드를 이해하시기 바랍니다.
// Array.prototype.filter = function(func) {
//   const arr = this;
//   const newArr = []
//   for(let i = 0; i < arr.length; i++) {
//     if (func(arr[i]) === true) {
//       newArr.push(this[i])
//     }
//   }
//   return newArr;
// }

map?

모든 요소에게 동일한 행동을준 값에 대하여 모두 반환한다.

예를들어 [1,2,3] 을 곱하기2 를 해줘서 return [2,4,6]

기존배열을 수정하지않는다 (immutable)

콜백함수가(행동) 들어간다.

filter?

모든 요소중 내가원하는 값만 필터링하여 반환한다.

예를들어 [1,2,3] 을 홀수인가? 를 해줘서 return [1,3]

기존배열을 수정하지않는다 (immutable)

콜백함수가(boolean) 들어간다.

reduce?

• 배열의 각 요소를
• 특정 응축 방법(함수)에 따라
• 원하는 하나의 형태로
• 응축한다(reduction)

알아두면 좋은 메소드 (고차함수)

• forEach, find, filter, map, reduce, sort, some, every

왜 고차함수를 사용하지?

추상화?

추상화의 다른말 -> 요약

복잡한 어떤 것을 압축해서 핵심만 추출한 상태로 만드는것이 추상화 이다.

함수 = 값을 전달 받아 값을 리턴한다 = 값에 대한 복잡한 로직은 감추어져 있다 = 값 수준에서의 추상화

고차함수는 이 추상화의 수준을 사고의 추상화 수준으로 끌어올린다.

값 수준의 추상화: 단순히 값(value)을 전달 받아 처리하는수준
사고의 추상화 : 함수(사고의 묶음)를 전달 받아 처리하는 수준

즉 고차 함수를 통해 보다높은 수준에서 생각할 수 있다.

생각해보면 좋은 추가 내용들

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