[JavaScript] Array method - map과 forEach의 차이

JavaScript.info 보는데 둘이 뭔차이야?? 싶어서 기록

forEach로 반복작업하기

arr.forEach(function(item, index, array) {
	//요소에 무언가 넣기
});

• 배열의 각각 요소에 인자로 들어간 함수(callback 함수)를 실행한다
• 아무것도 반환하지 않는다.

["Bilbo", "Gandalf", "Nazgul"].forEach(alert);

arr 내부의 '각각의 요소'들은 callback함수 alert를 호출한다
alert("Bilbo");
alert("Gandalf");
alert("Nazgul");

["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => {
	alert(`${item} is at index ${index} in ${array}`);
});

Bilbo is at index 0 in Bilbo, Gandalf, Nazgul
Gandalf is at index 1 in Bilbo, Gandalf, Nazgul
Nazgul is at index 2 in Bilbo, Gandalf, Nazgul

함수의 반환값은 무시된다

map - 배열을 변형하는 메서드

• 배열 요소 전체를 대상으로 함수 호출
• 함수 호출 결과를 새로운 배열로 반환

let result = arr.map(function(item, index, array) {
  //요소 대신 새로운 값을 반환.
})

let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length);
alert(lengths); // 5,7,6

forEach는 return을 안하고 map은 return을 한다는 차이로 생각하면 될까?????