디스트럭처링은 객체의 구조를 해체하는 것을 의한다.
배열이나 객체의 데이터를 해체하여 다른 변수로 추출할 수 있다. 이러한 이유 때문에 분할 할당이라고도 한다.
= 기준으로 양쪽 모두 배열형식으로 지정해야 된다. 인덱스를 기준으로 값을 할당한다.
<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>
const [a, b, ...c] = [9, 8, 7, 6, 5, 4, 3, 2, 1];
console.log(c); // 7,6,5,4,3,2,1 array
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객체
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}