Learn Destructuring Assignment

Index

구조분해할당의 개념
배열구조분해할당&rest parameter
객체구조분해할당

배열 구조분해 할당

Destructuring Assignment ?

구조분해 할당은 무엇일까?
가장 기본적인 개념을 살펴보면 자바스크립트의 문법으로 배열혹은 객체 에서 value & property를 각각 분해해 별도의 변수에 담을 수 있도록 하는 것이다.

배열에서 구조 분해 할당의 예시

let [a, b] = [1, 2]; // 기본 구조 분해 할당

let array = [1, 2]
let [a, b] = array; // 미리 선언

위의 코드에서 console.log(a), console.log(b)를 찍어보면 각각 오른쪽의 1, 2 가 출력된다. 따라서 변수를 왼쪽에, 분해할 대상을 오른쪽에 담는 형식으로 [1, 2]를 분해해 변수 a, b에 담은 것이다. 또, 두번째 코드처럼 미리 저장해 둔 배열로 구조 분해 할당을 하는 형태 또한 가능하다.

...rest

let array = [1, 2, 3, 4, 5]
let [ a, b, ...rest] = array 

여기서 a, b 에는 1, 2 가 담겼을텐데 ...rest는 무엇일까?
rest에는 배열 [3,4,5] 가 담겨있다. 구조 분해 할당을 통해 a, b에 1, 2 를 담아주고 나머지는 ...rest를 통해 rest 변수에 배열로 저장한 것이다.

배열 구조분해 할당에서 ... 요소는 Rest Element라고 하는데 매개변수에서 쓰이면 rest파라미터, 배열에서 쓰인다면 rest elements 가 된다.

배열의 구조분해 할당은 여러번의 선언과 할당과정을 한번에 처리하는 과정이라는 것이 키포인트로 배열의 구조분해 할당은 배열 내부의 값을 여러 변수에 나눠 담는 과정을 한번에 처리하는 것이다.

const array = [1, 2, 3];
const first = array

라고 하면 first에는 array의 element중 가장 첫번째 요소가 담기게 된다.
또 여러 변수를 담는 것은

const numbers = [0,1,2]
let [zero, one, two ] = numbers;

변수 zero one two 에 각각 배열의 0, 1 ,2 가 담기게 된다.( const zero = number[0] 과 같은 식 )

그럼 배열 구조분해 할당은 어떤 상황에서 할까?
배열에서 따로 담아둬야 할 값이 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] ]

객체 구조분해 할당

객체에서 구조분해 할당은 많이 쓰인다. 객체 내부의 프로퍼티 값을 분해해 변수에 저장한다.
배열과 메커니즘은 동일하나 쓰이는 대상이 객체로 바뀐 것이다.
배열에서 분해하는 것이 array의 element였다면, 객체에서는 property를 분해한다는 차이점이 있다. 또한 배열은 선언과 할당이 따로 일어나도 상관이 없는 반면, 객체는 선언과 할당이 동시에 일어나야 한다.
let [name] / [name]="LBJ" 같은 식의 할당이 가능한 반면, 객체는 불가능함. + 없는 키를 선언하고 할당할 수 없다.

const obj = {
  name: "Lebron",
  age: 38,
  team: "Lakers",
};
const { name, age, team } = obj;
console.log(name); // "Lebron"
console.log(age); // 38
console.log(team); // "Lakers"

// 만약 구조 분해 할당을 사용하지 않는다면?
// 아래와 같이 직접 대입해 주어야 한다.
const name = obj.name;
const age = obj.age;
const team = obj.team;

const {name: NBAname, age, team:NBAteam} = obj
//다른 이름으로 변수 설정

const {name, ...rest} = obj;
console.log(name); // 'lebron'
console.log(rest); // {age : 38, team: 'lakers'

obj내부의 name, age, team 프로퍼티들을 각각 이름이 동일한 name, age, team 변수에 알아서 분해 할당(다른 이름으로도 가능하다!) - 변수명을 객체의 key값으로 선언해주면 된다는 의미,
객체 구조분해 할당은 프로퍼티 기준이라 순서 또한 무관하며
여기서도 ... 문법을 사용할 수 있으며 여기서는 Rest properties라고 부른다.

RestProperties를 쓰면? 쓰고싶은 프로퍼티만 골라 새로운 객체로 저장할 수 있다.
다음은 사용예시

let bestteams = {
 epl: 'ManCity',
 serieA : 'Juventus',
 Bundes : 'Byern',
 LaLiga : 'Real'
 };
 let { Bundes, ...otherLeague } = bestteams;
 console.log(otherLeague); // { epl:'ManCity', serieA:'Juventus, LaLiga:'Real'}