자바스크립트 여러가지 for 반복문 배열엔 forEach, for-of 객체는 for-in 비교 차이점

프로젝트를 진행하다보면 워낙에 배열형 데이터를 활용하는게 많다보니 반복문이 필수다. 

그런데 우물안 개구리라고... 사용하는 것만 주로 사용해서 잘 몰랐는데 반복문도 참 여러가지가 있다.

 

모질라 MDN에서 설명하는 자바스크립트 지원 반복문은 for문말고도 while문이 있는데 대표적인 반복문의 경우 예전에 제어문을 정리하면서 한번 정리를 하긴했다. 

Do it 자바스크립트 3. 제어문. 조건문if, 선택문switch-case, 반복문for, while. 백텍, 백틱`으로 출력하

 

그래도 나름 이제 1년차가 되다보니 다른사람의 소스나 튜토리얼같은 것들도 많이 보게되고 점점 상황에 따라 다른 반복문을 사용하는 경우도 생겨 반복문중에서도 이번참에 for 반복문을 한번 정리해보려고 한다. 

 

for([초기문]; [조건문]; [증감문]) 반복문

자바스크립트 반복문을 접할때 가장 처음 접하게 되는 반복문이다.

See the Pen Untitled by sophie-jhkim (@sophie-jhkim) on CodePen.

 

보통 이런식으로 i변수를 써서 사용하는데 굳이 배열에 적용하지 않더라도 특정 이벤트를 몇차례 반복해야한다거나 할때 사용한다. 

가장 기본적인 반복문이긴 하지만 학원에서 배운 뒤로 실무에서는 사실 거의 사용하지 않았던 것 같다.

 

 

728x90

배열 for-of 반복문

배열안의 각각의 아이템에 대해 실행하는 반복문

 

See the Pen for-of by sophie-jhkim (@sophie-jhkim) on CodePen.

 

 

 

배열 forEach 반복문

개인적으로 forEach의 사용 비중이 다른 반복문에 비해 가장 큰 것 같다. 회원이나 게시글 등 대부분의 데이터들을 배열 형식으로 받기때문에 데이터를 특정 조건으로 필터링하거나 조작이 필요할때 사용한다. 

 

See the Pen forEach by sophie-jhkim (@sophie-jhkim) on CodePen.

 

 

반응형

* 객체 속성의 반복 for-in

for-in의 경우 객체와 배열 모두 사용가능하긴 하지만 MDN에서는 배열의 순서(index)가 중요한 배열에는 사용하지 말라고 한다.

See the Pen for-in by sophie-jhkim (@sophie-jhkim) on CodePen.

객체에 적용한 for-in 반복문의 경우 객체의 key값들이 출력되는걸 볼 수 있다.

반면에 배열에 적용한 for-in의 경우 값이 출력되는 것이 아닌 배열의 순서 index가 출력된다. 이것은 자바스크립트에서는 배열 역시 객체타입으로 인식되는데 이때 index가 바로 key값이 되기때문이라고 한다. 그래서 for-in은 배열에 적합하지 않은가보다.

 

 

 

---

배열 데이터를 주고받으면서 조작이 필요할때 이런 반복문이 잘 안먹힐때가 있다. 그럴때는 가장 처음 의심해봐야하는게 비동기 문제이다(는 내 얘기...ㅠ) 로그로 들어오는 데이터는 정상인데 왜 함수가 안먹히지?할때는 데이터가 들어오는게 먼저인지 함수가 먹히는게 먼저인지 부터 확인해보자

사실 이 글도 비동기때문에 반복문 삽질하다 쓰는 포스팅.....

 

 

 

---

포스팅 내용에 잘못된 점이나 더 좋은 방법이 있다면 댓글로 알려주시면 감사하겠습니다 :)

 

 

참고 https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Loops_and_iteration

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in