[React] for와 foreach의 차이

개요

리액트로 개발하던 도중 for와 foreach가 왜 굳이 따로 존재할까 의문이 들었다.

뭔가 foreach가 간결하게 value를 탐색하는것 같아 더 간지가 나지만

for문에서도 of를 사용하면 value로 탐색이 가능하고

foreach문에서도 두번째 인자를 통해 idx를 가져올 수 있다.

이렇게 보면 둘이 같은 기능을 제공하는데 무엇이 다를까?

 

차이점

동기(sync), 비동기(async)의 차이

for는 동기방식이다

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

 

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

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

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

 

foreach 사용시 주의점

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

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

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

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

 

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

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

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

예시)