map 과 forEach

배열 매소드에서 map() 과 forEach() 는 배열의 length 만큼 콜백함수를 실행한다는 공통점이 있습니다. 그렇다면 차이점은 무엇일까요?

forEach() 는 함수를 실행만 하는데 반면, map()은 함수를 실행하여 새로운 배열을 반환한다는 차이가 있습니다.

forEach()

forEach()매소드는 return 값을 반환하지 않습니다. for 반복문으로 대체가 가능한데, 반복문은 조건을 넣어 중간에 함수실행을 중단할 수 있지만 forEach 는 중단이 불가능합니다. forEach() 는 대상 배열의 길이만큼 주어진 콜백을 실행합니다.

let str = ""
const arr = ['a' , 'b' , 'c']
arr.forEach(item => str += item)

console.log(str) // "abc"

arr.length 인 3번반복을 하며 각자 아이템이 str 값에 추가됩니다.

const boxes = document.querySelectorAll('box')

boxes.forEach((box)=>{
	box.addEvenetListener("click" , alert("clicked"))
})

DOM 조작을 할때 querySelectAll() 로 여러요소를 찾아 개별에게 addEventListener() 를 주고 싶을때 forEach 를 유용하게 사용할 수 있습니다.

반환값이 있는 map()

map() 함수는 대상 배열의 길이만큼 콜백을 실행하고, 콜백의 반환 값을 모아 새로운 배열을 반환합니다. 이 반환값을 변수에 담을 수 있습니다.

const numbers = [1,2,3,4]
newNumbers = numbers.map(item => item * 2)
-> [2,4,6,8]

만약 객체 배열에서 해당되는 값만 배열에 넣고 싶다면?

const users = [
  { name: "Leo", age: 13 },
  { name: "Hanna", age: 34 },
  { name: "Sky", age: 23 },
];

const ageArr = users.map(user => user.age);

console.log(ageArr); //[13,34,23]