JavaScript에서 객체를 열거(enumerate)하는 다양한 방법 중 몇 가지 주요 메서드들을 정리하려고 한다. 이 정도 메서드들은 문제없이 바로바로 쓰고 차이점은 알 수 있도록 익숙해져야지 (제발!)
1. for...in 루프
- 객체의 모든 열거 가능한 속성을 순회
- 객체 자체의 속성뿐만 아니라 프로토타입 체인을 통해 상속받은 속성도 순회가 가능하다
const object = {a: 1, b: 2, c: 3};
for (const key in object) {
console.log(key, object[key]);
}
2. Object.keys()
- 주어진 객체의 자체 열거 가능한 속성의 이름들을 배열로 반환. (상속받은 속성은 제외)
const object = {a: 1, b: 2, c: 3};
Object.keys(object).forEach(key => {
console.log(key, object[key]);
});
3. Object.values()
- 주어진 객체의 자체 열거 가능한 속성의 값들을 배열로 반환 (상속받은 속성은 제외)
const object = {a: 1, b: 2, c: 3};
Object.values(object).forEach(value => {
console.log(value);
});
4. Object.entries()
- 주어진 객체 자체의 모든 열거 가능한 문자열 속성의 [키, 값] 쌍의 배열을 반환 (상속받은 속성은 제외)
const object = {a: 1, b: 2, c: 3};
Object.entries(object).forEach(([key, value]) => {
console.log(key, value);
});
5. Object.getOwnPropertyNames()
- 객체의 모든 속성 이름을 포함하는 배열을 반환
- 🚨 열거 가능 여부에 관계없이 🚨 객체에 있는 모든 속성 이름을 포함
const object = {a: 1, b: 2, c: 3};
console.log(Object.getOwnPropertyNames(object));
6. Reflect.ownKeys()
- 객체의 모든 키(열거 가능한 속성, 열거 불가능한 속성, 심볼 속성 포함)를 포함하는 배열을 반환
const object = {a: 1, b: 2, c: 3, [Symbol('d')]: 4};
console.log(Reflect.ownKeys(object));
끝.
반응형
'Frontend > javascript' 카테고리의 다른 글
[javascript] 생성자 함수는 어떤 과정으로 인스턴스를 생성할까? (2) | 2024.04.25 |
---|---|
[javascript] 생성자 함수에 의한 객체 생성 - 언제 필요하고 어떻게 사용하는가? (0) | 2024.04.18 |
[javascript] this 개념과 this 바인딩 이해하기 (5) | 2024.04.11 |
자바스크립트 객체 프로퍼티 이해하기 2. [프로퍼티 정의] (0) | 2024.04.01 |
자바스크립트 객체 프로퍼티 이해하기 1. [내부 슬롯 & 내부 메서드 ] (0) | 2024.03.24 |
댓글