배열/객체의 속성을 개별 변수에 담아주는 JS 표현식

참고 자료
[MDN: 구조 분해 할당]

Destructuring assignment

구조 분해 할당

• 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JS 표현식이다.
• 배열/객체의 각 요소에 변수를 지정할 수 있다.
• 묶음으로도 지정이 가능하다.
• useState도 배열의 구조분해 할당을 사용한 것이다.
  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' 👈🏻 배열은 이게 가능

//배열
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]
//객체
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

할당문의 좌변에서 사용해서, 원래 변수에서 어떤 값을 분해해 할당할지 정의한다.

var x = [1, 2, 3, 4, 5];
var [y, z] = x;
console.log(y); // 1
console.log(z); // 2

var foo = ["one", "two", "three"];

var [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"

기본값이 할당된 변수이면, 값을 지정하지 않았을 때 기본값을 가진다.

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