Object.entries()로 객체 순회 리팩토링

배경

레거시 코드베이스에서 객체를 순회하며 key-value를 다루는 로직이 많았다. 대부분 Object.keys()를 사용하거나 for-in 루프를 돌렸는데, ES2017에 추가된 Object.entries()를 사용하면 더 깔끔하게 작성할 수 있다는 걸 알게 됐다.

기존 방식

const user = { name: 'John', age: 30, role: 'developer' };

// Object.keys() 사용
Object.keys(user).forEach(key => {
  const value = user[key];
  console.log(`${key}: ${value}`);
});

// for-in 사용
for (let key in user) {
  if (user.hasOwnProperty(key)) {
    console.log(`${key}: ${user[key]}`);
  }
}

Object.entries() 적용

const user = { name: 'John', age: 30, role: 'developer' };

Object.entries(user).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

// Map 변환도 간단
const userMap = new Map(Object.entries(user));

// 필터링과 조합
const filtered = Object.entries(user)
  .filter(([key, value]) => typeof value === 'string')
  .map(([key, value]) => `${key}: ${value}`);

실전 적용 사례

API 응답 데이터를 정규화하는 유틸 함수를 리팩토링했다.

// Before
function normalizeResponse(data) {
  const result = {};
  Object.keys(data).forEach(key => {
    const value = data[key];
    if (value !== null && value !== undefined) {
      result[key] = value;
    }
  });
  return result;
}

// After
function normalizeResponse(data) {
  return Object.entries(data)
    .filter(([_, value]) => value != null)
    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
}

주의사항

• IE11에서는 polyfill 필요
• Symbol 프로퍼티는 포함되지 않음
• 프로토타입 체인의 프로퍼티도 제외됨

배열 디스트럭처링과 함께 사용하면 가독성이 크게 향상된다. 앞으로 객체 순회 시 기본 선택지로 사용할 예정이다.