.map(), .filter() 및 .reduce()

Originally posted on my blog

지난 몇 주 동안 저는 구직 신청을 했습니다. 슬프게도 내가 일하던 스타트업은 잘 풀리지 않았다. 나는 그것이 잘 풀리지 않았다는 것이 매우 부끄럽지만 때때로 일이 진행되는 방식입니다. 암튼 여기저기 알아보고 있다며 글을 올렸는데 친구에게 모의면접을 하자고 제안을 받았습니다.

짧은 이야기, 그는 나를 절대적으로 구웠다.

솔직히 그런 인터뷰에서 기술적인 질문을 받은 적이 없었거든요. 나는 압력에 금이 갔다. 목록을 뒤집는 방법을 모르는 것이 아닙니다. 주문형으로 수행하는 방법을 기억할 수 없었습니다.

그래서 기본적인 자바스크립트 개념을 복습했습니다. 그들이 하는 일과 사용 방법을 암기하는 것이 좋을 것이기 때문입니다. 매번 확인해야 하는 대신. 어제 나는 이 코드 스니펫을 a에 게시했고 사람들에게 꽤 도움이 되는 것 같아서 여기에 좀 더 설명이 있습니다.

배열.맵()

from MDN:

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

배열이 있고 모든 요소에 대해 작업을 수행해야 합니다. 그것이 바로 맵의 목적입니다!

let numbers = [1,2,3,4,5]
numbers = numbers.map(numb=> numb+1)
console.log(numbers)
// will be [2,3,4,5,6]

처음에 저에게 큰 장애물은 numb가 완전히 만들어졌다는 것을 깨닫는 것이었습니다. 원하는대로 부를 수 있습니다. 일반적으로 array는 배열에 포함된 항목의 복수형과 각 계산에 대한 단일 항목을 호출하는 것입니다. 솔직히 말해서 forEach()를 오랫동안 사용하면서 많은 클릭을 받았습니다. 그들 사이의 차이점은 .map()가 업데이트된 배열을 반환한다는 것입니다. 따라서 위의 예에서 숫자 배열은 각 값에 1을 더한 값으로 다시 작성되었습니다. 그러나 원래 숫자 배열을 유지하려면 let numbersPlusOne = numbers.map(numb=> numb+1) 와 같이 새 배열로 선언하면 됩니다.

배열.필터()

from MDN:

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

여기서 주요 차이점은 어떤 조건을 통과하든 해당 조건을 충족하는 모든 항목의 변형된 배열을 제공한다는 것입니다.
예를 들어:

let numbers = [1,2,3,4,5]
numbers = numbers.filter(numb=> numb % 2 == 0)
console.log(numbers)
// will be [2,4]

전달하는 모든 조건은 배열의 각 항목에 대해 확인되고 새 배열에 추가되고 반환됩니다.

배열.감소()

from MDN:

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

이것은 더 많은 인수가 있기 때문에 조금 더 복잡합니다. 그러나 가장 간단한 형태로 배열을 취하고 각 요소에 대해 동일한 기능을 수행하여 단일 값을 받을 수 있습니다. 숫자 배열로 돌아가기

let numbers = [1,2,3,4,5]
numbers.reduce( (accumulator, currentValue) => accumulator + currentValue )
console.log(numbers)
// 15

수행하는 계산은 배열의 각 항목에 대해 수행되며 accumulator는 누계입니다. currentIndex(화살표 함수 앞) 뒤에 오는 array 및 currentValue의 선택적 인수도 있지만 여기에서는 다루지 않겠습니다.

도움이 되었기를 바랍니다!