JavaScript [고차함수, 추상화] +5/31 추가

5/24 section 2의 첫 날
조금 더 넓게 생각하고 나눠서 생각하자

✅ 고차 함수

✔️ 일급 객체(first-class citizen)의 특징

: 특별한 대우를 받는다

1. 변수에 할당할 수 있다
2. 다른 함수에 전달인자로 전달될 수 있다
3. 다른 함수의 결과로서 리턴될 수 있다.
   -> ❗️자바스크립트에서 함수는 일급객체다

✔️ 고차 함수(higher-order function)란?

: 함수가 일급객체이기 때문에 고차함수로 활용할 수 있다.
변수에 할당하지 않고 바로 사용할 수 있다.

1. 다른 함수를 전달인자로 받거나
2. 다른 함수의 결과로서 리턴되는 함수
   -> 둘 중 하나의 조건을 충족하면 고차함수라고 할 수 있다.

• callback function : 다른 함수의 전달인자로 들어가는 함수
  caller : 콜백함수를 전달받은 고차함수
  invoke : caller가 함수 내부에서 callback function을 호출하는 것

• 다른 함수의 결과로서 리턴되는 함수
  => 커링함수 (by. 하스켈 커리)
  => 클로져 (외부 함수의 변수에 접근할 수 있는 내부 함수일 때)

  
  

---

✅ 내장 고차 함수

자바스크립트에 기본 내장되어 있는 고차함수

배열 내장 메서드

• filter

  : 배열의 각 요소가 특정 논리(함수)에 의해 따로 분류(filter)된다.
  함수의 결과값이 true인 요소들만 분류하여 새로운 배열이 만들어진다.

arr.filter(callback(element[, index[, array]])[, thisArg])
arr.filter((element, index, array) => {return ...})


const array = [1, 2, 3, 4, 5];
const overOne = array.filter(function (el) {
  return el > 1;  //1보다 큰 요소들만 반환하게 된다.
});

console.log(overOne);
>[2, 3, 4, 5] 

• map

  : 배열의 각 요소가 특정 논리(함수)에 의해 다른 요소로 지정(map)된다.
  하나의 데이터를 다른 데이터로 mapping할 때 사용한다.
  함수가 적용된 새로운 배열이 만들어진다.

array.map(모든 요소에 적용할 함수)
arr.map(callback(currentValue[, index[, array]])[, thisArg])
arr.map(function(cur, index, array) {return ...})


//1

const array = [1, 2, 3, 4, 5];
const overOne = array.map(function (el) {
  return el > 1;  //1보다 큰지 비교하게 된다.
});

console.log(overOne);
>[false, true, true, true, true]


//2

const array = [1, 2, 3, 4, 5];
const double = array.map(function (el) {
  return el * 2;  //각 요소에 2를 곱한다.
});

console.log(double);
>[2, 4, 6, 8, 10]

• reduce

  : 배열의 각 요소를 특정 방법(함수)에 따라 원하는 하나의 형태로 응축(reduction)한다.
  여러 데이터를 하나로 응축할 때 사용한다.
  빈 요소를 제외하고 모든 요소에 callback 함수를 한 번씩 실행한다.
  초기값을 설정하지 않으면 배열의 첫 번째 요소가 초기값이 된다.
  누산기(acc)의 최종 값이 return값이 된다.

arr.reduce(callback[, initialValue])
arr.reduce((accumulator, currentValue, currentIndex, array) => {return ... }, initialValue)
arr.reduce((acc, cur) => acc + cur, 1)

---

Learn more...

그밖의 배열의 고차 함수

forEach()

: 주어진 함수를 배열의 각 요소에 실행한다

let array = new Array(1, 2, 3);

let arrayIs = array.forEach(function (ele) {
  console.log( ele + '입니다.')
});

console.log(arrayIs);
>1입니다.
>2입니다.
>3입니다.                     

find()

: 주어진 논리(함수)를 만족하는 첫 번째 요소를 반환한다.
없을 시, undefined 반환

let array = new Array(1, 2, 3);

let isIt = array.find(ele => ele > 0)
console.log(isIt);
>1

sort()

: 문자열의 유니코드 코드 포인트를 따라 적절한 순서로 배열의 요소를 정렬한다.

const winter = ['winter', 'Jan', 'Feb', 'Dec'];

months.sort();
console.log(winter);
>['Dec', 'Feb', 'Jan', 'winter'] //알파벳 순서로 정렬

some()

: 해당 조건(함수)을 만족시키는 요소가 배열에 1개 이상 존재하면 true, 없으면 false를 반환한다.

const may = ['summer', 'rose', 5, 'strawberry'];

const isMay = (element) => element === 5;
const isJune = (element) => element === 6;
may.some(isMay);
>true
may.some(isJune);
>false

every()

: 해당 조건(함수)을 배열의 모든 요소가 만족하면 true, 그렇지 않으면 false를 반환한다.

const may = ['summer', 'rose', 5, 'strawberry'];

const isMay = (element) => element === 5;
may.every(isMay);
>false