자바스크립트(Javascript) 반복문 for … of 구문 이용하기

“for...of” 구문은 JavaScript에서 반복 가능한(iterable) 객체의 요소를 반복하는 데 사용되는 반복 구문입니다. “for...of”는 배열, 문자열, Map, Set 등과 같은 반복 가능한 객체를 순회하면서 각 요소의 값을 반환합니다. 이 구문은 “for...in”과 달리 요소의 값 자체에 접근합니다. 아래는 “for...of” 구문의 구문과 사용법에 대한 설명입니다.

 

 

 

◎ 구문

 

for (변수 of 반복 가능한_객체) {

  // 변수를 사용하여 현재 요소에 접근

  // 원하는 작업을 수행

}

 

l  “변수”: 반복할 요소의 값을 할당할 변수입니다.

l  “반복 가능한_객체”: 반복할 객체(배열, 문자열, Map, Set 등)입니다.

 

 

◎ 1. 리스트 기본 숫자 반복문

 

다음은 “for...of” 구문을 사용하여 배열을 반복하는 간단한 예제입니다. 배열의 각 요소 값을 출력합니다. “for...of” 구문은 객체의 값을 순회하고 복사본을 반환하므로 원본 객체에 영향을 주지 않습니다. 이것은 배열 및 다른 반복 가능한 객체를 효과적으로 처리하는 데 사용하고 있습니다.

 

const numbers = [1, 2, 3, 4, 5];
 
for (const number of numbers) {
  console.log(number);
}
 
[출력]
1
2
3
4
5

 

 

◎ 2. 리스트 문자 반복문

 

“colors” 배열은 세 가지 색상을 포함하고 있습니다. “for...of” 반복문은 배열의 각 요소를 “color” 변수에 할당하면서 반복합니다. 각 반복에서 현재 “color” 값을 사용하여 해당 색상을 콘솔에 출력합니다.

 

const colors = ["red", "green", "blue"];
 
for (const color of colors) {
    console.log(“Color: ${color}”);
}
 
[출력]
Color: red
Color: green
Color: blue

 

 

◎ 3. 2차원 리스트인 경우 중복 반복

 

중복 반복문은 반복문 안에 다른 반복문이 포함된 형태를 나타냅니다. “matrix”는 3x3 행렬로 이루어진 이차원 배열입니다. 외부의 “for...of” 반복문은 각 행(row)을 “row” 변수에 할당하면서 반복합니다. 내부의 두 번째 “for...of” 반복문은 각 행의 요소(element)를 “element” 변수에 할당하면서 반복합니다. 각 반복에서 현재 “element” 값을 사용하여 해당 요소를 콘솔에 출력합니다.

 

const matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];
 
for (const row of matrix) {
    for (const element of row) {
        console.log(“Element: ${element}”);
    }
}
 
[출력]
Element: 1
Element: 2
Element: 3
Element: 4
Element: 5
Element: 6
Element: 7
Element: 8
Element: 9