[Javascript] For VS forEach VS map

​1) for( )

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

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

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

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

const animals = ["lion", "tiger"];

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

// [콘솔 출력 결과]
// lion
// tiger

​

2) forEach( )

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

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

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

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

const animals = ["lion", "tiger"];

animals.forEach(animal => {
	console.log(animal);
});

// [콘솔 출력 결과]
// lion
// tiger

​

​3) map( )

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

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

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

 

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( ) 사용할 것을 권장합니다.

​

 

참고 : https://m.blog.naver.com/wideeyed/221877912230