참고 자료
[MDN: 구조 분해 할당]
구조 분해 할당 = 비구조화 할당
구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JS 표현식이다.
배열/객체의 각 요소에 변수를 지정할 수 있다.
묶음으로도 지정이 가능하다.
useState, useQuery도 구조 분해 할당을 사용한 것이다.
const [state,setState] = useState()
const numbers = [0, 1, 2];
let [zero, one, two] = numbers; // 선언과 동시에 할당
// 위의 결과물이 아래와 같다.
let zero = 0
let one = 1
let two = 2
zero, one, two를 각각 선언하고 할당하는 것을 한번에 할 수 있다.
선언부에 있는 []는 배열의 경우에 사용하고, 객체인 경우에는 {}로 선언한다.
💡 When?
배열에서 따로 담아둬야 할 값이 2개 이상일 때, 한번에 구조분해 할당을 이용해 선언과 할당 ㄱㄱ! 👇🏻
// 2,5,7번 인덱스 값을 뽑아 변수에 담아야 한다.
let arr = [1,2,3,4,5,6,7,8,9]
let [ index2,index5,index7 ] = [arr[2],arr[5],arr[7]]
const obj = {
name : "juhee",
age : 26,
position : "frontend",
adress : "guto"
}
// 이름과 나이만 뽑아서 새로운 변수에 담아주고 싶을 때
const { name,age } = obj
// 결과값은 아래와 같음
const name = "juhee"
const age = 26
배열 선언부의 변수 이름은 마음대로 해도 되지만, 객체는 선언부를 key값을 해야 한다!!
배열에서는 선언과 할당이 따로 일어나도 되지만, 객체는 선언과 할당이 동시에 일어나야 한다!!
let [name]
[name] = 'juhee'
👈🏻 배열은 이게 가능
기본값이 할당된 변수이면, 값을 지정하지 않았을 때 👉🏻 기본값을 가진다.
var a, b;
[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7
값을 변수에 넣어서 교환할 수 있다.
var a = 1;
var b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
배열을 return하는 함수의 return값을 변수에 바로 할당할 수 있다.
function f() {
return [1, 2];
}
var a, b;
[a, b] = f();
console.log(a); // 1
console.log(b); // 2
일부 값만 받을 수 있다.
function f() {
return [1, 2, 3];
}
var [a, , b] = f();
console.log(a); // 1
console.log(b); // 3
객체를 할당하면 value값이 할당된다.
var o = {p: 42, q: true};
var {p, q} = o;
console.log(p); // 42
console.log(q); // true
/*변수명을 기존의 key값과 다르게 바꿔서 받을 수 있다.*/
var o = {p: 42, q: true};
var {p: foo, q: bar} = o;
console.log(foo); // 42
console.log(bar); // true
/*배열*/
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(rest); // [30, 40, 50]
/*객체*/
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(rest); // {c: 30, d: 40}