자바스크립트 구조 분해 할당

구조 분해 할당이란?

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 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}

일단 기본적인 구문들입니다

 

# 배열 구조 분해

1 기본 할당과 나머지 할당

// 배열 구조 분해 할당
const fruit = ['orange', 'banana', 'tomato', 'apple'];

const [orange , yellow , ...red] = fruit;

콘솔

각 인덱스 순서에 맞게 변수로 등록하고 , 나머지에 대한 변수로 가능한다

나머지는 변수 마지막에 와야한다

 

2 선언에서 분리한 할당

let a,b;

[a, b] = [1 ,2]

콘솔

 

3 기본값 할당

let a,b;

[a = 8, b = 3] = [1]

콘솔

기본 값을 입력하고 들어온 값이 있으면 오버라이딩한다

 

4 변수값 교환

let a = 3;
let b = 5;

[a, b] = [b, a];

변수를 새로 만들 필요 없이

변수값을 교환할 수 있다

 

5 함수가 반환한 배열

function f() {
    return [1, 2];
}
  
let a, b;
[a, b] = f();

콘솔

함수가 배열을 반환할 경우에도 구조 분해 할당이 가능하다

 

6 일부 반환값 무시

function f() {
    return [1, 2, 3];
}

let [a, , b] = f();

콘솔

함수가 반환한 값 중 일부를 무시할 수 있다

전체 무시도 가능하다

 

 

# 객체 구조 분해

1 기본 구조 분해

let o = {p: 42, q: true};
let {p, q} = o;

콘솔

키만 입력하면 바로 값에 접근할 수 있다

 

2. 선언 없는 할당

let a, b;

({a, b} = {a: 1, b: 2});

콘솔

구조 분해를 통해 변수의 선언과 분리하여 변수에 값을 할당할 수 있습니다.

 

3 새로운 변수 이름으로 할당

let o = {p: 42, q: true};
let {p: foo, q: bar} = o;

콘솔

기존에 키는 p와 q였는데 foo와 bar처럼 새로운 변수에 할당해서 사용가능하다.

 

4 객체 구조 분해에서 Rest

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}

콘솔

나머지를 스프레드 연산자로 할당하고 배열과 같다.