반복문 'for', 'forEach', 'map' 사용법과 차이점

 

자바스크립트의 for( ), forEach( ), map( ) 함수에 대해 비교를 통해 알아보겠습니다.​

1) for( )

초깃값부터 시작해서 증가 또는 감소하면서 조건에 부합하면 계속 순회합니다.

중간에 "break;" 문을 만나면 반복문을 중단합니다.

for ([initialization]; [condition]; [final-expression])
   statement​

​

2) forEach( )

배열의 각 요소에 대해 callback을 실행합니다.

배열을 순회하므로 중간에 "break;" 문을 사용할 수 없습니다. 이런 경우라면 for( )문을 사용해야 합니다.

array.forEach(callback(currentvalue[, index[, array]])[, thisArg])

​

3) map( )

배열의 각 요소에 대해 callback을 실행하고 실행결과를 모은 새 배열을 리턴합니다.

배열을 순회하므로 중간에 "break;" 문을 사용할 수 없습니다. 이런 경우라면 for( )문을 사용해야 합니다.

array.map(callback(currentValue[, index[, array]])[, thisArg])

​

실습을 통해 익혀보겠습니다.​

👍 for( )은 인덱스 0부터 시작해서 배열의 길이만큼 순회하면서 배열의 각 원소들을 출력합니다.

const animals = ["lion", "tiger"];
for (let i=0; i<animals.length; i++) {
  console.log(animals[i]);
}
// [콘솔 출력 결과]
// lion
// tiger

​

👍 forEach( )은 배열을 순회하면서 배열의 각 원소들을 출력합니다.

const animals = ["lion", "tiger"];
animals.forEach(animal => {
  console.log(animal);
});
// [콘솔 출력 결과]
// lion
// tiger

​

👍 map( )은 배열을 순회하면서 배열의 각 원소들을 출력합니다. 특이한 점은 forEach( )와 달리 실행결과를 모은 새 배열을 리턴한다는 것입니다. 아래는 별도의 return이 없기때문에 순회했던 개수만큼의 undefined 원소가 있습니다.

const animals = ["lion", "tiger"];
rr = animals.map(animal => {
  console.log(animal);
});
console.log(rr); // [undefined, undefined]
// [콘솔 출력 결과]
// lion
// tiger
// [undefined, undefined]

따라서 map의 용도를 제대로 살리려면 return 문이 있어야 합니다. return이 포함되자 배열의 각 요소에 대해 callback을 실행하고 실행결과를 모은 새 배열을 리턴했습니다.

 

const animals = ["lion", "tiger"];
rr = animals.map(animal => {
  console.log(animal);
  return "mammal " + animal
});
console.log(rr); // ["mammal lion", "mammal tiger"]
// [콘솔 출력 결과]
// lion
// tiger
// ["mammal lion", "mammal tiger"]

이상 자바스크립트의 for( ), forEach( ), map( ) 함수에 알아보았습니다.

​

단순 반복이라면 for( ),

배열을 순회하려면 forEach( ), 배열을 순회 후 새 배열을 얻고 싶다면 map( ) 사용할 것을 권장합니다.

 

출처 : https://m.blog.naver.com/wideeyed/221877912230