[Javascript] Array Method map()과 foreach() 차이

 

Array Method에서 forEach를 쓸 때와 map을 쓸 때가 있다

같은 배열 메소드인데 어떤 차이가 있는지 알아보자

 

 

 

 

---

 

 

Array.prototype.map()

배열 내의 모든 요소 각각에 대하여 콜백 함수에 따라서 새로운 배열를 반환한다

 

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

 

map()은 기존 배열을 이용해 새로운 배열을 생성하므로 새 배열을 얻고 싶다면 map()을 사용할 것을 권장한다

요소가 아닌 새로운 값을 만들기 때문에 return을 할 수 있고 return 값 자제를 반환한다

때문에 데이터를 변경할 때 사용하며 filter(), reduce() 등과 같은 다른 메소드를 같이 사용할 수 있다

 

---

Array.prototype.forEach()

배열 요소 각각에 대해 콜백 함수를 실행하며 아무 값도 반환하지 않는다

 

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

 

제공된 배열 요소를 호출하며 호출된 배열을 변경할 수도 있다

다만 forEach() 구문 밖으로 return 값을 받지는 못하며 항상 undefined를 반환한다

단순히 배열을 순회한다면 forEach()를 사용하며 중간에 break;를 사용할거라면 for()문을 사용해야 한다

 

 

 

 

---

 

Array.prototype.map() - JavaScript | MDN

 

Array.prototype.forEach() - JavaScript | MDN