[JavaScript] 자바스크립트 for of문 사용법 & 예제 정리

자바스크립트 for문의 종류

• for문 : 일반적인 for문으로 블록 안의 코드를 조건에 따라 반복합니다.
• forEach문 : 배열에 대해 사용되는 for문으로, 각 배열 요소에 대해 주어진 함수를 실행합니다.
• for...in문 :객체에 대해 사용되는 for문으로, 객체의 열거 가능한 속성을 반복할 때 사용됩니다. 
• for...of문 :배열, 문자열, 맵(Map), 셋(Set) 등의 iterable 객체를 순회할 때 사용되는 for문입니다.

 

자바스크립트는 경우에따라 forEach, for in, for of와 같은 다양한 종류의 for문이 사용될 수 있는데요. 이번 포스팅에서는 for...of문에 대해 알아보도록 하겠습니다. for...of 문은 ECMAScript 2015(ES6)에서 도입된 반복문으로, iterable 객체를 순회하는 데 사용됩니다. 주로 배열, 문자열, 맵(Map), 셋(Set)처럼 순회 가능한 객체에 대해 사용할 수 있습니다.

 

---

 

 자바스크립트 for of문 사용법 

for (변수 of iterable) {
    // 각 요소에 대한 코드
}

• 변수: 각 반복에서 현재 요소의 값을 할당하는 변수입니다.
• iterable: 순회 가능한 객체입니다.

 

 자바스크립트 for문을 for of문으로 바꿔보기 - Map 객체 순회 

for문 사용 시

See the Pen Untitled by 우정태 (@sxqouumz-the-reactor) on CodePen.

for문을 사용하여 MAP객체의 키,값을 출력하려면 entries() 메서드를 사용해야 합니다. 위와 같이 entries() 메서드로 map의 iterator를 먼저 만들어주고 next() 메서드를 사용하여 맵의 각 키-값을 출력합니다.

 

for of문 사용 시

See the Pen Untitled by 우정태 (@sxqouumz-the-reactor) on CodePen.

 

for of문을 사용하면 내부적으로 iterator가 내장되어 있기 때문에 이 부분을 생략하고 진행이 가능합니다. const[key,value] 부분에서 map의 키, 값을 할당하고 화면에 출력하게 됩니다.

 

---

 

 for of문 다양한 예제 

문자열을 순회하면서 값 출력하기

See the Pen for of1 by 우정태 (@sxqouumz-the-reactor) on CodePen.

문자열을 순회하면서 값을 출력합니다.

 

 

배열을 순회하면서 값 출력하기

See the Pen for of2 by 우정태 (@sxqouumz-the-reactor) on CodePen.

배열을 순회하면서 값을 출력합니다.

 

 

SET을 순회하면서 값 출력하기

See the Pen for of3 by 우정태 (@sxqouumz-the-reactor) on CodePen.

 

SET을 순회하면서 값을 출력합니다.

 

---

 

 for of문 사용시 고려해야 할 점 

순회 가능한 객체에만 사용이 가능

for...of는 배열, 문자열 Map, Set처럼 순회 가능한(iterable) 객체에서만 사용이 가능합니다. 순회가 불가능한 객체라고 하면 대표적으로 Object가 있습니다. 본래 객체는 iterator를 사용할 수 없기 때문에 for of를 사용할 수 없고 객체를 순회할 때는 for of문이 아니라 for in문을 사용하는 것이 좋습니다.

 

인덱스 접근 불가

for of문은 인덱스에 직접 접근할 수 없습니다. 인덱스가 필요한 경우에는 for in문을 사용하거나 그냥 for문을 사용해야 합니다.

 

break와 continue 사용 가능

forEach문에서는 break와 continue를 사용할 수 없지만 이 for of문에서는 break와 continue를 사용할 수 있습니다. 이 break와 continue를 사용하여 특정 조건에서 반복을 중단하거나 건너뛰는데 사용할 수 있습니다.