[JavaScript]ES5와 ES6의 차이(6) - Destructuring Assignment

ES5와 ES6의 차이(6) - Destructuring Assignment

Destructuring Assignment(디스트럭처링 할당)

Destructuring이란 비구조화, 파괴를 뜻하는 단어이며 객체나 배열에 사용해서 개별 변수에 할당하는 것임!

 

 

<script>
	// ES6: destructuring assignment
    // 객체 요소에 있는 속성 정보 가져오기
    // ES5
    let userid01 = member.userid;
    let name01 = member.name;

    // ES6: 객체의 속성명과 변수명을 동일하게 가져오기
    let {userid, name} = member;

    // ES6: 객체의 속성명과 변수명을 다르게 가져오기
    let {userid:uid, name:uname} = member;

    // ES6: property shorthand: 단축 속성명
    let isbn = "123-12-1111";
    let title = "VueJs Book";
    let price = 35000;

    // ES5: 변수에 담긴 값을 value로 사용해서 객체 생성하기
    let book1 = {
      isbn: isbn,
      title: title,
      price: price
    }

    // ES6:
    // key:value 동일한 이름인 경우에는 value를 생략 가능
    let book2 = {isbn, title, price}



    // ES6: destructuring assignment
    // 배열 요소에 있는 속성 정보 가져오기
    let names = ["가나다", "라마바", "사아자", "차카타", "파하"];

    // ES5: 0번째 요소, 1번째 요소 가져오기
    let name1 = names[0];
    let name2 = names[1];

    // ES6: 0번째 요소, 1번째 요소 가져오기
    let [value1, value2] = names;
    console.log(value1, value2);
    // ES6: 2번째 요소, 4번째 요소 가져오기
    // 배열은 위치 기반으로 배열 요소 가져와서 변수에 할당
    let [ , , value3, , value4] = names;
    console.log(value3, value4);

  </script>

실행 결과

 

오른쪽에 존재하는 자료구조를 파괴하여 왼쪽에 있는 변수들에 각각 할당함!!! 그래서 디스트럭처링인듯???

 

배열은 순서를 중요하게 여기고, 객체는 키값을 중요하게 여김(순서바뀌어도 된다는 뜻)