[JavaScript] for, forEach, map 차이

 

for, forEach, map 차이

 

---

 

1. for

 

조건에 부합하면 계속해서 순회한다. 중간에 break를 만나면 중단한다.

 

const arr = [0, 1, 2, 3];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

// 출력 결과
// 0
// 1
// 2
// 3

 

const arr = [0, 1, 2, 3];

for (let i = 0; i < arr.length; i++) {
   if(i > 2) break;
   else console.log(arr[i]);
}

// 출력 결과
// 0
// 1
// 2

 

 

2. forEach

 

배열의 각 요소에 대해 callback 함수를 실행한다. break를 사용할 수 없다.

 

const arr = [0, 1, 2, 3];
arr.forEach(item => console.log(item));

// 출력 결과
// 0
// 1
// 2
// 3

 

 

3. map

 

배열의 각 요소에 대해 callback 함수를 실행하고, 그 결과에 대한 새 배열을 리턴한다. break를 사용할 수 없다.

 

const arr = [0, 1, 2, 3];
arr.map(item => console.log(item));

// 출력 결과
// 0
// 1
// 2
// 3

const arr2 = arr.map(item => console.log(item));
console.log(arr2); // [undefined, undefined, undefined, undefined]

 

리턴 값을 따로 지정해주지 않으면 빈 배열이 생성된다.

 

const arr = [0, 1, 2, 3];

const arr2 = arr.map((item) => {
  console.log(item);
  return item;
});

console.log(arr2); // [0, 1, 2, 3]

 

리턴 값을 지정해주면 새 배열이 생성된다.

 

---

 

참고 자료

https://whales.tistory.com/m/115