De-Structuring

디스트럭처링은 객체의 구조를 해체하는 것을 의한다.
배열이나 객체의 데이터를 해체하여 다른 변수로 추출할 수 있다. 이러한 이유 때문에 분할 할당이라고도 한다.

배열 디스트럭처링

= 기준으로 양쪽 모두 배열형식으로 지정해야 된다. 인덱스를 기준으로 값을 할당한다.

  <script type="text/javascript">
    //분해 (배열, 객체)
    const array = [10, 20];
    const [x, y] = array;
    console.log(x, y); //10 , 20


    const [k, k2, k3] = array;
    console.log(k, k2, k3); // 10,20,undefined

    var a, a2, a3;
    [a, a2, a3] = [9, 8, 7];
    console.log(a, a2, a3); // 9, 8, 7

    const m = [10, 9, [100, 200]];
    var b, b2, b3, b4;
    [b, b2, [b3, b4]] = m;
    console.log(b, b2, b3, b4); // 10, 9, 100, 200
  </script>

rest 연산자

    const [a, b, ...c] = [9, 8, 7, 6, 5, 4, 3, 2, 1];
    console.log(c); // 7,6,5,4,3,2,1 array
  

함수의 파라미터 destructuring

   const sum = ([k, k2]) => k + k2;
   console.log(sum([10, 20]));	// 30

객체 디스트럭처링

= 기준으로 양쪽 모두 객체 형식으로 지정해야된다. key 값을 기준으로 값을 할당한다. 미리 선언된 변수를 사용하기 위해서는 반드시 () 안에 코드를 작성해야된다.

 var { a, b } = { a: 100, b: 200 };
    console.log(a, b); //100,200

    //변수명 바꾸기
    var { a: aa, b: bb } = { a: 100, b: 200 };
    console.log(aa, bb); //100,200

    //중첩
    var x = { k: 100, k2: 200, ppp: { k3: 300 } };
    var {
      k,
      k2,
      ppp: { k3 },
    } = x;
    console.log(k, k2, k3); //100,200,300
    function xxx({ a, b, c = 100 }) {	// c 디폴트 값 설정
      console.log(a + b, c); //300, 100
    }
    xxx({ a: 100, b: 200 });

json object

key값으로 접근 가능하기도 하며, 배열의 변수명으로 접근 가능

// json객체
 var k = 'name';
 var n = { name: '홍길동', age: 20 };
 console.log(n.name, n['name'], n[k]); //홍길동,홍길동,홍길동
 // key값으로 접근 가능하기도 하며, 배열의 변수명으로 접근 가능

 // 1. 키 값을 ㅇ변수로 지정하여 사용하기
 var x = 'username';
 var x2 = 'userage';
 var obj = { x: '이순신', x2: 20 };
 console.log(obj); // {x: "이순신", x2: 20}
 var obj2 = { [x]: '이순신', [x2]: 20 };
 console.log(obj2); //{username: "이순신", userage: 20}

 // 2. 응용
 var obj = { sport1: '축구', sport2: '야구', sport3: '농구' };
 console.log(obj); //{ sport1: '축구', sport2: '야구', sport3: '농구' }
 var s = 'sport';
 var obj2 = { [s + '1']: '축구', [s + '2']: '야구', [s + '3']: '농구' };
 console.log(obj2); //{ sport1: '축구', sport2: '야구', sport3: '농구' }

 // 3. 키 값을 연결
 var obj3 = { ['one' + 'two']: 100 };
 console.log(obj3); //{onetwo:100}