본문 바로가기
개발/Front-End

[javascript] Object name 변경하기

by Devsong26 2021. 6. 4.

자바스크립트에서 Object의 value를 유지한 채로 name값을 변경해야 하는 경우가 있다.

 

구글링을 해서 확인해보니 아래의 링크에 답이 있었다.

https://stackoverflow.com/questions/4647817/javascript-object-rename-key

 

 

const OBJECT = { 	"NAME" : "DEVSONG" };  
console.log(OBJECT);  
const NEW_NAME = "NICKNAME"; 
const OLD_NAME = "NAME";  
Object.defineProperty( 	
	OBJECT, NEW_NAME,  	
    Object.getOwnPropertyDescriptor(OBJECT, OLD_NAME) 
);  
delete OBJECT[OLD_NAME]; //NEW_NAME과 OLD_NAME이 둘 다 존재하기하기 때문에 delete로 OLD_NAME을 삭제하여야 한다.  
console.log(OBJECT); 

 

 

1. Object.defineProperty(obj, prop, descriptor);

obj : 속성을 정의하고자 하는 객체prop : 새로 정의하거나 수정하고자 하는 속성의 이름

descriptor :새로 정의하거나 수정하려는 속성에 대해 기술하는 객체.

 

객체에 직접 새로운 속성을 정의하거나 이미 존재하는 객체를 수정한 뒤 그 객체를 반환한다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

 

2. Object.getOwnPropertyDescriptor(obj, prop);

obj : 속성을 찾을 대상 객체

prop : 설명이 검색될 속성명

 

속성값에 해당하는 속성 설명자를 반환한다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor

 

기술자(descriptor)란?

객체로 표현되는 속성 기술자(Property descriptors)는 두 가지 타입으로 되어있다. 

데이터 기술(data descriptors) 또는 데이터 접근기술(accessor descriptors)이다. 

데이터 기술에는 value속성이 있고 읽기전용인지 쓸 수 있는지를 나타내는 writable속성을 추가적으로 포함할 수도 있다. 

데이터 접근기술은 getter-setter쌍의 함수로 기술된다. 

속성기술자에서는 반드시 이 두 가지 타입 중 한 가지로 기술되어야한다; 동시에 두 가지 타입을 기술할 수는 없다.

https://stackoverflow.com/questions/9167181/what-is-a-descriptorhttps://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty