ES6 : 클래스, 객체 확장 표현식과 구조분해 할당

클래스

기본의 JavaScript 는 클래스 표현식이 없어 prototype 을 사용했다. 상속 관계에서 사용되어 해당 타입의 객체들이 공유하도록 하게 끔 사용한다.

 

new 연산자로 생성자 함수를 호출하면 , this 는 prototype 객체의 함수와 변수를 함께 참조한다.

//생성자 함수
function Shape(x,y) {
this.name = 'Shape',
this.move(x,y)
}

//static 함수
Shape.create = function (x,y) {return new Shape(x,y)};
ƒ (x,y) {return new Shape(x,y)}

//인스턴스 함수
Shape.prototype.move = function(x,y) {
    this.x = x;
    this.y = y;
}

Shape.prototype.area = function() {
    return 0;
}

//혹은
Shape.prototype = {
    move : function(x,y){
        this.x = x;
        this.y = y;
    },

    area : function() {
        return 0;
    }
}

var s = new Shape(0,0);

s.area();
0

상속 관계의 정의는 Obejct.assign 함수로 객체를 덮어씌워 설정했다.

//부모 생성자, 자식필드 선언한 생성자
function Circle(x,y, radius){
    Shape.call(this,x,y);
    this.name = 'Circle',
    this.radius = radius;
}

//assign 함수로 덮어씌워 부모 함수, 필드 상속, area 재정의 객체를 덮어씌워 재정의
Object.assign(Circle.prototype, Shape.prototype, {
    area : function() {
    return this.radius * this.radius;    
}
})


//상속 받은 객체의 사용
var c = new Circle(0,0,10);

c.area()
100

이것을 ES6 의 클래스로 적용하면 매우 자바스무리 하게 변한다.

class Shape1 {

static create(x,y) {return new Shape(x,y);}
name = 'Shape1'; // this.name = 'Shape1' 과 동일
constructor(x,y){
    this.move(x,y);
}

move(x,y) {
    this.x = x;
    this.y = y;
}

area() {
    return 0;
}
}


var s = new Shape1(0,0);

s.area()
0

///////////상속///////////

class Circle1 extends Shape1{
    name = 'Circle1';
    
    constructor(x,y,radius){
        super(x,y);
        this.radius = radius;
    }

    area() {
        if ( this.radius === 0) return super.area();
        return this.radius * this.radius;
    }    

    

}

var c = new Circle1(0,0,10);

c.area()
100

---

화살표 함수

=> 로 함수를 선언한다. 

//이름이 있는 함수
function add (first, second){
     return first+ second;   
}


typeof add;
"function"

//익명함수
var add  = function(first, second) { 
    return first + second;
}

typeof add;
"function"

이를 화살표 함수로 표현하면 자바의 Lamda 와 굉장히 유사해진다.

//블록선언 후 리턴문
var add = (first,second) => {return first+second};

//바로 값을 리턴 할 경우 실행 블록 리턴문 생략
var add = (first, second) => first + second;

//객체를 리턴할 경우 ()로 감싼다.
var addAndMultiple = (first, second) => ({
    add:first+second , multiply: first * second
})

addAndMultiple(1,2);
{add: 3, multiply: 2}


function addNumber(num) {
    return function(value){
         return num +value;   
    };
}

// 이게 요런식으로 변한다. 
var addNumber = num => value => num + value;

**콜백 함수의 this 범위로 생기는 이슈를 피하기위해 bind() 함수를 사용하여 this객체를 전달하는 과정을 포함시킨다.

class MyClass {
    value = 10;
    
    constructor() {
    var addThis = function(first,second) {
        return this.value + first,second;
    }.bind(this);
    var addThis1 = (first,second) => this.value + first + second;
    }
}

//this 로 바인딩되는 부분이 포함되어 생략되는 엄청난 효과.

---

객체 할당 표현식, 구조분해 할당

 

객체 선언시 불필요했던 점을 개선하였다. 또한 객체나 배열의 특정 값을 쉽게 추출하도록 하였다.

 

기존의 문법은 이렇다.

• 키와 값이 동일하더라도 따로 지정
• 연산된 키값은 연산자를 사용하여 따로 계산 후 대입한다.
• method 를 지정할떄는 함수객체를 대입한다.

var x =0;
var y =0;
var obj = {x:x, y:y };
var randomString = 'other';
var combined = {};
combined['one'+randomString] = 'some value';
var obj2 = {
    x:x,
    methodA: function() {console.log('method A')},
    methodB: function() {return 0;}
};

객체 확장 표현식을 사용하면 이렇다.

• 키와 값이 같으면 하나만 적는다.
• 객체 바로 안에 표현식을 적어 키값을 나타낸다.
• 클래스에 선언하듯 객체에 메서드를 선언한다.

var x = 0; 
var y = 0;
var obj = {x,y};
var randomString = 'other';
var combined = {
    ['one'+randomString] : 'some Value'
};

var obj2 = {
    x,
    methodA() { console.log('method A')},
    methodB() {return 0}
}

---

기존 자바 스크립트의 구조분해 사용

간단히 말해 객체나 배열의 분해이다.

var list = [0,1];
var item1 =list[0];
var item2 =list[2];
var item3 = list[3] || '-1'; // 값이 없을시 값 생성


//배열 값을 치환
var temp = item2;
item2 = item1;
item1 - temp;

// 객체의 값을 변수에 할당하거나 키에 값이 없을시 값 생성
var obj = {
    key1 : 'one',
    key2 : 'two'
};
var key1 = obj.key1;
var key2 = obj.key2;
var key3 = obj.key3 || 'default key3 value';
var newKey1 = obj.key1;

이것을 ES6 의 구조 할당에 적용하면

//각 변수에 값을 대입, 없을 경우 값 부여
var [item1,item2,item3='-1']=list;

//배열의 각 값을 치환
[item1,item2] = [item2,item1];
(2) [1, 0]

//객체에 키값에 맞는 값을 추출, 다른 변수에 할당하고 싶을 경우 : 으로 할당
var {key1:newKey1,key2,key3='default key3 value'} = obj;

구조 할당과 전개 연산은 붙어다닌다.

var [item1, ...otherItems] = [0,1,2];

var {key1, ...others} = {key1:'one',key2:'two'};

 

구조 할당과 전개 연산은 json 데이터를 다루거나, 매개변수를 다룰 때에 중요하게 쓰이니 꼭 기억하자.

---