[Javascript] Object.entries() 메서드

 

entries() 메서드란?

entries() 메서드는 자바스크립트에서 객체나 컬렉션의 key-value 쌍을 배열로 반환하는 유용한 도구입니다. 이 메서드를 사용하면 데이터 구조의 내용을 쉽게 순회하고 조작할 수 있습니다.

 

객체 메서드 삼형제

• Object.entries() : 객체의 키와 값을 쌍으로 묶어 배열로 반환합니다.
• Object.keys(): 객체의 키만 배열로 반환합니다.
• Object.values(): 객체의 값만 배열로 반환합니다.

const obj = { a: 1, b: 2, c: 3 };
console.log(Object.keys(obj)); // ['a', 'b', 'c']
console.log(Object.values(obj)); // [1, 2, 3]
console.log(Object.entries(obj)); // [['a', 1], ['b', 2], ['c', 3]]

 

주요 용도

1. 객체에서의 사용법

객체의 모든 열거 가능한 속성을 [key, value] 쌍의 배열로 가져옵니다.

const person = { name: 'yundogi', age: 26, job: 'UX Engineer' };
const entries = Object.entries(person);
console.log(entries); // [['name', 'yundogi'], ['age', 26], ['job', 'UX Engineer']]

// 객체의 모든 키-값 쌍 출력하기
entries.forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

2. 배열에서의 사용법

배열의 각 index와 value를 쌍으로 하는 새로운 Array Iterator 객체를 반환합니다.

const fruits = ['apple', 'banana', 'orange'];
const iterator = fruits.entries();

for (const [index, value] of iterator) {
  console.log(`${index}: ${value}`); // 0: apple, 1: banana, 2: orange
}

// 배열의 홀수 인덱스 요소만 추출하기
const oddIndexedFruits = [...fruits.entries()]
  .filter(([index]) => index % 2 !== 0)
  .map(([, value]) => value);
console.log(oddIndexedFruits); // banana

3. Map 객체에서의 사용법

Map 객체의 각 key와 value를 쌍으로 하는 새로운 Map Iterator 객체를 반환합니다.

const map = new Map();
map.set('name', 'yundogi');
map.set('age', 26);
map.set('job', 'UX Engineer');

const mapEntries = map.entries();
console.log(mapEntries.next().value); // ['name', 'yundogi']

// Map의 모든 키-값 쌍을 배열로 변환하기
const entriesArray = Array.from(mapEntries);
console.log(entriesArray); // [['age', 26], ['job', 'UX Engineer']]

 

활용 예시

1. 객체를 쿼리 문자열로 변환하기

const params = { limit: 10, offset: 0, order: 'asc' };
const queryString = Object.entries(params)
  .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
  .join('&');
console.log(queryString); // limit=10&offset=0&order=asc

2. 객체의 키와 값 뒤집기

const original = { a: 1, b: 2, c: 3 };
const inverted = Object.fromEntries(
  Object.entries(original).map(([key, value]) => [value, key])
);
console.log(inverted); // { '1': 'a', '2': 'b', '3': 'c' }