[React] for와 foreach의 차이

개요

for와 foreach는 같은 동작을 하는 듯 하지만 차이가 있다. 차이에는 동기, 비동기 차이와 배열 조작 가능 여부 차이가 있다.

이 글에서는 이러한 차이점에 대해 알아본다

차이점

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

for는 동기방식이다

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

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

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

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

반응형

2. 배열 변경 사항 차이

for는 배열을 직접 조작할 수 있다

foreach는 배열을 변경하지 않는다.

foreach는 주로 배열의 각 요소를 읽기 위한 용도로 사용되며, 배열을 변경하려면 다른 방법을 사용해야 한다.

foreach 사용시 주의점

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

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

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

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

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

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

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

예시)