[javascript] 객체 순회 중 새로운 속성 추가하기

자바스크립트에서 객체를 순회하면서 새로운 속성을 추가하는 방법에 대해 알아보겠습니다.

방법 1: for…in 루프

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    obj[key + '_new'] = obj[key] * 2;
  }
}
console.log(obj); 

위 코드에서 for...in 루프를 사용하여 객체의 속성을 하나씩 순회하며 hasOwnProperty 메소드를 이용하여 객체 자체의 속성인지를 확인한 후에 새로운 속성을 추가했습니다.

방법 2: Object.keys 메소드

const obj = { a: 1, b: 2, c: 3 };
Object.keys(obj).forEach(key => {
  obj[key + '_new'] = obj[key] * 2;
});
console.log(obj);

Object.keys 메소드를 사용하여 객체의 키 배열을 가져온 후 forEach 메소드를 이용하여 각 키에 새로운 속성을 추가했습니다.

방법 3: Object.entries 메소드

const obj = { a: 1, b: 2, c: 3 };
Object.entries(obj).forEach(([key, value]) => {
  obj[key + '_new'] = value * 2;
});
console.log(obj);

Object.entries 메소드를 사용하여 객체의 [키, 값] 배열을 가져온 후 forEach 메소드를 이용하여 각 키와 값을 이용하여 새로운 속성을 추가했습니다.

각 방법 모두 객체를 순회하면서 새로운 속성을 추가할 수 있지만, 일부 브라우저에서는 hasOwnProperty를 확인하지 않으면 상속된 속성까지 순회할 수 있으므로 주의가 필요합니다.

참고 자료: MDN Web Docs