[Javascript] 반복문 for, forEach, map 차이점

for 문, while 문 등 반복문의 종류는 여러 가지가 있다. 배열 매서드인 forEach와 map은 for 문과 어떤 점이 다른지 차이점을 통해서 알아보자.

 

 

 

 

 

 

목차

1. for() vs. forEach() vs. map()
2. forEach()
3. map()

 

 

 

 

 

1. for() vs. forEach() vs. map()

	for()	forEach()	map()
기본 형식	for(초기화식; 조건식; 증감식) {     실행문; }	배열명.forEach(function(매개변수) {     실행문; });	배열명.map(function(매개변수) {     실행문; });
설명	- 조건식에 부합하면 멈추지 않고 계속해서 순회한다. - 멈추고 싶다면 'break;'을 사용하여야 한다.	- 반복문 기능을 지닌 배열 매서드이다. - 배열의 요소를 순회하며, 모두 순회하면 실행을 멈춘다. - 'break;' 사용이 불가하다. - for 문보다 속도가 빠르다.	- map도 반복문 기능을 가지지만, 반환값이 있다는 점에서 forEach와 다르다.  - 배열의 요소를 순회하며, 모두 순회하면 실행을 멈춘다. - 'break;' 사용이 불가하다. - 기존 배열의 값이 바뀌는 게 아니라 새로운 배열을 만든다.

 

 

 

2. forEach()

오직 배열에만 사용되는 매서드인 forEach는 for 문과 마찬가지로 반복적인 기능을 수행한다. forEach 문의 매개변수 자리에는 callback 함수를 넣을 수도 있다. 각 배열의 요소에 반복적인 작업을 할 때, callback 함수가 호출되는 방식이다. 

 

기본 형식

 

const array = ['a', 'b', 'c', 'd'];
 
// 기본형
array.forEach(function(매개변수){
    console.log(매개변수명);
});
 
// 화살표 함수
array.forEach(매개변수 => {
    console.log(매개변수명)
});

 

 

매개변수에는 배열 요소(item), 인덱스(index), 배열(array) 순서로 담기며 이 순서로 출력된다. 이 세 가지 매개변수의 이름은 원하는 대로 정할 수 있다. 아래 이미지에서 참고하면 되는데, 매개변수 자리에 있는 매개변수명은 내가 알아보기 쉽게 정해서 넣으면 된다.

 

 

forEach 매개변수명

 

 

다만, 배열을 불러오는 매개변수의 경우 forEach 문에서는 잘 사용하지 않는다.

 

 

 

 

3. map()

기본 형식

 

const array = ['a', 'b', 'c', 'd'];
 
// 기본형
array.map(function(매개변수){
    console.log(매개변수명);
    return // 반환값 설정
});
 
// 화살표 함수
array.map(매개변수 => {
    console.log(매개변수명)
    return // 반환값 설정
});
 

 

 

map도 배열의 반복문의 역할을 한다. forEach 문과 다른 점이 있다면, 반환값(return값)이 있다는 것이다. 반환값에 대해서는 아래 예시를 보면 더 쉽게 이해할 수 있다.

map은 '배열'로 값을 반환하는데, 반환값을 설정하지 않을 경우 반환되는 배열의 요소가 'undefined'로 출력된다. 따라서 반환값(return)을 설정해주어야 한다.

 

map 반환값

 

 

배열의 요소에 문자열이 아닌 상수 1을 더하면 어떻게 될까? 상수였던 '1'이 기존 배열 요소와 합쳐져 문자열이 되고 새로운 배열로 탄생한다.

배열의 매개변수를 반환값으로 설정하면 어떻게 될까? 기존 배열이 새로운 배열의 요소가 된다.

 

map 반환값

 

 

주의해야 할 점이 있다면, map을 통해 생성된 배열의 경우 기존 배열과 다른 완전히 새로운 배열이라는 점이다. 즉, 기존 배열의 값이 바뀌는 것이 아니라 새로운 배열을 만드는 것이다.

 

map은 아래와 같이 활용할 수 있다.

 

 

const array = [2, 4, 6, 8];
const newArray = array.map((item, index) => {
    return item + 1;
});
 
console.log(array); // [2, 4, 6, 8]
console.log(newArray); // [3, 5, 7, 9]