💯 고차 함수

❗ 본격적으로 내장된 고차함수에 대해 알아보자

이 부분을 정리하고자 마음먹은 이유는 내장된 고차함수중 Map과 filter의 작동방식이라던가
사용하는때를 아직 명확히 구분하지 못하여 작성하고자한다.

1 . map

❗ MDN에 정의된 내용은 다음과 같다.

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.
-출처 MDN WEB Docs

사용구문
arr.map(callback(currentValue[, index[, array]])[, thisArg])

기본적인 사용법

let arr = [1, 2, 3, 4];

let maps = array1.map((x) => (x * 2));

console.log(maps); // expected output: Array [1, 4, 6, 8]

map의 경우, 기존의 배열을 이용하여 새로운배열을 출력한다. 콜백함수을 인자로 받아, 각각의 인자에 대한 실행값을 새로운배열에 넣어 출력한다.

❗만약 새로 출력되는 새로운배열을 변수에 저장하지 않으면 해당 데이터는 사라진다. 위 예시와 같이 'maps'같은 변수에 선언을 해야한다.

2. filter

❗ MDN에 정의된 내용은 다음과 같다.

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

• 출처 MDN WEB Docs

사용구문
arr.filter(callback(element[, index[, array]])[, thisArg])

기본적인 사용법

let arr = [1, 4, 5, 6, 8, 9, 10, 12]
let result = arr.filter((obj) => (obj%2 === 0))
console.log(result) // except [ 4, 6, 8, 10, 12]

각 요소에 대해 한 번 제공된 callback 함수를 호출, true일경우 요소를 유지, false일경우 요소를 버린다.

즉 callback함수가 true인 값만 놔두고 나머지는 다 없애버린다는 뜻이다.

그렇기에 함수를 통과한 값이 없는경우 빈 배열을 출력한다. 또한 기존의 배열을 변경하지않는 불변성을 가진다.

❗❗ map과 filter의 차이점

간단하게 요약하자면 (각 요소를 조건에 넣어 변형시킨다, 각 요소를 조건에 맞추어 true, false를 구별한다).

map의경우 callback의함수에 각 요소를 집어넣어 그 함수에 맞게 요소를 변형시킨다
filter의 경우 callback함수에 각 요소를 집어넣고 true면 출력, false면 버린다.

한 배열을 어떤조건에 맞게 배열을 재구성하려면 filter을 쓰고 ( 기본배열은 변경하지않는다.)
한 배열을 어떤조건을 통과시켜 해당값으로 변형시키려면 map을 쓰면될거같다.

3. reduce

❗❗❗❗❗대망의 reduce되시겠다!!

❗ MDN에 정의된 내용은 다음과 같다.

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.

• 출처 MDN WEB Docs

사용구문
arr.reduce(callback[accumulator, currentValue, currnetindex, array])

기본적인 사용법

let arr = [1, 2, 3, 4]
let result = arr.reduce((acc, cur) => (acc+cur))
console.log(result) // except 10

let result2 = arr.reduce((acc,cur) => (acc+cur), 10)
console.log(result2) // except 20

고차함수중에 가장 유용하게 쓰이는 함수가 아닐까 생각해본다.

기본적인 구조는 accumulator = 누적값, currnetValue = 현재값, currentindex = 현재 인덱스값, array = 현재 배열

하지만 간단하게 사용하는데 있어 예시처럼 acc와 curvalue만 사용하면 쉽게 사용이 가능하다.

result2처럼 초기값을 설정하고 안하고 차이가 존재한다. 초기값을 설정하지않으면 acc값은 배열의 초기값인 '1'이 들어간다
💯 즉. 주어진 배열의 [0]값이 acc값으로 주어진다는뜻이다.

❗❕ 필자는 정말 초등학생수준의 코더이기에 보다 심화적인내용은 다루지못한다. 그렇기에 오류가 있거나 지적사항이 있거나 좀더 보완할내용이 있다면 댓글로 알려주시길 바랍니다. 자라나는 새싹에게 햇빛을 :)