자바스크립트 배열 메서드 sort(),reduce(),map(),filter() 등등

고차함수 : 함수를 파라미터(인자)로 전달 받거나 연산의 결과로 반환해주는 메서드를 일컫는다 함수형 프로그래밍의 핵심이기도 하며, 자바스크립트를 함수형 프로그래밍에 알맞은 언어로 만들어주는 특성

 

함수형 프로그래밍이란? 함수형 프로그래밍은 함수를 다른 함수의 파라미터로 넘길 수도 있고 반환 값으로 함수를 받을 수도 있는 프로그래밍 형태

 

forEach() 

for문을 대체하는 고차 함수

반복문을 추상화하여 구현된 메서드이고 내부에서 주어진 배열을 순회하면서 연산을 수행

array.forEach((item,index,thisArr) => {
    /* 
        item : 배열요소값
        index : 배열 인덱스
        thisArr :  참조한 배열
        리턴값 : 없음
    */
})

const numberArr = [1,2,3,4,5];
let total = 0;

numberArr.forEach((item) => {
    total += item;
});

console.log(total)

 

map()

forEach 같이 순회하면서, 콜백함수에서의 실행결과를 리턴한 값으로 이루어진 배열을 만들어 반환

arr.map((currentValue, index, array) => {
},thisArg)
/* 
    currentValue : 현재 배열요소값
    index : 배열 인덱스
    array : 참조한 배열
    thisArg : 콜백함수에서 this로 사용할 값
    리턴값 : 반환타입은 찾은 요소의 타입 / 없다면 indefined
 */

forEach와 map의 차이

배열을 순회하는 것은 동일하지만, forEach는 각 요소를 참조한 연산이 이루어지고, map 경우에는 각 요소를 다른 값으로 맵핑한 새로운 배열이 반환되는 점에 차이가 있다.정리하면 forEach는 for문을 대체하여 사용하고 map은 연산의 결과로 새로운 배열을 생성하고자 할때 사용

 

find()

indexOf가 찾고자 하는 값을 인덱스로 주는 것

include()가 찾고자 하는값을 Bool로 주는 것,

find()는 찾고자 하는 값을 그대로 반환한다.

주어진 배열을 순회하면서 콜백 함수 실행의 반환값이 true에 해당하는 첫번째 요소를 반환

arr.find((element,index,arr) => {
},thisArg);
/* 
    element : 현재 배열요소 값
    index : 배열 인덱스
    array : 참조한 파일
    thisArg : 콜백함수에서 this로 사용할 값
    리턴값 : 반환 타입은 찾은 요소의 타입
*/

const numberArr = [1, 3, 3, 5, 7];
const objectArr = [
    { name: 'Harry', age: 20 },
    { name: 'Kim', age: 30 },
    { name: 'Steve', age: 40 }
];
 
console.log(objectArr.find(item => {
   return item.age === 20 // 해당조건에 부합하면 item값 반환
}); // {name: "Harry", age: 20}

// find는 하나만 찾음. 뒤에서 배울 filter은 여러개를 배열로
console.log(numberArr.find(item => item === 3));  // 3
console.log(numberArr.filter(item => item === 3));  // [3, 3]

.filter()

주어진 배열을 순회하면서 콜백 함수의 반환값이 true에 해당하는 요소로만 구성된 새로운 배열을 생성하여 반환

find()의 찾아서 값을 반환하는 기능과 map()의 배열 생성 기능의 융합버전.

.reduce()

배열의 요소를 순차적으로 순회하면서 숫자든 배열이든 객체든 하나의 값으로 줄여 return하는 함수다. 즉 배열을 기반으로 하나의 값을 도출할 때 사용된다.

콜백 함수의 실행된 반환값을 전달 받아 연산의 결과값이 반환

첫번째 인자서부터 시작해서 두번째 인자를 순회하며 accumulator += currentvalue를 실행

사실상 forEach, map, filter 기능을 reduce로 모두 구현해서 쓸순 있어 고차함수의 부모라고 불림

4개의 인자를 가진다 

1. 누산기 (acc)

2. 현재 값(cur)

3. 현재 인덱스 (idx)

4. 원본 배열(src)

reduce() 함수의 반환 값은 누산기에 할당되고, 누산기는 순회중 유지되므로 최종 결과는 하나의 값이 된다.

 

.sort() 

배열 정렬

단, 복사본이 만들어지는게 아니라 원 배열이 정렬됨.

콜백 함수를 통해 배열의 원소들을 어느 기준으로 정렬할지 지정해야함

 

const arr = [2, 1, 3, 10];

arr.sort(function(a, b)  {
  return a - b;
});  // [1, 2, 3, 10] 오름차순

arr.sort(function(a, b)  {
  return b - a;
}); // [10, 3, 2, 1] 내립차순

무

const arr = ['banana', 'b', 'boy'];
arr.sort();
arr.sort(function(a,b){
    if(a<b) return 1;
    if(a>b) return -1;
    if(a === b) return 0;
})