본문 바로가기

JavaScript

[#. JavaScript] forEach와 map의 차이점을 알아보자

반응형

 

 

 

 

 

forEach vs map

 

forEach를 쓸 때와 map을 쓸 때가 있다

차이점을 알아보자

 



① forEach()

Array 요소를 제공된 함수로 한 번 실행

아무 값도 반환하지 않는다

기존 배열 변경 가능

 

const arr = [1, 2, 3]
aarrrray.forEach((item, index) => {
   arr[index] = item * 2
})
console.log(arr)	// [2, 4, 6]

 

 

 

 

② map()

모든 Array 요소가 제공된 함수로 호출될 때 새로운 array를 생성

기존의 배열을 가공하여 새로운 배열을 생성할 때 사용

=> 기존 배열은 값이 바뀌지 않고 유지

 

const arr = [1, 2, 3]
const newArray = arr.map(item => {
   return item * 2
})

console.log(newArray)	// [2, 4, 6]

=> {} 중괄호 사용 시 return이 꼭 있어야 한다
return 안 쓰고 싶으면 () 사용

const newArray2 = arr.map(item => (
   item * 2
))

 

var arr = [1, 2, 3]

arr.map(item => {
   item * 2
})

console.log(arr)	// [1, 2, 3]
=> 기존 배열의 값은 바뀌지 않고, 새로운 변수에 값을 담아야 한다

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

반응형