JavaScript의 구조 분해 할당(Destructuring Assignment)

구조 분해 할당

구조화된 배열과 같은 이터러블 또는 객체를 비구조화 하여 1개 이상의 변수를 개별적으로 할당하는것.

배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다.

 

• 구조 분해 할당 대상은 이터러블(할당문의 우변)이어야 하며, 할당 기준은 배열의 인덱스 이다.

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

let arr =[1,2,3]
let [a,b,c] =arr
console.log(a); // 10
console.log(b); // 20

배열 구조 분해 할당은 REST 엘리먼트 사용이 가능하다.

let array = [1, 2, 3, 4, 5];
let [a, b, ...rest] = array;
console.log(rest); // [3, 4, 5];

• 구조 분해 할당에서는 a, b 까지 1과 2가 대입이 되고, 나머지 3, 4, 5는 ...rest 로 받아서 [3, 4, 5] 와 같이 rest 변수에 배열로 저장한다
•  배열 구조분해 할당(array destructuring assignment)에서 위와 같이 쓰이는 ... 요소를 Rest elements 라고 부른다.

변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없다.

const [a,b] = [1,2]
console.log(a,b) // 1 2

const [c,d] = [1]
console.log(c,d) // 1 undefined

const [e,f] = [1,2,3]
console.log(e,f) // 1 2

배열 디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있다.

const [a,b,c = 3] =[1, 2]
console.log(a,b,c) // 1 2 3

const [d,e = 10,f = 3] =[1, 2]
console.log(a,b,c) // 1 2 3
// 기본값보다 할당된 값이 우선시 된다.

 

객체(object)에서의 구조 분해 할당

const obj = {
  name: "Bob",
  age: 20,
  memo: "Hello",
};
const { name, age, memo } = obj;
console.log(name); // "Bob"
console.log(age); // 20
console.log(memo); // "Hello"

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

객체의 프로퍼티명과 다른 변수명으로 새롭게 지정가능하다.

const obj = {
  name: "Bob",
  age: 20,
  memo: "Hello",
};
const { name: YourName, age, memo } = obj;
console.log(YourName); // 'Bob'

객체의 구조 분해 할당은 프로퍼티 키를 기준으로 이루어진다.

onst obj = {
  name: "Bob",
  age: 20,
  memo: "Hello",
};
const { name, age, memo } = obj;
console.log(name, age, memo); // Bob 18 Hello

const { age, name, memo } = obj;
console.log(name, age, memo); // Bob 18 Hello
// 순서는 의미가 없다!!!

객체 구조 분해 할당은 REST 프로퍼티 사용이 가능하다.

const obj = {
  name: "Bob",
  age: 20,
  memo: "Hello",
};
const { name, ...rest } = obj;
console.log(name); // "Bob"
console.log(rest); // { age : 20, memo: 'Hello' }

• obj 객체 중 name에 프로퍼티 값이 저장되고, 나머지 age와 memo는 ...rest가 받아서 rest 변수에 모아 객체로 저장한다.
• 객체의 구조 분해 할당에서 위의 역할로 ...이 쓰이는 것을 가리켜 Rest properties 라고 부른다.
• REST 프로퍼티는 스프레드 프로퍼티와 함께 2021 1월 현재 TC39 프로세스의 stage 4(Finished) 단계에 제안되어 있다.

객체 구조 분해 할당은 중첩이 가능하다.

const obj = {
  name: "Bob",
  age: 20,
  memo: "Hello",
  adress:{
  city: "seoul"
  }
};
const {adress:{city}} = obj;
console.log(city); // seoul

• adress 프로퍼티 키로 객체를 추출하고 city 프로퍼티 키로 값을 추출한다.

객체 구조 분해 할당은 객체를 인수로 전달받은 함수의 매개변수로 사용이 가능하다.

function printTodo({content, completed}){
	console.log(`할일 ${content}은 ${completed ? '완료' : '비완료'} 하였습니다.`)
}
 printTodo({id:1, content:'방청소', completed:'완료'})