🧩 JavaScript `Object.entries()` 사용 시점과 예시 정리

Object.entries(obj)는 객체(Object)를 [key, value] 형태의 배열로 변환할 때 사용합니다.
즉, 객체를 배열처럼 순회하거나 가공해야 할 때 매우 유용한 메서드입니다.

🧩 기본 개념

const user = {
  name: "홍길동",
  age: 30,
  job: "개발자"
};

const entries = Object.entries(user);

console.log(entries);

출력 결과 👇

[
  ["name", "홍길동"],
  ["age", 30],
  ["job", "개발자"]
]

즉, 객체 → 2차원 배열로 변환됩니다.
이 구조 덕분에 map(), filter(), for...of 등을 사용할 수 있습니다.

🧠 사용해야 하는 경우 정리

1️⃣ 객체를 반복 처리할 때

const user = { name: "Tom", age: 25, job: "개발자" };

for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}

출력:

name: Tom
age: 25
job: 개발자

💡 객체는 직접 for...of로 돌릴 수 없지만,
Object.entries()로 바꾸면 배열처럼 순회가 가능합니다.

2️⃣ 객체를 배열 메서드로 변환해서 처리할 때

예: 객체의 값을 모두 대문자로 변환

const user = { name: "Tom", job: "developer" };

const upper = Object.entries(user).map(([key, value]) => [key, value.toUpperCase()]);

console.log(upper);
// [["name", "TOM"], ["job", "DEVELOPER"]]

다시 객체로 복원하기 👇

const result = Object.fromEntries(upper);
console.log(result);
// { name: "TOM", job: "DEVELOPER" }

💡 entries + fromEntries 조합은 객체 ↔ 배열 간 변환의 핵심 패턴입니다.

3️⃣ 특정 조건으로 객체 필터링할 때

예: value가 숫자인 속성만 남기기 👇

const data = { a: 1, b: "hello", c: 3, d: true };

const numbers = Object.fromEntries(
  Object.entries(data).filter(([key, value]) => typeof value === "number")
);

console.log(numbers);
// { a: 1, c: 3 }

💡 entries + filter + fromEntries 조합은 객체 데이터를 정제(clean-up)할 때 자주 사용됩니다.

4️⃣ React에서 key-value 데이터 렌더링할 때

const user = { name: "Jane", age: 29, city: "Seoul" };

function UserInfo() {
  return (
    <ul>
      {Object.entries(user).map(([key, value]) => (
        <li key={key}>
          <strong>{key}</strong>: {value}
        </li>
      ))}
    </ul>
  );
}

💡 React에서 Object.entries()는 객체 데이터를 리스트 UI로 바꿀 때 유용합니다.

5️⃣ 키 이름을 바꿔야 할 때

예: 서버에서 받은 데이터의 키 이름이 snake_case일 경우 👇

const serverData = { first_name: "Tom", last_name: "Lee" };

const camelData = Object.fromEntries(
  Object.entries(serverData).map(([key, value]) => [
    key.replace(/_([a-z])/g, (_, c) => c.toUpperCase()), // snake → camel
    value
  ])
);

console.log(camelData);
// { firstName: "Tom", lastName: "Lee" }

💡 데이터 구조를 변환하거나 키 이름을 가공할 때도 활용 가능합니다.

✅ 요약 — Object.entries(obj)를 써야 할 때

🔚 마무리

Object.entries()는 단순한 “객체 → 배열 변환기”가 아니라,
객체를 유연하게 순회하고 조작할 수 있도록 해주는 핵심 도구입니다.
데이터 필터링, 구조 변환, UI 렌더링 등 실제 개발에서 자주 활용되는 필수 메서드입니다 🚀