[JavaScript]객체의 키 이름 변경하는 방법

객체의 키 이름 변경하는 방법

이번 포스팅은 JavaScript에서 객체의 키 이름을 변경하는 몇 가지 방법을 소개합니다. 

---

방법 1. 새로운 키 추가 후 기존 키 제거

객체의 키 이름을 변경하는 기본적인 방법은 기존 키를 새로운 키에 할당하고 기존 키를 제거하는 것입니다.

 

다음 예제는 Person 객체의 Money 프로퍼티를 salary 프로퍼티에 할당 후 delete 연산자를 사용하여 money 프로퍼티를 제거합니다.

const Person = {
  name: '둘리',
  age: 20,
  money: 20000
};

// 이름 변경 전
console.log(Person); // {name: '둘리', age: 20, money: 20000}

// money 프로퍼티를 salary 프로퍼티에 할당
Person.salary = Person.money;

// 기존 프로퍼티 제거
delete Person.money;

// 이름 변경 후 
console.log(Person); // {name: '둘리', age: 20, salary: 20000}

 

점(.) 표기법은 다음 예제처럼 대괄호([]) 표기법으로 변경할 수 있습니다. 

const Person = {
  name: '둘리',
  age: 20,
  money: 20000
};

// 이름 변경 전
console.log(Person); // {name: '둘리', age: 20, money: 20000}

// money 프로퍼티를 salary 프로퍼티에 할당
Person['salary'] = Person['money'];

// 기존 프로퍼티 제거
delete Person['money'];

// 이름 변경 후 
console.log(Person); // {name: '둘리', age: 20, salary: 20000}

---

방법 2. Object의 assign 메서드

두 번째 방법으로 Object 객체에서 제공하는 assign() 메서드를 사용하여 객체 키의 이름을 변경할 수 있습니다.

 

Object.assign() 메서드는 두 번째 매개변수로 전달된 객체에서 열거 가능한 모든 프로퍼티를 복사 후 첫 번째 매개변수에 붙여 넣습니다.

 

Object.assign() 메서드의 반환 결과는 붙여 넣기가 적용된 첫 번째 매개변수입니다.

const numObj1 = { one: 1, two: 2 }
const numObj2 = { one: 10, three: 3}

Object.assign(numObj1, numObj2);

console.log(numObj1); // {one: 10, two: 2, three: 3}

 

객체 키의 이름을 변경하기 위해 첫 번째 매개변수에 기존 객체를 전달하고 두 번째 매개변수에 새로운 키를 전달합니다. 그다음 delete 연산자와 대괄호 표기법을 사용하여 기존 키를 제거합니다.

 

다음 예제는 Person 객체에 salary 프로퍼티를 추가하고 delete 연산자와 대괄호 표기법으로 기존 프로퍼티인 money를 제거합니다.

const Person = {
  name: '둘리',
  age: 20,
  money: 20000
};

// 이름 변경 전
console.log(Person); // {name: '둘리', age: 20, money: 20000}

delete Object.assign(Person, {salary: Person.money})['money'];

// 이름 변경 후 
console.log(Person); // {name: '둘리', age: 20, salary: 20000}

---

방법 3. 기존 프로퍼티의 특징을 적용

JavaScript에서 객체의 프로퍼티는 writable, enumerable, configurable 세 가지 특징을 가지고 있습니다.

 

세 가지 특징을 확인하려면 Object.getOwnPropertyDescriptor() 메서드를 호출합니다.

 

다음 예제는 Person 객체의 name 프로퍼티 특징을 출력합니다.

const Person = {
  name: '둘리',
  age: 20,
  money: 20000
};

console.log(Object.getOwnPropertyDescriptor(Person, 'name'));
// {value: '둘리', writable: true, enumerable: true, configurable: true}

실행 결과에서 확인할 수 있듯이 세 가지 특징은 기본적으로 true입니다.

 

프로퍼티의 특징을 변경하고 싶다면, Object.defineProperty() 메서드를 호출합니다.

 

다음 예제는 money 프로퍼티의 configurable 특징을 false로 변경합니다. 참고로 configurable 특징을 false로 설정하면 해당 프로퍼티는 삭제 불가능합니다.

const Person = {
  name: '둘리',
  age: 20,
  money: 20000
};

// 변경 전
console.log(Object.getOwnPropertyDescriptor(Person, 'name'));
// {value: '둘리', writable: true, enumerable: true, configurable: true}

Object.defineProperty(Person, 'name', {writable: false});

// 변경 후
console.log(Object.getOwnPropertyDescriptor(Person, 'name'));
// {value: '둘리', writable: true, enumerable: true, configurable: false}

 

그렇다면, money 프로퍼티의 configurable 특징을 false로 변경 후 위에서 소개한 방법으로 키를 salary로 변경하면 어떻게 될까요?

 

[방법 1. 새로운 키 추가 후 기존 키 제거]

const Person = {
  name: '둘리',
  age: 20,
  money: 20000
};

// money 프로퍼티의 configurable 특징을 false로 변경
Object.defineProperty(Person, 'money', {configurable: false});

// 이름 변경 전
console.log(Person); // {name: '둘리', age: 20, money: 20000}

// money 프로퍼티를 salary 프로퍼티에 할당
Person['salary'] = Person['money'];

// 기존 프로퍼티 제거
delete Person['money'];

// 이름 변경 후 
console.log(Person); // {name: '둘리', age: 20, money: 20000, salary: 20000}

[방법 2. Object의 assign() 메서드]

const Person = {
  name: '둘리',
  age: 20,
  money: 20000
};

// money 프로퍼티의 configurable 특징을 false로 변경
Object.defineProperty(Person, 'money', {configurable: false});

// 이름 변경 전
console.log(Person); // {name: '둘리', age: 20, money: 20000}

delete Object.assign(Person, {salary: Person.money})['money'];

// 이름 변경 후 
console.log(Person); // {name: '둘리', age: 20, money:20000, salary: 20000}

money 프로퍼티가 제거되지 않고 계속 남아있는 문제가 발생합니다.

 

따라서, 기존 프로퍼티의 특징을 적용하면서 객체 키의 이름을 변경하고 싶다면, 새로운 객체를 생성하는 방법으로 변경해야 합니다.

 

다음 예제는 객체의 구조 분해와 나머지 파라미터를 사용하여 키의 이름이 변경된 새로운 객체를 생성 후 이름이 변경된 프로퍼티의 특징을 변경합니다.

const Person = {
  name: '둘리',
  age: 20,
  money: 20000
};

// money 프로퍼티의 configurable 특징을 false로 변경
Object.defineProperty(Person, 'money', {configurable: false});

// 구조분해와 나머지 프로퍼티를 사용하여 키 이름 변경
const {money:salary, ...rest} = Person;
const updatePerson = {salary, ...rest};

console.log(updatePerson);
 
// salary 프로퍼티의 configurable 특징
console.log(Object.getOwnPropertyDescriptor(updatePerson, 'salary'));

// salary 프로퍼티의 configurable 특징을 Person.money와 동일하게 변경
Object.defineProperty(
  updatePerson,
  'salary',
  Object.getOwnPropertyDescriptor(Person, 'money')
);

// salary 프로퍼티의 configurable 특징
console.log(Object.getOwnPropertyDescriptor(updatePerson, 'salary'));

[실행 결과]