ecmascript_4_1

오퍼레이션

Object에 같은 key 사용

• ES5: strict 모드에서는 에러가 발생
• ES6: strict 모드와 관계없이 에러가 발생하지 않으면 나중에 작성된 값으로 대체됨

let sameKey = { one: 1, one: 2};
console.log(sameKey); // Object {one: 2}

변수 이름으로 값 설정

let one = 1, two = 2;
let values = { one, two };
console.log(values); // Object {one: 1, two: 2}

Object에 function 작성

// ES5
var obj = {
  getTotal: function(param) {
    return param;
  }
}

// ES6
let obj = {
  getTotal() {
    return param;
  }
}

디스크립터

ES5에 Object 클래스에는 프로퍼티 디스크립터가 추가되었다.
Data 타입

• value: 프로퍼티 값으로 사용
• get: 프로퍼티에 접근할 때 호출되는 함수
• set: 프로퍼티에 값을 할당할 때 호출되는 함수 Access 타입
• enumerable: 프로퍼티의 열거 가능여부 설정
• configurable: 프로퍼티의 삭제 가능여부 설정
• writable: 프로퍼티의 쓰기 가능여부 설정

var obj = {};
// 이 메소드로 객체의 Property를 새로 정의하거나 property descriptor를 변경할 수 있다. 
// 데이터 타입과 액세스 타입의 속성을 같이 작성하면 에러가 발생한다.
Object.defineProperty( obj, "value", {
  value: true,
  writable: false,
  enumerable: true,
  configurable: true
});

(function(){
  var name = "John";

  Object.defineProperty( obj, "name", {
    get: function(){ return name; },
    set: function(value){ name = value; }
  });
})();

console.log( obj.value ); // true
console.log( obj.name ); // John

obj.name = "Ted";

console.log( obj.name ); // Ted

for ( var prop in obj ) {
  console.log( prop ); // value, name
}

obj.value = false; // Exception if in strict mode

Object.defineProperty( obj, "value", {
  writable: true,
  configurable: false
});

obj.value = false;
console.log( obj.value ); // false
delete obj.value; // Exception

getter, setter

ES5의 getter와 setter는 access descriptor를 수정해야하는 제한적인 접근이다.
따라서 ES6에서는 보다 직관적으로 getter와 setter를 정의할 수 있다.

// ES5 getter
var obj = {};
Object.defineProperty(obj, "book", {
  get: function(){
    return "책";
  }
});
console.log(obj.book) // 책

// ES5 setter
var obj = {};
Object.defineProperty(obj, "item", {
  set: function(param){
    this.sports = param;
  }
});
obj.item = "야구"
console.log(obj.sports); // 야구

// ES6 getter
let obj = {
  value: 123,
  get getValue(){
    return this.value;
  }
};
console.log(obj.getValue);

// ES6 setter
let obj = {
  set setValue(value){
    this.value = value;
  }
};
obj.setValue = 123;
console.log(obj.value);

• 변수에 새로운 값을 할당할 때마다 Validation을 검사할 수 있게 됩니다.
• lazy loading을 할 수 있게 됩니다.
• read와 write 권한을 다르게 할 수 있습니다. 예를 들면 getter는 pubic, setter는 private
• 상속을 사용하는 경우, getter와 setter를 overriding해서 클래스마다 validation 등을 다르게 할 수 있습니다

getter, setter는 정말 필요한 걸까?

is(): 값과 값 타입 비교

두 값과 값 타입을 비교한다. 오브젝트를 비교하는것이 아니다.

Object.is(1, "1")); // false;

assign(): 오브젝트 프로퍼티 복사

두번째 파라미터의 오브젝트 프로퍼티를 첫번째 파라미터의 오브젝트 끝에 복사하고, 첫번째 파라미터를 반환한다.

// 오브젝트를 할당하면 값이 연동된다.
let sports = {
  event: "축구",
  palyer: 11
}
let dup = sports;

sports.player = 55;
console.log(dup.player); // 55

dup.event = "농구";
console.log(sports.event); // 농구

// assign을 이용해 연동되지 않고 프로퍼티를 복사한다.
let sports = {
  event: "축구",
  palyer: 11
}
let dup = Object.assign({}, sports);
console.log(dup.player); // 11

dup.player = 33;
console.log(sport.player); // 11

sports.event = "수영"
console.log(dup.event) // 축구

assign() 고려사항

Object.assign() 복사한 값이 연동되지 않지만, 반환되는 오브젝트와 첫번째 오브젝트는 연동된다.

let oneObj = {one: 1}, twoObj = {two: 2};
let mergeObj = Object.assign(oneObj, twoObj);

console.log(Object.is(oneObj, mergeObj)); // true

mergeObj.one = 456;
console.log(Object.is(oneObj, mergeObj)); // true

// 다수의 오브젝트를 작성할 수 있다.
let obj = {one: 1};
Object.assign(obj, {two: 2}, {two: 3}, {four: 4});
for (var pty in obj){
  console.log(pty, obj[pty]);
}

// one 1  two 3  four 4

assign() getter

오브젝트의 프로퍼티를 복사할때 프로퍼티가 getter이면 함수를 복사하지 않고 함수를 호출하여 반환된 값을 복사한다.

let count = {
  current: 1,
  get getCount() {
    return ++this.current;
  }
};

let mergeObj = {}
Object.assign(mergeObj, count);
console.log(mergeObj); // Object { current: 1, getCount: 2}

setPrototypeOf(): __proto__에 첨부

첫번째 파라미터는 오브젝트 또는 인스턴스를 지정하고, 두번째 파라미터에는 오브젝트의 prototype을 지정하여 해당 prototype에 연결된 프로퍼티를 첫번째 파라미터인 오브젝트의 __proto__에 첨부한다. (공유)

let Sports = function(){};
Sports.prototype.getCount = function(){
  return 123;
}
let protoObj = Object.setPrototypeOf({}, Sports.prototype);
console.log(protoObj.getCount()) // 123