항해99 👩‍💻81일차 TIL

구조 분해 할당(=비구조화 할당) 

구조 분해 할당구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript표현식이다.  

 

예시

var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20

// Stage 4(finished) proposal
({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, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

 

기본값

변수에 기본값을 할당하면, 분해한 값이 undifined일 때 그 값을 대신 사용한다.

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

 

함수가 반환한 배열 분석

구조 분해를 사용하면 반환된 배열에 대한 작업을 더 간결하게 수행할 수 있다. 

아래 예제에서 f()는 출력으로 배열 [1,2]를 반환하는데, 하나의 구조 분해만으로 값을 분석할 수 있다.

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

 

변수에 배열의 나머지를 할당하기

배열을 구조 분해할 경우, 나머지 구문을 이용해 분해하고 남은 부분을 하나의 변수에 할당 할 수 있다.

var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]

 

복사(copy)

전개 연산자를 사용하여 배열, 객체의 깊은 복사를 할 수 있다.

var arr = [1,2,3];
var copy1 = arr;
var [...copy2] = arr;
var copy3 = [...arr];

arr[0] = 'String';
console.log(arr); // [ 'String', 2, 3 ]
console.log(copy1); // [ 'String', 2, 3 ]
console.log(copy2); // [ 1, 2, 3 ]
console.log(copy3); // [ 1, 2, 3 ]

얕은 복사인 copy1은 arr을 참조하기 때문에 0번 요소가 변경되었지만 전개 연산자를 사용한 copy2, copy3은 깊은 복사가 된 것을 볼 수 있다

 

var prevState = {
  name: "yuddomack",
  birth: "1996-11-01",
  age: 22
};

var state = {
  ...prevState,
  age: 23
};

console.log(state); // { name: 'yuddomack', birth: '1996-11-01', age: 23 }

객체 역시 전개 연산자로 깊은 복사를 할 수 있고 새로운 값을 할당할 수도 있다. 

 

 

 

 

 

 

참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

https://yuddomack.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%AC%B8%EB%B2%95-%EB%B9%84%EA%B5%AC%EC%A1%B0%ED%99%94-%ED%95%A0%EB%8B%B9