Javascript 루프문 정리(3) for...of문

for...of 루프문은 자바스크립트에서 이터러블(iterable) 객체(배열, 문자열, 맵, 셋 등)를 반복하며 각 요소에 접근할 때 사용됩니다. 이 루프문은 배열 뿐만 아니라 문자열, 맵, 셋 등 다양한 이터러블 객체를 반복할 수 있습니다. for...of 루프문은 일반적인 for 루프문과는 달리 인덱스나 속성을 이용한 반복이 아니라, 직접 값을 가져와서 반복합니다. 아래는 for...of 루프문의 구조와 사용 방법에 대한 설명입니다.

for...of 루프문의 구조

for (변수 of 이터러블객체) {
  // 반복 실행할 코드 블록
}

• 변수: 각 요소의 값을 할당할 변수입니다.
• 이터러블객체: 반복하며 접근할 객체입니다.

for...of 루프문의 사용 방법

배열 요소를 출력하는 경우:

const arr = [1, 2, 3, 4, 5];
for (const element of arr) {
  console.log(element);
}
// 1, 2, 3, 4, 5

• arr 배열의 각 요소의 값을 element 변수에 할당하여 반복문을 실행합니다.

문자열을 출력하는 경우:

const str = 'Hello';
for (const char of str) {
  console.log(char);
}
// H, e, l, l, o

• 문자열의 각 문자(char)를 변수에 할당하여 반복문을 실행합니다.

맵 객체의 요소를 출력하는 경우:

const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}
// a: 1, b: 2, c: 3

• 맵 객체의 각 요소(key, value)를 배열로 할당하여 반복문을 실행합니다.

for...of 루프문은 객체의 속성에는 접근할 수 없지만, 이터러블 객체(배열, 문자열, 맵, 셋 등)을 반복할 때 유용합니다. for...of 루프문은 반복문을 작성하기 쉽고 간결하게 만들어주며, 코드 가독성을 높여줍니다.

Javascript 루프문 정리(0) 개요

Javascript 루프문 정리(1) for문

Javascript 루프문 정리(2) for...in문

Javascript 루프문 정리(3) for...of문

Javascript 루프문 정리(4) while문

Javascript 루프문 정리(5) do...while문

Javascript 루프문 정리(6) forEach문

Javascript 루프문 정리(7) map문

Javascript 루프문 정리(8) filter문