JavaScript 오브젝트 메서드 완벽 이해하기: Object.entries, Object.fromEntries

JavaScript 오브젝트 메서드 완벽 이해하기: Object.entries, Object.fromEntries

개요

이번 글에서는 JavaScript에서 오브젝트를 다룰 때 유용하게 사용되는 메서드들인 Object.keys, Object.values, Object.entries, 그리고 Object.fromEntries의 사용법에 대해 알아보겠습니다.

• Object.keys: 오브젝트의 키 목록을 배열로 반환
• Object.values: 오브젝트의 값 목록을 배열로 반환
• Object.entries: 오브젝트를 [키, 값] 쌍의 배열로 변환
• Object.fromEntries: [키, 값] 쌍의 배열을 오브젝트로 변환

특히 Object.entries와 Object.fromEntries는 자주 사용하지는 않지만, 유용할 때가 많아 매번 사용법을 잊어버리지 않기 위해 정리해둔 글입니다.

---

1. Object.keys

Object.keys는 주어진 오브젝트의 key-value 쌍 중 key만 추출하여 배열로 반환합니다.

const centralLeagueTeams = {
  "BayStars": { wins: 79, losses: 56, draw: 1 },
  "Dragons": { wins: 75, losses: 60, draw: 1 },
  "Giants": { wins: 73, losses: 62, draw: 0 },
  "Swallows": { wins: 66, losses: 69, draw: 0 },
  "Carp": { wins: 60, losses: 75, draw: 0 },
  "Tigers": { wins: 52, losses: 83, draw: 0 },
};

const teamNames = Object.keys(centralLeagueTeams);
// [ 'BayStars', 'Dragons', 'Giants', 'Swallows', 'Carp', 'Tigers' ]

teamNames.forEach((teamName) => console.log(teamName));
// BayStars
// Dragons
// Giants
// Swallows
// Carp
// Tigers

---

2. Object.values

Object.values는 주어진 오브젝트의 value들만 추출하여 배열로 반환합니다.

예시를 통해 살펴보겠습니다.

const values = Object.values(centralLeagueTeams);
// [
//   { wins: 79, losses: 56, draw: 1 },
//   { wins: 75, losses: 60, draw: 1 },
//   { wins: 73, losses: 62, draw: 0 },
//   { wins: 66, losses: 69, draw: 0 },
//   { wins: 60, losses: 75, draw: 0 },
//   { wins: 52, losses: 83, draw: 0 }
// ]

Object.values로 값을 추출한 후, 필요한 작업을 수행할 수 있습니다.

const totalGameCounts = Object.values(centralLeagueTeams).reduce((sum, results) => {
    return sum + results.wins + results.losses + results.draw;
}, 0);

console.log(`1998년의 총 경기 수: ${totalGameCounts / 2}`);

---

3. Object.fromEntries

Object.fromEntries는 [키, 값] 쌍의 배열을 오브젝트로 변환하는 메서드입니다.

간단한 예시를 보겠습니다.

const centralLeagueTeams = [
  ["BayStars", 79],
  ["Dragons", 75],
  ["Giants", 73],
  ["Swallows", 66],
  ["Carp", 60],
  ["Tigers", 52],
];

// 배열을 오브젝트로 변환
console.log(Object.fromEntries(centralLeagueTeams));
// {
//   BayStars: 79,
//   Dragons: 75,
//   Giants: 73,
//   Swallows: 66,
//   Carp: 60,
//   Tigers: 52
// }

다음은 map이나 filter로 데이터를 가공한 후 Object.fromEntries로 오브젝트를 재구성하는 예시입니다.

const allBaseballTeams = [
  { name: "BayStars", wins: 79, league: "Central" },
  { name: "Dragons", wins: 75, league: "Central" },
  { name: "Giants", wins: 73, league: "Central" },
  { name: "Swallows", wins: 66, league: "Central" },
  { name: "Carp", wins: 60, league: "Central" },
  { name: "Tigers", wins: 52, league: "Central" },
  { name: "Lions", wins: 80, league: "Pacific" },
  { name: "Hawks", wins: 78, league: "Pacific" },
  { name: "Buffaloes", wins: 76, league: "Pacific" },
  { name: "Eagles", wins: 70, league: "Pacific" },
  { name: "Fighters", wins: 65, league: "Pacific" },
  { name: "Marines", wins: 60, league: "Pacific" },
];

const centralLeagueTeamNameToWins = Object.fromEntries(
  allBaseballTeams.filter(team => team.league === "Central")
                  .map(team => [team.name, team.wins])
);
console.log(centralLeagueTeamNameToWins);
// {
//   BayStars: 79,
//   Dragons: 75,
//   Giants: 73,
//   Swallows: 66,
//   Carp: 60,
//   Tigers: 52
// }

---

4. Object.entries

Object.entries는 Object.fromEntries의 반대 역할을 합니다. 오브젝트의 key-value 쌍을 [key, value] 형태의 배열로 변환해줍니다.

const teamWins = {
  BayStars: 79,
  Dragons: 75,
  Giants: 73,
  Swallows: 66,
  Carp: 60,
  Tigers: 52
};

console.log(Object.entries(teamWins));
// [
//   [ 'BayStars', 79 ],
//   [ 'Dragons', 75 ],
//   [ 'Giants', 73 ],
//   [ 'Swallows', 66 ],
//   [ 'Carp', 60 ],
//   [ 'Tigers', 52 ]
// ]

이렇게 변환된 배열은 map이나 filter 같은 배열 메서드를 사용할 수 있어 가공하기가 편리합니다.

const filteredTeams = Object.entries(teamWins)
  .filter(([team, wins]) => wins >= 75)
  .map(([team]) => team);

console.log(filteredTeams); // [ 'BayStars', 'Dragons' ]

Object.entries와 Object.fromEntries를 함께 사용하면, 특정 조건에 맞는 오브젝트 요소를 필터링하고 새로운 오브젝트를 쉽게 만들 수 있습니다.

const filteredTeams = Object.entries(teamWins)
  .filter(([team, wins]) => wins >= 75);

console.log(filteredTeams); // [ [ 'BayStars', 79 ], [ 'Dragons', 75 ] ]

const newTeamWins = Object.fromEntries(filteredTeams);
console.log(newTeamWins); // { BayStars: 79, Dragons: 75 }

---

정리

이번 글에서는 JavaScript에서 오브젝트를 다룰 때 유용하게 사용할 수 있는 Object.keys, Object.values, Object.entries, Object.fromEntries 메서드에 대해 알아봤습니다. 이 메서드들을 활용하면 오브젝트 데이터를 더욱 효과적으로 가공하고 변환할 수 있습니다.