자바스크립트(Javascript) for in 반복문 사용하기

자바스크립트(JavaScript)에서 “for...in” 반복문은 객체의 속성(프로퍼티)을 반복적으로 열거하는 반복 구조입니다. 사용 사례에서 “for...in” 반복문은 객체의 속성을 열거하고 출력합니다. 필요한 경우 프로토타입 체인에 있는 속성을 제외하려면 “hasOwnProperty” 메서드를 사용할 수 있습니다. 아래에 “for...in” 반복문의 개념과 구문을 설명하고, 다양한 사용 사례를 보고 사용법을 익히시기 바랍니다.

 

 

 

다른 for 반복문도 있으니 경우에 따라 다양하게 활용해 보시기 바랍니다. 아래는 for 반복문입니다.

https://mainia.tistory.com/6986

자바스크립트 for 반복문 사용하기

 

자바스크립트에서 반복문을 종료하는 방법이 있습니다.

https://mainia.tistory.com/934

자바스크립트 반복문 종료, 유지 구문 continue, break 사용하기

 

 

◎ 1. 구문

 

“for...in” 반복문은 객체의 속성을 열거하면서 반복 작업을 수행합니다. 이것은 객체의 프로퍼티를 순회하거나 객체의 속성을 검사하는 데 사용됩니다. “변수”에는 현재 속성의 이름이 할당되며, “객체”는 반복할 객체를 나타냅니다.

 

for (변수 in 객체) {
    // 실행할 코드 블록
}

 

 

◎ 2. 객체 속성 순회

 

객체의 속성을 순회하고 그 값을 출력하는 예제입니다. key value 로 만들어진 객체에서 for in 은 key 반환합니다. key 값을 person 객체에 입력하고 결과값을 출력합니다.

 

const person = {
    name: "Alice",
    age: 30,
    city: "New York"
};
 
for (let key in person) {
    console.log(key + ": " + person[key]);
}
 
[출력]
name: Alice
age: 30
city: New York

 

 

◎ 3. 배열 요소 순회

 

배열의 인덱스를 사용하여 배열 요소를 순회하는 예제입니다. 배열의 인덱스를 반환하면 colors 에 입력해서 값을 반환하고 출력합니다.

 

const colors = ["red", "green", "blue"];
 
for (let index in colors) {
    console.log("Index: " + index + ", Color: " + colors[index]);
}
 
[출력]
Index: 0, Color: red
Index: 1, Color: green
Index: 2, Color: blue

 

 

◎ 4. 객체의 프로토타입 속성 제외

 

“for...in” 반복문은 객체의 프로토타입 체인에 있는 속성도 반복할 수 있습니다. 하지만 “hasOwnProperty” 메서드를 사용하여 객체의 자체 속성만 순회하는 예제입니다.

 

function Person(name) {
    this.name = name;
}
 
Person.prototype.age = 30;
 
const alice = new Person("Alice");
 
for (let key in alice) {
    if (alice.hasOwnProperty(key)) {
        console.log(key + ": " + alice[key]);
    }
}
 
[출력]
name: Alice