JavaScript의 반복 가능 속성과 열거 가능 속성의 차이점 이해

JavaScript로 작업할 때 데이터 컬렉션을 반복해야 하는 경우가 많습니다. 이를 수행하는 두 가지 일반적인 방법은 for-in 및 for-of 루프입니다. 그러나 이러한 루프는 다양한 컨텍스트와 다양한 유형의 컬렉션에 사용됩니다. 이러한 루프를 효과적으로 사용하려면 반복 가능한 속성과 열거 가능한 속성의 차이점을 이해하는 것이 중요합니다.

1. for-in 루프: 열거 가능한 모든 속성을 반복합니다.

for-in 루프는 객체의 열거 가능한 속성을 반복하도록 설계되었습니다. 열거 가능한 속성은 객체를 반복하거나 Object.keys()와 같은 메서드를 호출할 때 표시되는 속성입니다.

const obj = {
    name: 'john',
    age: '24'
};

obj.isMarried = false;

for (const key in obj) {
    console.log(key); // Outputs: name, age, isMarried
}

이 예에서 for-in 루프는 동적으로 추가된 isMarried 속성을 포함하여 obj 개체의 모든 열거 가능한 속성을 반복합니다.

2. for-of 루프: 모든 반복 가능한 항목을 반복합니다.

반면에 for-of 루프는 반복 가능한 객체를 반복하는 데 사용됩니다. iterable은 Symbol.iterator 메서드가 있는 객체입니다. 반복 가능한 객체의 일반적인 예로는 배열, 문자열, 맵, 집합 등이 있습니다.

const arr = ['apple', 'pear'];
arr.anotherFruit = 'banana';

for (const fruit of arr) {
    console.log(fruit); // Outputs: apple, pear
}

여기서 for-of 루프는 배열 arr을 반복하며 anotherFruit 속성은 반복 가능한 시퀀스의 일부가 아니기 때문에 무시합니다.

3. 배열은 반복 가능하지만 객체는 반복 가능하지 않습니다

기본적으로 JavaScript의 배열에는 Symbol.iterator 메서드가 내장되어 있으므로 반복 가능합니다. 그러나 일반 객체에는 이 방법이 없으므로 반복할 수 없습니다.

const arr = ['apple', 'pear'];

for (const fruit of arr) {
    console.log(fruit); // Outputs: apple, pear
}

const obj = {
    name: 'john',
    age: '24'
};

for (const key of obj) {
    console.log(key); // Throws TypeError: obj is not iterable
}

위 코드에서 객체에 for-of 루프를 사용하려고 하면 객체가 Symbol.iterator 메서드를 구현하지 않기 때문에 TypeError가 발생합니다.

4. 오류 설명: TypeError: obj는 반복할 수 없습니다.

반복이 불가능한 객체에 for-of 루프를 사용하려고 하면 JavaScript에서 TypeError가 발생합니다. 이 오류는 객체에 for-of 루프에 필요한 Symbol.iterator 메서드가 없기 때문에 발생합니다.

const obj = {
    name: 'john',
    age: '24'
};

try {
    for (const key of obj) {
        console.log(key);
    }
} catch (e) {
    console.error(e); // Outputs: TypeError: obj is not iterable
}

코드 예

다음은 for-in 루프와 for-of 루프의 차이점을 보여주는 완전한 예입니다.

const log = console.log;
const arr = ['apple', 'pear'];
arr.anotherFruit = 'banana';

log('Using for-of loop:');
for (const fruit of arr) {
    log(fruit); // Outputs: apple, pear
}

log('Using for-in loop:');
for (const fruit in arr) {
    log(fruit); // Outputs: 0, 1, anotherFruit
}

const obj = {
    name: 'john',
    age: '24'
};

obj.isMarried = false;

log('Using for-in loop:');
for (const key in obj) {
    log(key); // Outputs: name, age, isMarried
}

log('Using for-of loop:');
try {
    for (const key of obj) {
        log(key);
    }
} catch (e) {
    log(e); // Outputs: TypeError: obj is not iterable
}

결론

JavaScript의 for-in 및 for-of 루프를 효과적으로 사용하려면 반복 가능한 속성과 열거 가능한 속성의 차이점을 이해하는 것이 필수적입니다. for-in 루프는 객체의 열거 가능한 속성을 반복하는 데 사용되는 반면 for-of 루프는 배열과 같은 반복 가능한 객체를 반복하도록 설계되었습니다. 이러한 루프를 잘못 사용하면 반복 불가능한 객체에서 for-of 루프를 사용하려고 할 때 발생하는 TypeError와 같은 오류가 발생할 수 있습니다. 이러한 차이점을 이해하면 더욱 강력하고 오류 없는 JavaScript 코드를 작성할 수 있습니다.

위 내용은 JavaScript의 반복 가능 속성과 열거 가능 속성의 차이점 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!