ES6 object initializer

21 Apr 2016

1. 글에 대해

  • 모든 결과는 Chrome 브라우저를 통해 테스트된 결과입니다.

2. object initializer

  • 객체 초기화(or 생성)를 위한 표현법(or 식)으로 아래와 같은 것들이 존재한다.

3. ES5 & Object Initializer

// 'use strict';
{
    var o = {x: 1, y: 2, z: function(){}};

    var x = o.x, y = o.y, z = o.z;

    console.log(x, y, z); // 1 2 function(){}

    // 변수 선언(및 할당)과 동시에, 객체 property 값을 초기화할 수 있다.
    var o2 = {x: _x = 3, y: _y = 4};
    // 단 "Strict Mode" 에서는 아래와 같은 예외가 발생하게된다.(주의!!)
    // Uncaught ReferenceError: _x is not defined
    console.log(o2.x, o2.y); // 3 4

    // ES5 에서는 Object.defineProperty 를 통해서만, 접근자를 생성할 수 있다.
    var o4 = {};

    // id 접근자를 생성한다.
    Object.defineProperty(o4, 'id', {
        value: '',
        // 접근자 property 에 수정 권한을 준다.(기본 값: false)
        writable: true,
        get function(){
            return id;
        },
        set function(v){
            id = v;
        }
    });

    console.log(o4.id); // ''

    o4.id = 'yanione';
    console.log(o4.id); // yanione

    console.log(o4);
}

4. ES6 & Object Initializer

  • 기본적인 사용 방법

      {
          // 선언된 변수명과 동일한 객체 property 명을 사용할 경우, 아래와 같이 표현할 수 있다.
          let x = 1, y = 2, z = function(){}, __proto__ = null;
    
          // property 할당 문법이 보다 간결해졌다.
          let o = {x, y, z, __proto__};
    
          console.log(o.x, o.y, o.z); // 1 2 function(){}
          console.log(o.__proto__); // null
    
          // ES6 에서는 객체 초기화 시, 접근자를 생성할 수 있다.
          let o3 = {
              // 접근자 사용을위해, 접근자 property(__id__) 를 선언한다.
              // 접근자 property
              __id__: '',
              // getter
              get id(){
                  return this.__id__;
              },
              // setter
              set id(v){
                  this.__id__ = v;
              }
          };
    
          console.log(o3.id); // ''
          console.log(o3.__id__); // ''
    
          o3.id = 'yanione';
    
          console.log(o3.id); // yanione
          console.log(o3.__id__); // yanione
    
          console.log(o3);
    
          let o4 = {
              // 메서드를 생성한다.
              method(){
                  return 1;
              },
              // 문자열을 통해, property 명 조합할 수 있다.
              ['me'+ 'thod1'](){
                  return 2;
              },
              // generator 를 생성할 수 있다.
              * generator(length = 10){
    
                  // 일반적인 동기화 구문
                  for (var i = 0; i < length; i++){
                      yield i;
                  }
              },
              // 전달된 generator 를 비동기로 호출하는 함수
              asyncAction(generator, cb = function(){}, time = 1000){
    
                  if (!generator) return;
    
                  let v = generator.next();
    
                  if (!v.done){
                      window.setTimeout(() => {
                          this.asyncAction(generator, cb, time);
                          cb.call(this, v.value);
                      }, time);
                  }
              }
          };
    
          console.log(o4.method()); // 1
          console.log(o4.method1()); // 2
    
          let __generator__ = o4.generator();
    
          // 동기화 구문을 포함한 generator 를 (재귀 호출을 위한)setTimeout 함수를 통해, 비동기로 호출한다.
          // 전달된 callback 함수를 1초 마다 호출하게된다.
          o4.asyncAction(__generator__, function(v){
              console.log(this); // o object
              console.log(v); // 0 ~ 9
          });
      }
    
  • super 키워드를 통해, 상속받은 객체 메서드를 호출할 수 있다.

      {
    
          let o1 = {
              method1(){
                  // super 키워드를 통해, 상속받은 객체 메서드를 호출할 수 있다.
                  super.method2();
              }
          };
    
          let o2 = {
              method2(){
                  console.log('method2');
              }
          };
    
          Object.setPrototypeOf(o1, o2);
    
          o1.method1();
    
      }
    
  • ES5 의 __proto__ 내부 속성을 통해, super 키워드를 구현할 수 있다.

      {
          let o1 = {
              method1(){
                  // getPrototypeOf 메서드는 chrome 5, IE 9 이상에서 지원한다(대부분의 브라우저에서 지원한다고 볼 수 있다)
                  // getPrototypeOf 메서드를 통해, super 키워드를 구현할 수 있다.
                  // Object.getPrototypeOf(this).method2() === this.__proto__.method2()
                  Object.getPrototypeOf(this).method2();
              }
          };
    
          let o2 = {
              method2(){
                  console.log('method2');
              }
          };
    
          // setPrototypeOf 메서드는 chrome 34, IE 11 이상에서만 지원한다.
          // Object.setPrototypeOf(o1, o2) === o1.__proto__ = o2;
          Object.setPrototypeOf(o1, o2);
    
          o1.method1();
    
      }
    

관련 URL

comments powered by Disqus