[Javascript] .map() .filter() .reduce()

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

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

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

 

map()구문 

arr.map(callback(currentValue[, index[, array]])[, thisArg])

Array.prototype.map ( callbackfn [ , thisArg ] )

map은 간결하지만 for문을 사용하면 "순환"이라는 부분까지 직접 처리해야 하기 때문에 작성해야 하는 코드가 길고 간결하지 않습니다.

map을 사용하는 방법은 callbackfn을 통해 주어진 3개의 인자(요소 값, index, 순회하는 대상 객체)를 사용해 새로운 값을 만드는 함수를 등록하는 것입니다.

map은 고차 함수를 사용해 미리 정해둔 식이나 정의되어 있는 식을 이용할 수 있어 편리합니다.
특정요소만을 재정의 하거나 문자를 배열로도 바꿀 수 있습니다.

 

순회하는 용도로만도 사용하는 map()

function returnInt(element) {
  return parseInt(element, 10);
}

['1', '2', '3'].map(returnInt); // [1, 2, 3]
// 실제 결과가 예상한 대로 배열의 숫자와 같습니다.

// 위와 같지만 더 간단한 화살표 표현식
['1', '2', '3'].map(str => parseInt(str));

// 더 간단하게 해결할 수 있는 방법
['1', '2', '3'].map(Number); // [1, 2, 3]
// 그러나 `parseInt`와 달리 float이나 지수표현도 반환합니다.
['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]

 

 

 

---

 

filter() 구문 

arr.filter(callback(element[, index[, array]])[, thisArg])

let Array = arr.filter(callback Function(element, index, array), thisArg)

element : 요소값(현재 순회하는 배열의 인자값)

index : 요소의 인덱스(해당 인자값의 인덱스)

array : 사용되는 배열 객체 (현재 배열)

 

filter()는 배열 내 각 요소에 대해 한 번 제공된 callback 함수를 호출해, 

callback이 true로 강제하는 값을 반환하는 모든 값이 있는 새로운 배열(Array)을 생성합니다. 

callback은 할당된 값이 있는 배열의 인덱스에 대해서만 호출됩니다;

삭제됐거나 값이 할당된 적이 없는 인덱스에 대해서는 호출되지 않습니다.

 callback 테스트를 통과하지 못한 배열 요소는 그냥 건너뛰며 새로운 배열에 포함되지 않습니다.

주로 특정 조건을 만족하는 새로운 배열을 필요로 할 때 사용하는 편입니다.
for문을 사용해서도 이와 같은 작업을 할 수는 있지만 권장하지는 않습니다.

Boolean 값인 true 또는 false 값을 반환, 없으면 빈 배열

filter는 조합성도 좋아 map, reduce와 같은 다른 함수와 함께 자주 쓰입니다.
filter 함수는 객체를 직접 변형시키지 않지만 callbackfn을 통해 수정할 수 있으며 이는 문제를 발생시키는 원인이 됩니다.

순회하는 도중에 추가된 요소는 접근하지 않습니다.  반대로 순회하는 도중 수정이 일어나면 변경된 값이 callbackfn에 전달되고 삭제된 요소는 접근하지 않습니다.

filter는 고차 함수를 사용해서 미리 정의한 식이나 정의되어 있는 식을 사용할 수 있습니다.

 

 

---

reduce()

arr.reduce(callback[, initialValue])

callback배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 받습니다.

accumulator누산기는 콜백의 반환값을 누적합니다.

콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값입니다.

currentValue처리할 현재 요소.

currentIndex Optional처리할 현재 요소의 인덱스. 

initialValue를 제공한 경우 0, 아니면 1부터 시작합니다

.array Optionalreduce()를 호출한 배열

.initialValue Optionalcallback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용합니다. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생합니다.

 

 

인자값은 callback [, initivalValue]
callback은 previouseValue, currentValue, currentIndex, array
[, initivalValue]는 옵션
reduce()는 위의 map, find, filter 대체 가능

 

줄이다

 덧셈이나 곱셈 같은 합산 식을 이용할 때 사용됩니다

reduce의 사용 방법은 callbackfn을 통해 주어진 4개의 인자(초기 값, 요소 값, index, 순회하는 대상 객체)를 사용해 결과를 반환하는 함수를 등록하는 것입니다.

filter는 고차 함수를 사용해서 미리 정의한 식이나 정의되어 있는 식을 사용할 수 있습니다

리듀서 함수의 반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 됩니다

 

 

 

출처 링크 

 https://7942yongdae.tistory.com/49 

https://velog.io/@decody/map-%EC%A0%95%EB%A6%AC

https://brunch.co.kr/@swimjiy/15