// 구조 분해 할당 (Destructuring assignment)
: 배열 데이터와 객체 데이터에서 사용할 수 있다.
배열 데이터 혹은 객체 데이터의 구조를 분해해서 그 구조에 맞게 각각의 변수에 맞게 데이터를 할당하는 것.
let a = 0;
let b = 0;
let c = 0;
let 이라는 키워드를 통해서 a, b, c가 만들어져있고,
let 키워드를 통해서는 각각의 변수에 데이터를 재할당할 수 있기 때문에.
const arr = [1, 2, 3]
;[a, , c] = arr; // 배열 구조분해할당 문법
특정한 키워드를 사용하지 않고, 바로 괄호가 나오는 코드에서 예외적으로 세미콜론을 사용한다는 개념으로 작성할 수 있다.
대괄호나 소괄호를 시작할 때는 앞에다가 ; (세미콜론) 붙여서 시작하는 방식으로 사용할 수 있다.
ex) ;[] ;()
console.log(a, c);
let a = "Apple";
let b = "Mango";
let c = "Grass";
const arr = ["tea", "juice", "food"];
배열 데이터를 취급할 때는 배열 데이터 안에 들어있는 각각의 아이템 순서가 굉장히 중요!
[, , c] = arr;
언뜻 굉장히 이상해보이는 문법처럼 보이지만, 문제가 없는 코드.
console.log(c); // food
console.log(a, b, c); // Apple Mango food
const arr = [1, 2, 3];
const [a, ...rest] = arr;
... 전개연산자 사용했기 때문에 하나의 '배열' 데이터 형태로 출력됨.
console.log(a, rest); // 1 [2, 3]
const arr = [1, 2, 3];
const [a, ...xyz] = arr;
rest 라고 사용안해도 어디까지나 단순 변수의 이름이기 때문에 마음대로 지어도 됨.
console.log(a, xyz); // 1 [2, 3]
const obj = {
a: 1,
b: 2,
c: 3,
};
const a = obj.a;
const b = obj.b;
const c = obj.c;
console.log(a, b, c); // 1 2 3
✔️ 구조분해할당은 객체데이터와 배열데이터에서 쓴다.
const obj = {
a: 1,
b: 2,
c: 3,
};
const { a, b } = obj;
console.log(a, b); // 1 2
const { c } = obj;
console.log(c); // 3
→ obj 객체의 key 값을 { } 안에 넣어주고, 콘솔에 찍으면 해당 value 값이 출력이 된다. 굉장히 편함!
console.log(obj); // {a: 1, b: 2, c: 3}
const { x } = obj;
console.log(x); // undefined
// obj 객체에 x 라는 것 없기 때문에 undefined 뜸.
const obj = {
a: 1,
b: 2,
c: 3,
};
const { x = 4 } = obj;
console.log(x); // (x: 5가 위에 없으면 4가 나옴.)
a: 1,
b: 2,
c: 3,
x: 5,
};
const { x = 4, a } = obj;
console.log(x, a); // 5 1 (x: 위에 x:5 있어서 그대로 5 출력됨.)
const obj = {
a: 1,
b: 2,
c: 3,
x: 5,
};
const { x = 4, a: hero, y: ten = 10 } = obj;
// a 라는 변수를 hero 라는 변수의 이름으로 변경하는 것!
// ten : key, 10 : value 지정
console.log(x, hero, ten); // 5 1 10
const obj = {
a: 1,
b: 2,
c: 3,
x: 5,
};
// 객체 구조 분해 할당
const { c, rest } = obj;
console.log(c, rest); // 3 undefiend (rest 라는 속성을 찾을 수 없기 때문에)
