[JavaScript] forEach 문 , for in 문 , for of문

목차

 

1. forEach 문

var arr = ["1", "2", "3"];

// ES6의 화살표 함수를 이용하면 코드를 아주 간결하게 만들 수 있습니다.(가장 자주 쓰는 형태)
arr.forEach(item => {
	// item 변수는 배열 각각의 요소들을 순환합니다.
	console.log(item);
});

// forEach 함수의 원형 그대로 사용하기
arr.forEach(function(item, index, arr2) {
	// item : 배열 각각의 요소
	// index : 배열 인덱스
	// arr2 : 배열 자체(반복문 돌리는 배열을 통째로 참조해야할 경우 사용)
});

 

 

2. for...in 문

for...in문은 객체의 속성을 반복하기 위해서 열거형과 함께 사용되며, EcmaScript6에 도입되었습니다.

var arr = ["1", "2", "3"];
for (var item in arr) {
	// item : 배열 각각의 요소
}

※ 배열을 for...in문에 사용할 경우 두 가지 주의사항이 있습니다.

1. 배열에 반복문을 사용하는 경우 for...in문은 for...of문보다 처리 속도가 훨씬 느립니다.

2. 배열의 요소에 일관성 없는 데이터가 존재하는 경우

 

3. 전통적인 for 문

var arr = ["1", "2", "3"];
for (var i = 0; i < arr.length; ++i) {
	// index를 지정하는 전통적인 for문
}

 

4. for..of 문 (ES6에서 탄생)

for...of문 또한 EcmaScript6에 도입되었으며 반복 가능한(iterables) 객체만 사용할 수 있습니다.

let arr = [10, 20, 30];
for (let item of arr) {
	// item: 배열 각각의 요소
}

반복 가능한(iterables) 객체 목록

• 배열
• 문자열
• Set 객체와 Map 객체
• NodeList

반복적이지 않은 요소가 for...of문을 사용하는 경우 TypeError가 발생합니다.

 

5. for, forEach 차이점

- 동기와 비동기 

for문은 동기 방식이기 때문에 오류가 나면 오류가 난 위치 이후의 작업이 동작하지 않고 멈춰버린다. 

하지만 forEach문은 비동기 방식이기 때문에 멈추지 않고 동작한다. 

 

- 성능 차이

forEach 문은 " 향상된 for문 " 이라고 칭하며, 가변적인 배열이나 리스트 크기를 구할 필요가 없어 

복잡한 반복문에 적합하며, 인덱스를 생성하여 접근하는 for문보다 수행 속도가 빠르다. 

 

6. forEach문의 단점

1. 반복문 내에서 배열이나 리스트 값을 변경하거나 추가할 수 없다. 

오직 읽기 전용으로 불러오기 때문에 데이터를 수정할 수 없다. 

2. 배열을 역순으로 탐색할 수 없다. 

순서대로 정보를 가져오기 때문에 역순으로 가져올 방법이 없다. 

 

 

 

 

 

참고:
https://atomizedobjects.com/blog/javascript/how-to-get-the-index-in-a-foreach-loop-in-javascript/
https://developer-talk.tistory.com/279
https://bum-developer.tistory.com/entry/JavaScript-for%EB%AC%B8%EA%B3%BC-forEach%EB%AC%B8-%EC%B0%A8%EC%9D%B4
https://pangtrue.tistory.com/186