고차함수

고차함수(High order Function)란 함수를 함수의 인자로 전달받거나
return 값으로 함수를 return 하는 함수를 말한다.

• 고차함수는 외부상태의 변경, 데이터의 변경을 피하고 불변성(
  immutability)을 지향하는 함수형 프로그래밍에 기반을 둔다.
• 함수형 프로그래밍은 순수함수들을 서로 묶어서 연결한다.
• 순수함수: 외부상태 변경x, 변수 사용 x, 조건문 x, 반복문 x 함수

배열에서 이러한 고차함수를 이용하여 복잡한 코드를 단순화 할 수 있다.

고차함수 종류

고차함수에 들어오는 인자중 this는 콜백함수를 실행할때 this로 사용할 값이다.

forEach(콜백함수,this?)

• 배열의 각 요소에 대해 콜백함수 실행
• return값 undefined
• 주어진 함수를 배열 요소 각각이 실행 할 수 있게 한다.
• 콜백함수의 매개변수를 통해 요소 값, 인덱스, forEach를 호출한 배열을 전달받는다.

    let arr = ["a","b","c"];
    arr.forEach( (item,_,array) => {
    console.log(`${item} is in ${array}`);
    });

	/*a is in a,b,c
      b is in a,b,c
      c is in a,b,c
      */

callback함수에서 중간 매개변수를 쓰지 않으면 _ 를쓰면된다.

find(콜백함수,this?)

• 제일 먼저 조건에 맞는(콜백함수) 요소를 찾을때 사용한다.
• 원하는 요소를 찾지 못하면 undefined 반환
• 객체로 이루어진 배열이 있을 때 객체를 배열 내에서 찾을 때 주로 사용한다.
• 콜백함수의 매개변수를 통해 배열요소 값, 인덱스, find를 호출한 배열을 전달받는다.

let users = [  // 배열속에 객체가 있을 때
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];
//   
let users = users.find(item => item.id==1);  
console.log(users); //{id: 1, name: "John"} 반환

findIndex(콜백함수, this?)

• 제일 먼저 조건에 맞는 요소의 인덱스를 반환
• 조건에 맞는 요소가 없다면 -1 반환
• 콜백함수의 매개변수를 통해 배열요소 값, 인덱스, findIndex를 호출한 배열을 전달받는다.

let users = [  // 배열속에 객체가 있을 때
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];

let users = users.findIndex(item => item.id==2);  
console.log(users); //1

some(콜백함수,this?)

• 배열내 일부 요소가 콜백함수 테스트를 통과하는지 확인해 결과값을 boolean으로 반환
• 콜백함수의 매개변수를 통해 배열요소 값, 인덱스, some을 호출한 배열을 전달받는다.

let res= [2,5,10,1,4].some(item => item>5); 
console.log(res); // true

every(콜백함수,this?)

• 배열내 모든 요소가 콜백함수 테스트를 통과하는지 확인해 결과값을 boolean으로 반환
• 콜백함수의 매개변수를 통해 배열요소 값, 인덱스, every를 호출한 배열을 전달받는다.

let res= [2,5,10,1,4].evert(item => item>5); 
console.log(res); // false

filter(콜백함수, this?)

• 조건에 맞는 모든 아이템들을 새로운 배열로 반환
• if문을 대체가능한 함수
• 콜백함수의 매개변수를 통해 배열요소 값, 인덱스,filter를 호출한 배열을 전달받는다

const arr= [1,2,3,4,5];
const result = arr.filter(item => item %2); // return이 true(1)만 필터링
console.log(result); // [1,3,5]

map(콜백함수 , this?)

• 아이템들을 각각 다른 아이템으로 매핑할 수 있는 함수
• 콜백함수의 반환값으로 새로운 배열 반환
• 콜백함수의 매개변수를 통해 배열요소 값, 인덱스, map을 호출한 배열을 전달받는다.

function Prefixer(prefix) {
    this.prefix = prefix;
  }
  
  Prefixer.prototype.prefixArray = function (arr) {
    return arr.map(x =>this.prefix+x, this);
        // this는 pre객체
  };
  
  const pre = new Prefixer('-webkit-');
  const preArr = pre.prefixArray(['linear-gradient', 'border-radius']);
  console.log(preArr);
  // [ '-webkit-linear-gradient', '-webkit-border-radius' ]

콜백함수에서 this를 써야 할 때 map의 두번째 인자에 this를 추가하지 않으면 this는 브라우저 전역 객체(window)를 가리킨다.

flatMap(콜백함수,?this)

• 중첩된 배열을 쫘악 펴서 새로운 배열로 반환한다.

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

const result = nums.flatMap((item) => [1, 2]);
console.log(result);
/*[
  1, 2, 1, 2, 1,
  2, 1, 2, 1, 2
]
*/

sort(비교함수)

• 배열의 아이템들을 정렬하는 함수
• 문자열 형태의 오름차순으로 요소를 정렬하고, 기존의 배열을 변경한다.
• 기본 정렬 순서는 문자열 Unicode 코드 포인트 순서에 따른다.
• 배열의 요소가 숫자라도 일시적으로 문자열로 변환후 정렬한다.
  따라서 배열의 요소가 숫자일 때 비교함수를 설정해 정확하게 정렬해야 한다.

arr.sort([compareFunction]);

• 정렬 순서를 정의하는 함수
• compareFunction이 제공되면 배열 요소는 compare 함수의 반환 값에 따라 정렬된다.
• compareFunction(a, b)이 0보다 작은 경우 a를 b보다 낮은 인덱스로 정렬(오름차순 정렬)
• compareFunction(a, b)이 0을 반환하면 a와 b를 서로에 대해 변경하지 않고 모든 다른 요소에 대해 정렬
• compareFunction(a, b)이 0보다 큰 경우, b를 a보다 낮은 인덱스로 정렬(내림차순 정렬)

const b= [1,2,100,10,3];
b.sort(); 
console.log(b); // [1,10,100,2,3]  (정렬이 제대로 되지 않음)

b.sort( (a,b)=> a-b); // 비교함수 설정
// a-b<0 오름차순 
// a-b>0 내림차순
console.log(b);  // 1, 2, 3, 10, 100 ]

reduce(콜백함수, 초기값)

• 배열을 순회하며 각 요소에 대해서 이전의 콜백함수 실행 반환값을 전달하여 콜백함수 실행하고 그 결과를 반환한다.
• 콜백함수의 매개변수로는 이전 콜백의 반환값, 배열 요소의 값 ,인덱스,reduce 메소드를 호출한 배열이 있다.
• 초기값은 콜백함수의 이전 콜백의 반환값의 초기값으로 들어간다.

const result = [1, 2, 3, 4, 5].reduce((sum, value) => (sum += value), 0);
console.log(result); // 10