JavaScript

[JavaScript] Object 속성, 값 관련 메서드

코북 2023. 7. 26. 13:40

1. Object.entries

  • 객체의 속성들을 [키, 값] 형태의 배열로 변환해 주는 메서드
  • 객체의 열거 가능한 속성들을 순회
  • 속성들의 순서 보장하지 않음
const person = {
  name: 'John',
  age: 30,
  occupation: 'Engineer'
};

const entries = Object.entries(person);
console.log(entries); // [  ["name", "John"], ["age", 30], ["occupation", "Engineer"]  ]

 

 위의 출력 결과처럼 'Object.etries' 메서드는 주어진 객체의 각 속성을 [키, 값] 형태의 배열로 변환하여 배열로 묶어 반환합니다. 이를 통해 객체의 속성들을 배열 형태로 순회하거나, 다른 배열과 합치는 등 다양한 용도로 사용할 수 있습니다.

 

 단, Object.entries 메서드는 객체의 속성들을 반환할 때, 일반적으로 속성들의 순서를 보장하지 않습니다. ES6 이후부터는 객체의 속성 순서가 일반적으로 추가된 순서대로 유지되는 경우가 많지만, 100% 보장하지는 않습니다. 특히 구형브라우저에서는 순서가 보장되지 않을 가능성이 높습니다.

 

대안 1. Map 자료구조 사용

const obj = { a: 1, b: 2, c: 3 };

// 객체를 Map으로 변환
const map = new Map(Object.entries(obj));

// 순서를 보장하며 순회
for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}

 

 순서를 보장해야 하는 경우에는 Object.entries 대신 Map을 사용하는 것이 좋습니다. Map은 키-값 쌍들의 순서를 보장하는 자료구조로, 속성들을 순서대로 저장하고 순회할 수 있습니다.

 

 

대안 2. sort 메서드 사용

 만약 객체들의 속성들을 정렬하여 순서를 보장하고 싶다면, sort 메서드를 사용해서 순서를 보장할 수 도 있습니다. 먼저 Object.entries를 사용하여 객체를 배열로 변환한 후에, 해당 배열을 sort 메서드를 사용하여 정렬하면 됩니다. 이렇게 정렬된 배열은 순서가 보장되는 배열이 됩니다.

const obj = { b: 2, c: 3, a: 1 };

// 객체를 배열로 변환하여 정렬
const sortedEntries = Object.entries(obj).sort((a, b) => a[0].localeCompare(b[0]));

// 정렬된 배열을 이용하여 순서대로 순회
for (const [key, value] of sortedEntries) {
  console.log(`${key}: ${value}`); // a:1 b:2 c:3
}

 

 위 코드에서는 객체 obj를 Object.entries를 사용하여 배열로 변환한 후, sort 메서드를 사용하여 속성들을 알파벳순으로 정렬하였습니다. 이렇게 정렬된 배열은 순서가 보장되므로, for ...of 문으로 순회하면 순서대로 속성들이 출력됩니다. 

 

 정렬에 사용되는 함수에 따라 다른 정렬 방식을 사용할 수 있으며, 위 예제에서는 알파벳 순으로 정렬하도록 localeCompare 함수를 사용하였습니다. 필요에 따라 다른 정렬 함수를 사용할 수 있습니다.

 

const obj = { 2: "b", 3: "c", 1: "a" };

const sortedEntries = Object.entries(obj).sort((a, b) => a[0]-b[0]).forEach(e => {
  console.log(`${e[0]}: ${e[1]}`); // 1:a 2:b 3:c
});

 

 

 

 

2. Object.keys

  • 객체들의 속성들의 키(key)들로 이루어진 배열을 반환
  • 속성들의 순서가 객체에 추가된 순서대로 유지하여 순서 보장
const obj = { a: 1, b: 2, c: 3 };

const keys = Object.keys(obj);
console.log(keys); // ["a", "b", "c"]

for(var item of obj){
  console.log(item); // "a" "b" "c"
}

 

 Object.keys() 메서드는 for ...of 문과 함께 사용하여 순회할 수 있습니다. 주로 객체의 속성들을 반복문으로 순회할 때 사용하거나, 객체의 속성 개수를 파악하는 등의 용도로 활용됩니다.

 

 

 

 

3. Object.values

  • 객체의 속성들의 값(value)들로 이루어진 배열을 반환
  • 속성들의 순서가 객체에 추가된 순서대로 유지하여 순서 보장
const obj = { a: 1, b: 2, c: 3 };

const values = Object.values(obj);
console.log(values); // [1, 2, 3]

for(var item of obj){
  console.log(item); // 1 2 3
}

  Object.values() 메서드는 Object.keys() 메서드와 마찬가지로 for ...of 문과 함께 사용하여 순회할 수 있습니다. 주로 객체의 값들을 반복문으로 순회할 때 사용하거나, 객체의 값들을 배열로 변환하는 등의 용도로 활용됩니다.

 

 

 

 

4. Object.hasOwnProperty

  • 주어진 객체가 특정 속성을 직접 소유하고 있는지를 확인
  • 상속된 속성, 프로토 타입 체인을 올라가는 속성들은 확인하지 않는다.
const obj = { a: 1, b: 2, c: 3 };

console.log(obj.hasOwnProperty('a')); // true
console.log(obj.hasOwnProperty('d')); // false

 

 

 

 

출처

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

저작자표시