Colin's Blog
자바스크립트 for...of 루프

자바스크립트는 다양한 반복문을 제공하는데, 그 중 for…of 루프는 배열이나 유사 배열 객체에서 직관적이고 간편한 반복을 가능하게 해줍니다. for…of 루프는 ES6 (ECMAScript 2015)부터 도입되었으며, 배열 내의 각각의 요소를 반복하면서 코드를 실행합니다.

사용법

for…of 루프를 사용하려면 다음과 같은 형식을 사용합니다:

for (variable of iterable) {
  // 실행될 코드
}

만약 배열을 반복하고자 한다면, 다음 예제와 같이 사용할 수 있습니다:

let colors = ['red', 'green', 'blue'];

for (let color of colors) {
  console.log(color);
}

위의 코드는 “red”, “green”, “blue”를 순서대로 콘솔에 출력합니다.

사용 예시

for…of 루프는 배열 뿐만 아니라 모든 반복 가능한 객체에 사용할 수 있습니다. 다음은 for…of 루프를 사용한 예시입니다:

문자열 반복하기

let message = "Hello, World!";

for (let char of message) {
  console.log(char);
}

위의 코드는 “H”, “e”, “l”, “l”, “o”, “,”, “ “, “W”, “o”, “r”, “l”, “d”, “!”를 순서대로 콘솔에 출력합니다.

Set 반복하기

let set = new Set([1, 2, 3]);

for (let number of set) {
  console.log(number);
}

위의 코드는 1, 2, 3을 순서대로 콘솔에 출력합니다.

Map 반복하기

let map = new Map([['name', 'John'], ['age', 30]]);

for (let [key, value] of map) {
  console.log(`${key}: ${value}`);
}

위의 코드는 “name: John”, “age: 30”을 순서대로 콘솔에 출력합니다.

주의사항

for…of 루프는 인덱스에 직접 접근할 수 없기 때문에 배열의 인덱스를 사용해야 하는 경우에는 for…of 루프 대신 for…in 루프를 사용해야 합니다.

결론

자바스크립트 for…of 루프는 배열과 유사 배열 객체를 반복하면서 코드를 실행할 때 간단하고 직관적인 해결책을 제공합니다. 반복 가능한(iterable) 객체를 사용하여 다양한 상황에서 유용하게 활용할 수 있으며, 반복문을 작성하는 과정에서 더 좋은 가독성과 효율성을 제공합니다.

© 2018 Colin. All rights reserved.