JavaScript - 객체의 속성 추가 / 제거

객체에 미리 속성을 넣지않고 빈 객체인 상태로 선언을 하고 동적으로 객체에 속성을 추가하거나 제거할 수 있다.

// cart를 식별자로 하는 빈 객체를 선언 let cart={};          // 동적으로 cart 객체에 속성을 추가 cart.item1='MSI Gaming Laptop'; cart.item2='SAMSUNG Galaxy S10+'; cart.item3='Apple iPhone X'; cart.item4='Geforce RTX 2080';          // 메서드도 추가 가능하다. cart.show = function () {       let result = '';       for(let key in this) { // 메서드는 출력되지 않게 만든다.           if(key != 'show') {               result += key + '\t' + this[key] + '\n';           }       }       return result; }; alert(cart.show());   // delete 키워드는 객체의 속성을 제거 delete(cart.item1);   // 한번더 호출하면 item1이 제거된 것을 확인 가능 alert(cart.show());

파란색으로 표시된 부분이 객체에 속성을 추가하는 과정이고, 일반적인 속성뿐만 아니라 메서드도 같은 방법으로 추가될 수 있다. 제거는 delete 키워드를 통해 사용가능하다. 빨간색으로 표시된 부분이 객체에 속성을 제거하는 과정이다. delete 키워드를 전후로 alert로 출력되는 것을 보면 나중에 출력되는 곳에 item1 키가 제거가 된 것을 알 수 있다.

// 객체 선언 let object={       John : 20000,       Jane : 10000,       Alan : 7500, };          // 일반 속성 추가 object.Fran = 17500; object.Urke = 12000;          // 첫 번째 메서드 추가 object.sum = function(){       let total=0;       for(let key in object){           if(key != 'sum' && key != 'page'){               total+=object[key];           }       }       return total; }; alert(object.sum());         // 두 번째 메서드 추가 object.page = function(){       let script='';       for(let key in object){           if(key != 'page' && key != 'sum'){               script+=key + '\t' + object[key] + '\n';           }       }       return script; }; alert(object.page());

메서드도 여러개가 추가가 되도 문제가 없다.

객체의 속성 추가&제거.html

0.00MB