[ECMA Script6] 3. ES6객체와 배열

  ES6는 객채와 배열 안에서 변수의 영역을 제한하는 방법을 다양한 형태로 제공하고 있습니다. 
이 글에서는 구조분해, 객체 리터럴 개선, 스프레드 연산자 등에 대하여 설명드리도록 하겠습니다.

1. 구조분해

1.1 구조분해
구조분해를 이해하기 위하여 아래 예제를 살펴 보도록 하겠습니다.
서브웨이(subway)에서 주문을 할때 빵(bread), 고기(meat), 야채(vegwtable), 소스(sauce)를 선택할 수 있습니다.
이 중 빵과 소스만을 선택하여 주문을 하려고 합니다.
(subway 객체에서 bread와 sauce 필드 만 필요)

아래코드를 보시면 subway 객체에서 동일한 명칭의 변수인 bread와 sauce에 넣어주는 것이 가능하다는것을 확인 할 수 있습니다.

var subway = {
    bread : "플랫브래드",
    meat : "닭가슴살",
    vegetable : ["양상추","올리브","피클"],
    sauce : "머스타드"
}
 
var {bread,sauce} = subway
 
console.log(bread, sauce) //플랫브래드 머스타드 

이렇게 선언된 bread 와 sauce 변수의 값을 다른값으로 변경하여도 subway의 bread와 sauce 값은 바뀌지 않습니다.

var subway = {
    bread : "플랫브래드",
    meat : "닭가슴살",
    vegetable : ["양상추","올리브","피클"],
    sauce : "머스타드"
}
 
var {bread,sauce} = subway
 
bread = "파마산오레가노"
sauce = "사우젼드아일랜드"
 
console.log(bread) //파마산오레가노
console.log(sauce )  //사우젼드아일랜드
 
console.log(subway.bread) //플랫브래드
console.log(subway.sauce) //머스타드

1.2 구조분해를 이용한 함수 인자 전달
객체분해를 이용하여 함수의 인자로도 넘길 수도 있습니다.

// #1 subway 객체의 bread 변수를 컴마(.)를 이용하여 접근
var subway = {
    bread : "플랫브래드",
    meat : "닭가슴살",
    vegetable : ["양상추","올리브","피클"],
    sauce : "머스타드"
}
 
var order = subway => {
    console.log(`주문하신 ${subway.bread} 나왔습니다.`)
}
 
order(subway) //주문하신 플랫브래드 나왔습니다.
 
// #2 필요한 필드 명칭만 기입하여 
var order2 = ({bread}) => {
    console.log(`주문하신 ${bread} 나왔습니다.`)    
}
 
order2(subway) //주문하신 플랫브래드 나왔습니다.

1.3 리스트 분해
배열을 구조 분해 하여, 배열의 특정 위치의 원소를 변수에 대입 하고 싶을 경우 아래와 같이 이용 할 수 있습니다.
만일, 첫 번째 변수가 아니라 두 번째, 세 번째 등의 변수값을 대입하고 싶을 경우 불필요한 위치를 컴마(,)로 넣으면 리스트 매칭이 이루어집니다.

// #1
var [firstnumeric] = ["1","2","3"]
 
console.log(firstnumeric) // 1
 
// #2
var [,,thirdnumeric] = ["1","2","3"]
console.log(thirdnumeric) // 3
 

2. 객체 리터럴 개선

2.1. 객체 리터럴 개선(object literal enhancemet)
객체 리터럴 개선은 구조분해의 반대라고 이해하시면 될 것 같습니다. 현재 영역에 존재하는 변수를 객체 안의 필드로 묶을 수 있습니다.

var lastname = "라"
var firstname = "이언"
 
var funcName = {lastname, firstname}
 
console.log(funcName) //{lastname :"라", firstname : "이언"}
 

객체 리터럴 개선 또는 객체 재구축으로 객체 메서드를 만드는 것도 가능합니다.

var lastname = "라"
var firstname = "이언"
 
var print =  function(){
    console.log(`My name is ${this.lastname}${this.firstname}`)
}
 
var funcName = {lastname,firstname,print}
 
funcName.print()  //{lastname :"라", firstname : "이언"}
 

아래 예제와 같이 이제는 객체 메서드를 정의 할 때 function 키워드를 사용하지 않아도 선언이 가능합니다.

//예전 방식
var obj = {
    name : name,
    name2 : name2,
    func : function () {
        var temp = this.name;
        console.log(`${temp}`)
    },
    func2 : function(pParam){
        console.log(pParam)        
    }
}
 
 
//새로운 방식
var obj = {
    name,
    name2,
    func {
        let temp = this.name;
        console.log(`${temp}`)
    },
    func2(pParam) {
        console.log(pParam)        
    }
}