심층 자바스크립트(5) -객체 프로퍼티 삭제 및 잠금기능-

객체를 생성한 후에는 값을 변경할 수도 있고, 삭제할 수도 있다. 객체는 기본적으로 CRUD(Create, Read, Update, Delete)를 할 수 있다. 객체를 생성하는 방법은 리터럴 방식과 오브젝트 방식 2가지가 있고, 읽는 방식은 지난 포스팅Object.keys()로 가능하다. 

객체를 삭제하는 방식은 가장 간단하다.문제는 Update 방법이다. 만일, 객체에 있는 프로퍼티 값을 무시하고, 덮어쓰는 방식이라면 객체명.프로퍼티명 = '값'으로 쉽게 해결할 수 있다. 

하지만 객체 내부의 데이터를 보호해야 하거나 특정 값을 읽지 못하게 만드는 식의 장치가 필요하다면 Object.defineProperty()방식을 사용해야 한다. 먼저 객체를 삭제하는 방법부터 알아보자.

1 객체 삭제

객체를 삭제하는 방식은 간단하다. 아래 예시를 보는 것만으로도 설명이 필요없을 정도다. 

---

let car = {

    name : '머스탱 72년식 429',

    power : '429마력',

    torque : '69kg'

}

let keys = Object.keys(car);

    for(let i=0; i<keys.length; i++){

          console.log(keys + '::' + keys[i] );

    }

//>>name :: 머스탱 72년식 429

//>>power :: 429마력

//>>torque :: 69kg

---

위의 car 객체에서 name을 삭제하려면 다음과 같이 코드를 한 줄 추가하면 된다. 

---

delete car.torque;

console.log(car.torque);

//>>undefined

---

"delete 객체명.프로퍼티명"을 입력하면 객체 프로퍼티를 언제든지 삭제할 수 있다. 하지만 이렇게 하고 싶지 않을 때는 Object.defineProperty( )를 사용해야 한다.

2 프로퍼티 속성 설정

자바스크립트 프로퍼티(속성) 설정은 다음 3가지로 통제할 수 있다. 

---

1) enumerable  

2) configurable

3) writable 

---

'enumerable'은 프로퍼티(속성)를 나열할 수 있는지 없는지를 설정한다. 

'configurable'은 프로퍼티 값을 변경할 수 있는지 없는지를 설정한다.

'writable'은 프로퍼티에 값을 저장할 수 있는지 여부를 설정한다.

자바스크립트에서는 객체를 지정할 때 일반적인 리터럴 방식을 사용하면 'enumerable', 'configurable', 'writable'값이 모두 'true'로 설정된다. 따라서 프로퍼티에 새 값을 지정하면 객체의 속성값이 그대로 변경되며, 삭제 명령을 내리면 삭제된다. 

만일, 객체를 생성한 후, 객체 내부의 값을 변경할 수 없도록 만들려면, 다음과 같이 객체를 만들어줘야 한다.

---

let car = {};

Object.defineProperty( car, "name",{

        value : "레인지로버2020"

});

---

"Object.defineProperty(객체명, '속성명', { value : 값} )"으로 객체 속성을 지정하면, delete명령이 수행되지 않고, update도 되지 않는다. 쉽게 생각하면, 객체 잠금상태가 된다. 이를 풀어주려면 다음과 같이 특정 부분을 true로 설정해야 한다.

---

Object.defineProperty(car, "name", {

        enumerable : true,

        configurable : true,

        writable : true,

        value : "포스머스탱 429"

});

---

enumerable, 나열을 잠금하는 아래 코드를 살펴보자. 

---

let car = {

     torque : '54kg',

     power : '438마력',

     brand : '람보르기니'

}

  let keys = Object.keys(car);

   for(let i=0; i<keys.length; i++){

        console.log(keys[i] + '=' + car[keys[i]]);

   }

 

// ① 객체 값이 3가지 속성을 지정

   Object.defineProperty( car,'name',{

            value : '디아블로',

           enumerable : true,

           configurable : true,

           writable : true

});

console.log(car.propertyIsEnumerable("name"));

//>> true ②나열이 가능한 상태

Object.defineProperty( car,'name',{

           enumerable : false //③나열불가 선언

});

   for(let i=0; i<keys.length; i++){

        console.log(keys[i] + '=' + car[keys[i]]);

        //>> name값은 나오지 않음

   }

    console.log(car.propertyIsEnumerable("name"));

//>>false  

---

①에서 enumerable, configurable, writable을 모두 true로 설정한다. 속성값을 나열할 수 있고②, 삭제와 수정이 가능한 상태다. 하지만 ③에서 enumerable값을 false로 지정하면 for문에서 name값이 나오지 않는다. 

위와 같은 방식으로 코드를 작성했을 때, configurable은 삭제가능 혹은 불가능으로 설정할 수 있고, writable은 덮어쓰기를 가능 or 불가능으로 설정할 수 있다. 

답이 미리 정해져 있는 퀴즈 프로그램과 같은 코드를 만들 경우에 해당 구문을 응요할 수 있고, 프론트에서 객체를 DB로 사용하는 경우는 극히 제한적이기 때문에(DB처리) 이런 설정이 가능하다는 정도로만 알아두자.