티스토리 뷰
자바스크립트에서 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 : 설명이 검색될 속성명
속성값에 해당하는 속성 설명자를 반환한다.
기술자(descriptor)란?
객체로 표현되는 속성 기술자(Property descriptors)는 두 가지 타입으로 되어있다.
데이터 기술(data descriptors) 또는 데이터 접근기술(accessor descriptors)이다.
데이터 기술에는 value속성이 있고 읽기전용인지 쓸 수 있는지를 나타내는 writable속성을 추가적으로 포함할 수도 있다.
데이터 접근기술은 getter-setter쌍의 함수로 기술된다.
속성기술자에서는 반드시 이 두 가지 타입 중 한 가지로 기술되어야한다; 동시에 두 가지 타입을 기술할 수는 없다.
'[개발] Front-End' 카테고리의 다른 글
[Javascript] Object 객체 활용하기 (0) | 2021.06.05 |
---|---|
[Javascript] Array.prototype 함수 활용하기 (0) | 2021.06.03 |
[Javascript] Blob객체로 CSV 파일 다운로드 (0) | 2021.06.02 |
[Javascript] FileReader 객체로 파일 읽기 (0) | 2021.06.01 |
How to use Highcharts.js in front-end (0) | 2019.07.25 |