forEach() 또는 지도()? 언제 사용합니까?

이 기사에서는 javascript의 forEach 및 map 메소드에 대해 설명합니다. 어느 것이 가장 좋으며 각각을 언제 사용해야합니까?

JavaScript에서 forEach 및 map는 배열 작업에 가장 널리 사용되는 두 가지 방법입니다. 주로 둘 다 배열을 반복하는 데 사용합니다. 따라서 이것은 우리가 사용해야 할 약간의 혼란을 만듭니다.

forEach 방법:

forEach는 배열을 변경하지 않고 각 요소에서 함수를 실행하는 데 사용됩니다. 참고로 forEach 메서드는 아무 것도 반환하지 않습니다. forEach 메서드의 반환 값을 가져오려고 하면 undefined가 표시됩니다. 소스 배열 자체를 수정할 수 있으므로 뮤테이터 메서드입니다.

코드 예:

// given array
let arr = [1, 2, 3, 4, 5];

//output the square of each number
let returnVal= arr.forEach(num => 
  console.log(`${num} x ${num} = ${num * num}`)
);

//the array hasn't changed
console.log(arr); 
console.log(returnVal);

// Output
// 1 x 1 = 1
// 2 x 2 = 4
// 3 x 3 = 9
// 4 x 4 = 16
// 5 x 5 = 25
// [1,2,3,4,5]
// undefined

forEach는 새 배열을 반환하지 않습니다. 이 메서드의 반환 값은 무시되며 원래 배열은 변경되지 않습니다. forEach의 반환 값은 항상 정의되지 않습니다.

지도 방법

forEach 메서드와 유사하지만 NEW ARRAY를 반환합니다. 반환 값으로 새 배열을 생성하지만 forEach는 정의되지 않은 값을 제공합니다. 그러나 맵은 주어진 배열을 변경하지 않으므로 불변 메서드라고 할 수 있습니다.

코드 예:

// given array
let arr = [1, 2, 3, 4, 5];

//output the square of each number
let returnVal= arr.map((num) => num * num)

//the array hasn't changed
console.log(arr); 
console.log(returnVal);

// Output
 [1,2,3,4,5]
 [1,4,9,16,25]

따라서 보시다시피 map 메서드는 반환 값과 함께 새 배열을 반환하지만 주어진 배열을 변경하지는 않습니다. 주어진 배열은 변경되지 않습니다.

forEach와 map의 차이점은 무엇입니까?

내가 말했듯이 map은 새로운 배열을 반환하지만 forEach는 아무것도 반환하지 않습니다. 따라서 map과 forEach의 주요 차이점은 map 메서드는 배열의 각 요소에 콜백 함수를 적용하여 새 배열을 반환하는 반면 forEach 메서드는 아무 것도 반환하지 않는다는 것입니다.forEach 메서드를 사용하여 소스 배열을 변경할 수 있습니다. 대신 배열의 각 요소에 대해 작업을 수행해야 하는 경우에 적합합니다.

어느 것을 사용할 것인가?

함수를 적용하여 배열 요소를 변경하려는 경우 원래 배열을 수정하지 않고 새 배열을 반환하므로 map 메서드를 사용해야 합니다. 이러한 방식으로 원래 어레이는 그대로 유지됩니다. 반면에 배열의 모든 요소를 ​​반복하고 싶고 반환된 배열이 필요하지 않은 경우에는 forEach 메서드를 사용하십시오.