JavaScript에서 for...of와 for...in 루프의 차이

Source: Dev.to

JavaScript를 사용할 때 for...of와 for...in 루프의 차이를 이해하는 것은 깔끔하고 효율적인 코드를 작성하는 데 필수적입니다. 겉보기에는 비슷해 보일 수 있지만, 두 루프는 서로 다른 목적을 가지고 있으며 서로 다른 데이터 구조와 함께 작동합니다.

배열

• for...of는 실제 요소를 제공합니다.
• for...in은 인덱스를 문자열 형태로 제공합니다.

const data = ['apple', 'banana', 'cherry'];

// for...of – iterates over values
for (let item of data) {
    console.log(item);
}
// Output:
// apple
// banana
// cherry

// for...in – iterates over keys (indices)
for (let index in data) {
    console.log(index);
}
// Output:
// 0
// 1
// 2

문자열

• for...of는 각 문자를 순회합니다.
• for...in은 문자 인덱스를 문자열 형태로 순회합니다.

const text = "hello";

// for...of – characters
for (let char of text) {
    console.log(char);
}
// Output: h e l l o

// for...in – indices
for (let index in text) {
    console.log(index);
}
// Output: 0 1 2 3 4

객체

• for...of는 일반 객체와 직접 사용할 수 없습니다 (오류가 발생합니다).
• for...in은 객체의 열거 가능한 속성 키들을 순회합니다.

const person = { name: 'John', age: 30, city: 'NYC' };

// for...in – keys and values
for (let key in person) {
    console.log(key, person[key]);
}
// Output:
// name John
// age 30
// city NYC