[JS] 자바스크립트 객체 프로퍼티 생성, 삭제 방법

# 프로퍼티/메서드 동적 생성

자바스크립트는 객체 생성이 완료된 후에도, 프로퍼티나 메서드를 추가할 수 있다.

 

1.  객체.신규key =  값 or 메서드  : 마침표(dot notation)를 이용해 신규 프로퍼티를 만들 수 있다.

//myObj 객체 생성
var myObj = {
    prop_01: 1,
    method_01: function(){return 'func_01';}
};


//prop_02 프로퍼티, method_02 메서드 생성
myObj.prop_02 = 2;
myObj.method_02 = function(){return 'func_02'};


//생성 확인
console.log(myObj);
/*
{ prop_01: 1,
  method_01: [Function: method_01],
  prop_02: 2,
  method_02: [Function] }
*/

* prop_02 프로퍼티, method_02 메서드가 추가되었다

 

 

2.  객체['신규key'] = 값 or 메서드  : 대괄호[] 안에는 반드시 '문자열' 값을 넣어여 한다.

//prop_03프로퍼티, method_03메서드 생성
myObj['prop_03'] = 3;
myObj['method_03'] = function(){return 'func_03'};


//생성 확인
console.log(myObj);
/*
{ prop_01: 1,
  method_01: [Function: method_01],
  prop_02: 2,
  method_02: [Function],
  prop_03: 3,
  method_03: [Function] }
  */

* prop_03 프로퍼티, method_03 메서드가 추가되었다

 

# 동적 프로퍼티/메서드 삭제

delete 연산자를 사용하면, 객체의 프로퍼티나 메서드를 제거할 수 있다.

 

1.  delete 객체.key  : 도트(.) 접근법을 이용해 프로퍼티를 삭제한다.

//prop_03, method_03 삭제
delete myObj.prop_03;
delete myObj.method_03;


//삭제 확인
console.log(myObj);
/*
{ prop_01: 1,
  method_01: [Function: method_01],
  prop_02: 2,
  method_02: [Function] }
  */

* prop_03 프로퍼티, method_03 메서드가 삭제되었다.

2.  delete 객체['key']  : [] 접근법를 이용해 프로퍼티를 삭제한다.

//prop_02, method_02 삭제
delete myObj['prop_02'];
delete myObj['method_02'];


//삭제 확인
console.log(myObj);

* prop_02 프로퍼티, method_02 메서드가 삭제되었다.

---

▶ 관련 글 참고

[JS] 자바스크립트 객체 생성, 접근 방법