Javascript의 forEach 대 map 메소드

이 자습서에서는 일반적으로 사용되는 두 가지 유사해 보이는 배열 방법을 살펴보고 서로 다른지 비교합니다. 먼저 메서드가 무엇인지 빠르게 이해하고 구문, 기능을 살펴보고 forEach 및 map 메서드를 비교합니다. 이러한 메서드는 배열을 반복하는 데 도움이 됩니다. JavaScript에서 메서드는 개체에 대해 수행할 수 있는 작업입니다.

목차

Syntax & Explanation

Example Code

Ability to chain other methods

구문 및 설명

1) forEach 메소드

forEach() 메서드는 배열의 각 요소에 대해 제공된 함수를 한 번씩 실행합니다. 모든 배열 요소에 대해 함수를 실행한 후 제공된 함수의 결과에 따라 기존 배열 요소의 값을 변경하는 메서드입니다. 따라서 forEach()는 mutator 메서드입니다. 또한 forEach 메서드는 아무 것도 반환하지 않습니다(정의되지 않음).

2) 지도 방식

map() 메서드는 forEach() 메서드와 유사하게 배열의 각 요소에 대해 제공된 함수를 한 번씩 실행합니다. 그러나 forEach() 메서드와 달리 모든 배열 요소에 대해 함수를 호출한 결과로 새 배열을 만듭니다. 따라서 map() 메서드는 불변성에 의존합니다. 또한 map()은 값이 없는 배열 요소에 대한 함수를 실행/호출하지 않습니다.

통사론:

array.forEach(testfunc(currentValue, index, arr), thisValue)

array.map(testfunc(currentValue, index, arr), thisValue)

두 메서드 모두 두 가지 인수를 사용합니다.

1) 테스트 기능

testFunc()는 배열의 각 요소에 대해 조건을 만족하는 요소가 발견되었음을 나타내는 true를 반환할 때까지 배열의 각 요소에 대해 조건을 실행하는 데 사용되는 함수입니다.

testFn()은 세 가지 인수를 취합니다.

currentValue: 처리 중인 배열의 현재 요소를 나타냅니다.

index: 현재 처리 중인 요소의 인덱스를 나타냅니다.

arr: 메서드가 호출된 배열입니다.

2) 이 값

함수에 전달되고 "this"값으로 사용되는 선택적 인수입니다. 비어 있으면 "undefined"값이 "this"값으로 전달됩니다. JavaScript에서 "this"키워드는 그것이 속한 객체를 나타냅니다.

이 메서드는 배열의 모든 요소에 대해 testFunc()를 실행하고 true인 경우 testFunc()에서 반환됩니다.

예제 코드

const exampleArray = [1, 2, 3, 4, 5]
console.log(exampleArray.forEach(x => x * x * x));
//Output: (undefined)
console.log(exampleArray.map(x => x * x * x));
//Output: [1 , 8, 27, 64, 125 ]

다른 방법을 연결하는 기능

메소드 연결은 하나의 연속적인 코드 라인에서 하나의 메소드를 수행한 후 다른 메소드를 연결할 수 있는 기능입니다. 즉, 객체에서 한 메서드를 차례로 호출하는 것을 반복적으로 호출합니다.

forEach()와 map() 메서드의 주요 차이점 중 하나는 다른 메서드를 연결하는 기능입니다. map()은 연결 가능하지만 forEach는 그렇지 않습니다. 이것은 map() 다음에 reduce(), sort() 및 기타 메소드를 사용할 수 있지만 정의되지 않은 값을 반환하기 때문에 foreach()에서는 불가능하다는 것을 의미합니다.

const exampleArray = [5, 4, 3, 2, 1]
console.log(exampleArray.forEach(x => x * x * x).sort(function(a, b){return a-b}););
//Output: Uncaught TypeError: Cannot read property 'reduce' of undefined
console.log(exampleArray.map(x => x * x * x).sort(function(a, b){return a-b}););
//Output: [1 , 8, 27, 64, 125 ]