자바스크립트 객체의 속성을 인쇄하거나 열거하는 방법은?

이 글에서는 자바스크립트 객체의 속성을 반복하고 출력하는 모든 옵션을 살펴보겠습니다. 보통 다음과 같은 요구사항을 접하게 됩니다.

• 객체의 모든 속성 이름을 어떻게 출력하나요?
• 객체의 메서드만 인쇄하는 방법은?
• 객체의 열거 불가능한 속성도 어떻게 출력하나요?

아래 목록에 나타난 것처럼 객체 cat을 생각해 봅시다:

var cat= {
    name : 'foo',
    age : 12,
    canRun : function() {
        console.log("can run");
    }
}

기본적으로 열거 가능한 객체의 모든 속성에 대해 열거 가능 함수는 참으로 설정되어 있습니다.  그래서 지금은 Object.getOwnPropertyDescriptor를 사용해 cat의 canRun 설명과 이름 속성을 출력하면, 두 속성 모두 열거 가능한 값이 참임을 알 수 있습니다.

console.log(Object.getOwnPropertyDescriptor(cat,"canRun"));
console.log(Object.getOwnPropertyDescriptor(cat,'name'));

보시다시피, enumerable, configurable, writable도 true로 설정되어 있습니다.

열거 가능 속성 중 참인 모든 속성을 출력하는 것부터 시작하자.

Printing all enumerable properties using for..in loop

우리는 자바스크립트를 사용해 cat 객체의 소유 또는 상속된 모든 열거 가능한 속성을 출력할 수 있습니다. 루프 중.

for (var prop in cat) {
    console.log(prop);
}

그걸 사용해서.. 루프에서는 모든 열거 가능한 속성들을 반복할 수 있습니다.  위의 for loop는 cat 객체의 모든 열거 가능한 속성을 출력합니다.

자바스크립트는.. 루프에서는 열거 불가능한 속성이나 거짓으로 설정된 속성에 대해 반복하지 않습니다. 더 잘 이해하기 위해, Object.defineProperty 함수를 사용해 cat's name 속성을 false로 열거 가능하게 만들어 보겠습니다.

Object.defineProperty(cat, 'name', {
    enumerable: false
});

for (var prop in cat) {
    console.log(prop);
}

위 목록에서는 enumerable of name 속성을 false로 설정한 후, JavaScript for 루프를 사용해 속성에 반복했습니다. 출력에서는 JavaScript가 이름 속성을 누락한 것을 확인할 수 있으며, 아래 이미지와 같이 출력이 제공됩니다

자바스크립트는.. in loop는 객체의 모든 열거 가능한 속성에 반복하며, 그 속성이 자신의 속성이든 상속된 속성이든 상관없습니다.  예를 들어 보자.. 루프에서는 상속된 열거 가능 속성도 반환합니다. 나는 동물이라는 물체를 만들었어,

var animal= {
    color: "blue"
}

우리는 __proto__ 를 사용하여 동물 객체를 고양이 객체의 부모로 연결합니다. 그래서 아래 목록처럼 고양이 객체와 동물 객체 간에 상속을 생성하고 있습니다:

cat.__proto__ = animal;

이제 고양이 객체는 세 가지 열거 가능한 속성을 가집니다. 이 모드는 자체 연령 및 canRun 속성, 그리고 상속받은 색상 속성을 가지고 있습니다. 그래서... 루프에서는 고양이 객체의 age, canRun, color 속성을 출력합니다.

for (var prop in cat) {
    console.log(prop);
}

위에서.. 루프에서는 연령과 canRun 속성 외에 US 색상 속성을 출력합니다.

아래에는 위 논의에서 함께 사용된 전체 코드가 있습니다.

var animal= {
    color: "blue"
}

var cat= {
    name: 'foo',
    age: 12,
    canRun: function () {
        console.log("can run");
    }
}
cat.__proto__=animal;

Object.defineProperty(cat, 'name', {
    enumerable: false
});

for (var prop in cat) {
    console.log(prop);
}

그래서 요약할 수 있겠네요.. 다음 지점들에서 루프 안에 있습니다.

• 객체의 모든 열거 가능한 속성을 반환합니다
• 객체의 모든 상속된 열거 가능한 속성을 반환합니다
• 열거 불가능한 속성은 반환하지 않습니다

Object.keys를 사용해 모든 자체 열거 가능한 속성을 출력하기.

ECMA 5에서는 Object.keys()가 도입되었는데, 이는 자바스크립트 객체의 모든 열거 가능한 속성을 포함하는 배열을 반환합니다. 객체 자체의 속성만 반환합니다; 상속받은 재산은 반환하지 않습니다.

아래 목록과 같이 Objecy.keys를 사용해 cat 객체의 모든 열거 가능한 속성을 출력할 수 있습니다.

var cat= {

    name: 'foo',
    age: 12,
    canRun: function () {
        console.log("can run");
    }
}

console.log(Object.keys(cat));

객체의 모든 메서드 인쇄

객체의 모든 자체 메서드를 출력하는 다른 요구사항이 있을 수도 있습니다.  이를 위해 객체의 모든 자신의 메서드를 반환하는 함수를 만들자.

function getAllMethods(object) {
    return Object.getOwnPropertyNames(object).filter(function (p) {
            return typeof object[p]=='function';
        });
}

getAllMethods() 함수는 전달된 객체의 모든 메서드를 반환합니다. 다음 목록에 나타난 객체 cat이 있다고 가정해 봅시다.

var cat= {
    name: 'foo',
    age: 12,
    canRun: function () {
        console.log("can run");
    }
}

cat 객체의 메서드를 출력하려면 getAllMethods() 함수에 전달하고, function은 canRun 메서드를 반환합니다.

console.log(getAllMethods(cat));

출력에서 canRun이 출력된 것을 볼 수 있습니다.

결론

이 글에서는 객체 자체나 상속된 속성과 방법을 인쇄하거나 열거하는 다양한 방법에 대해 배웠습니다. 이 글이 도움이 되길 바랍니다. 읽어주셔서 감사합니다.