17-2. Object 오브젝트(ES5 기준) / Object에 프로퍼티 추가
defineProperty()
구분 | 데이터(값) |
---|---|
object | Object 오브젝트 |
파라미터 | 첫번째 파라미터: 대상 오브젝트 두번째 파라미터: 프로퍼티 이름 세번째 파라미터: 속성 |
반환 | 대상 오브젝트 |
- 대상 오브젝트에 프로퍼티 추가 또는 프로퍼티 속성 변경
프로퍼티마다 상태를 갖고 있음
- 상태란? 변경 / 삭제 / 열거 가능 여부
- 상태가 가능일 때만 처리할 수 있음
프로퍼티를 추가할 때 상태 결정
var obj = {}; Object.defineProperty(obj, "book", { value: "JS책", enumerable: true }) console.log(obj); // {book: "JS책"}
- 첫번째 파라미터에 프로퍼티를 추가할 오브젝트(obj) 작성
- 두번째 파라미터에 프로퍼티 이름(book) 작성
세번째 파라미터 {value: “JS책”}에서
- value는 프로퍼티 값을 나타내는 속성
- “JS책”은 value의 속성 값으로
- 위에처럼 프로퍼티 값이 됩니다.
{}
은 ES1.0에서 나왔습니다.
처음에 자바스크립트가 만들어 졌을 때부터 나왔던 것입니다.
{}
의 변경/삭제/열거의 디폴트 값은 true입니다.
그런데 defineProperty
는 ES5에서 나왔습니다.
여기선 변경/삭제/열거의 디폴트 값이 false입니다.
즉, {}
이걸로 만든 것과 defineProperty
이걸로 만든 것은 서로 반대입니다.
그래서 defineProperty
으로 만들었을 때 변경/삭제/열거를 true로 만드려면 반드시 정의를 해줘야됩니다.
디폴트가 false입니다.
이것을 어디다 사용할까요?
자바스크립트 소스는 소스가 오픈되지 않습니까?
오픈소스를 만들어 다른 사람들이 메소드를 활용해 오픈소스를 활용할 수 있게 합니다.
그런데 오픈소스이다보니까 데이터를 읽어하거나하는 경우가 생길 수도 있다.
ES5 이전까지만해도 이러한 속성들이 없었다.
하지만 ES5의 등장으로 데이터를 보호할 수 있게 되었다.
사실 데이터 보호가 주된 목적이다.
defineProperties()
구분 | 데이터(값) |
---|---|
object | Object 오브젝트 |
파라미터 | 첫번째 파라미터: 대상 오브젝트 두번째 파라미터: 프로퍼티 이름과 속성 |
반환 | 대상 오브젝트 |
다수의 프로퍼티를 추가하거나 속성 변경
함수 기능은
defineProperty()
와 같음var obj = {}; Object.defineProperties(obj, { soccer: { value: "축구", enumerable: true }, basketball: { value: "농구", enumerable: true } }); for (var name in obj) { console.log(name + ":" + obj[name]); } // soccer:축구 // basketball:농구
enumerable
이 둘 다true
로 설정했으므로 for in문으로 열거가 됩니다.
만약true
로 설정 안했다면 열거가 안됩니다.