forEach vs map

forEach

• 해당 메소드는 아무것도 리턴하지 않는다. (undefined)

• 콜백 함수로 제공된 함수로 호출하는 기존의 Array를 변경할수 있다.

• 메소드 외부로 리턴값을 보내주지 못한다.

let arr = [1,2,3,4,5]
let arr2 = arr.forEach((i)=> {return i+1})
console.log(arr2) // undefined

let arr = [1,2,3,4,5]
let arr2 = []
arr.forEach((i)=> {return arr2.push(i+1)})
console.log(arr2) // [2,3,4,5,6]

map

• 해당 메소드는 기존의 배열을 이용해 새로운 배열을 생성한다.

• 콜백 함수를 인자로 받아, 배열의 각 요소에 대해서 실행한 결과 값을 모아서 배열을 반환한다.

• 새로운 배열을 만들기에 다른 메소드들과 같이 사용하여 다른 작업들을 실행할수 있다.(filter(),reduce())

let arr = [1,2,3,4,5]
let arr2 = arr.map((i)=> {return i+1})
console.log(arr2) // [2,3,4,5,6]

출처 : https://velog.io/@limes/Javascript-Array-Method-for-each-%EC%99%80-map%ED%95%A8%EC%88%98%EC%9D%98-%EC%B0%A8%EC%9D%B4

https://dream-frontend.tistory.com/341