자바스크립트는 매우 다양한 반복문을 제공합니다. 그 중에서도 for...of 루프는 배열이나 iterable 객체를 다룰 때 간편하고 가독성 있게 사용할 수 있는 반복문입니다. for...of 루프를 사용하여 자바스크립트에서 반복작업을 효율적으로 처리할 수 있습니다.

for...of 루프란?

for...of 루프는 ES6(ECMAScript 2015)에서 도입된 반복문의 한 종류입니다. 이 반복문은 배열이나 iterable한 객체의 각각의 요소들을 가져와서 반복적으로 실행하는 기능을 제공합니다. 다른 반복문과 달리, for...of 루프는 인덱스를 다룰 필요 없이 요소에 직접 접근할 수 있습니다.

for...of 루프 사용하기

for...of 루프를 사용하는 방법은 간단합니다. 아래 예제를 통해 살펴보겠습니다.

const fruits = ['apple', 'banana', 'orange'];

for (const fruit of fruits) {
    console.log(fruit);
}

위 예제에서 fruits 배열의 각각의 요소를 fruit 변수에 할당하고, console.log() 함수를 통해 각 요소를 출력하도록 하였습니다. 이렇게 하면 배열의 각 요소를 순차적으로 접근할 수 있습니다. 결과적으로 아래와 같이 출력됩니다.

apple
banana
orange

for...of 루프와 객체

for...of 루프는 배열 뿐만 아니라 iterable한 객체에서도 사용할 수 있습니다. 하지만 주의해야 할 점은, 객체를 순회할 때는 객체의 프로퍼티들이 아니라, 객체의 값들에 대해서만 반복적으로 실행된다는 것입니다.

예를 들어, 아래의 객체를 가지고 for...of 루프를 실행하면 어떻게 될까요?

const person = { name: 'John', age: 30, occupation: 'developer' };

for (const property of person) {
    console.log(property);
}

위 코드를 실행하면, 다음과 같은 에러가 발생합니다.

TypeError: person is not iterable

따라서, for...of 루프를 객체에 사용할 경우에는 iterable한 객체로 변환해주어야 합니다. 예를 들어, Object.keys() 메소드를 사용하여 객체의 키들로 이루어진 배열을 생성한 후, for...of 루프를 실행할 수 있습니다.

결론

for...of 루프를 사용하면 배열이나 iterable한 객체를 간편하게 순회하고, 요소에 직접 접근할 수 있습니다. 이를 통해 코드의 가독성을 높이고 반복 작업을 효율적으로 처리할 수 있습니다. 따라서, 자바스크립트에서 for...of 루프를 적극적으로 활용하는 것을 권장합니다.