map / forEach 사용시 주의할 점

date

Jan 25, 2023

slug

cautions-for-using-foreach-and-map

author

status

Public

ForEach와 Map에 대해 알아보기 전에, For문에 대해 살펴보면, 기존에 알던 것과 동일하다.


for(initialization ; condition ; final-expression)
	statement

이에 추가로 break와 continue를 사용하여 상태변화를 조정할 수 있다.

다음으로 forEach와 map에 대해 알아보자. 두 가지 모두 반복을 사용한다는 공통점이 있기 때문에 자칫하면 혼동하기 쉬운 문법이지만, forEach와 map은 다른 것이다. 가장 큰 특징은 Return Value에 대한 여부이다.


const items = ["one", "two"];

items.forEach(item => {
  console.log(item);
});

forEach는 반복되는 item별로 기능을 실행하지만 결과 값이 반환되지 않는다. 반복하는 배열에 대해 callback을 실행하며 순회하고, 중간에 break에 대한 사용이 불가하다.


const items = ["one", "two"];

const result = items.map(item => {
  console.log(item);
if(item === "one") return item;
});

map은 각 array의 item별로 기능을 실행하고, 그 결과를 반환한다. return으로 배열에 각 요소에 대한 callback을 싱행하고, 조건에 맞는 실행 결과를 가진 새로운 값을 리턴했다.

for는 동기방식이다

따라서, for문 안에 오류가 나면 에러 위치 이후의 이벤트들은 동작하지 않고 멈춰버린다.

foreach는 비동기 방식이다. - ES6 문법으로, 콜백함수를 뿌린다.

따라서, foreach문 안에 에러가 발생하더라도 멈추지 않고 동작한다.

가변적인 배열이나 리스트 크기를 구할 필요가 없어 복잡한 반복문에 적합하다.

우리는 동기보다 비동기를 사용할 때 상대적으로 더 많은 오류를 만난다.

따라서 비동기 기반인 foreach 사용시에 만날 수 있는 오류들을 미리 알아두어야한다.

1. 원하는 순서와는 다르게 프로그램이 동작할 수 있다.

foreach문 이후에 반복문에서 수정한 변수를 사용할 때,

2. break, return로 반복문을 탈출할 수 없다.

비동기 방식이기 때문에 break나 return를 만나더라도 멈추지 않고 동작한다.

해당 번째의 루프만 진행되지 않고 다른 루프는 여전히 진행된다.

예시)