본문 바로가기
Frontend/javascript

자바스크립트 객체 순회 메서드 : for...in / Object.keys() / Object.values() / Object.entries() / Object.getOwnPropertyNames() / Reflect.ownKeys()

by Lizzie Oh 2024. 3. 28.

 

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));

 

 

 

끝. 

반응형

댓글