구조 분해 (Destructuring) 문법

참고 : Link - ( https://ko.javascript.info/destructuring-assignment )

 

객체와 배열은 자바스크립트에서 가장 많이 쓰이는 자료 구조입니다.

키를 가진 데이터 여러 개를 하나의 엔티티에 저장할 땐 객체를, 컬렉션에 데이터를 순서대로 저장할 땐 배열을 사용하죠.

개발을 하다 보면 함수에 객체나 배열을 전달해야 하는 경우가 생기곤 합니다. 가끔은 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생기기도 하죠.

이럴 때 객체나 배열을 변수로 '분해’할 수 있게 해주는 특별한 문법인 구조 분해 할당(destructuring assignment)을 사용할 수 있습니다. 이 외에도 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우 등에서 구조 분해(destructuring)는 그 진가를 발휘합니다.

 

배열

*배열을 분리해서 하나씩 할당하는 원리

// Array Destructuring
const rank = ['유나','효준','민환','재하'];

// normal
const mackbook = rank[0];
const ipad = rank[0];
const airpods = rank[0];
const coupon = rank[0];

// destructuring 문법
const [mackbook, ipad, airpods, coupon] = rank;

// Array Destructuring
const members = ['코딩하는효준', '글쓰는유나', undefined, '편집하는민환', '촬영하는재하'];
const [macbook, ipad, airpod = '녹음하는규식', ...coupon] = members;

console.log(macbook); // 코딩하는효준
console.log(ipad); // 글쓰는유나
console.log(airpod); // 녹음하는규식
console.log(coupon); // (2) ["편집하는민환", "촬영하는재하"]

destructuring의 할당 부분에 배열의 형식이 아니거나 할당하지 않으면 오류 발생.

 

객체

*객체는 프로퍼티 네임을 통해서 분해가 되기 때문에 할당 연산자 오른편의 객체에서 할당연산자 왼편에 선언된 변수와 똑같은 프로퍼티 네임이 있으면 그 변수 이름에 값이 할당되는 방식

// Object Destructuring
const macbookPro = {
  title: '맥북 프로 16형',
  price: 3690000,
  memory: '16 GB 2667 MHz DDR4',
  storage: '1TB SSD 저장 장치',
};

const { title, price, color = 'silver', ...rest } = macbookPro;

console.log(title); // 맥북 프로 16형
console.log(price); // 3690000
console.log(color); // silver
console.log(rest); // {memory: "16 GB 2667 MHz DDR4", storage: "1TB SSD 저장 장치"}

사용자 지정 변수 이름 사용

const { 프로퍼티이름 : 사용자지정변수, ...rest } = object;

문자열 변수 사용하기

const object = {
	'serial-num' : 'ABCDEFGHIJK';
}
// 문자열도 프로퍼티 네임이 선언 되어 있다면, 사용자 지정 변수로 할당해 줘야 사용가능하다.

const { 'serial-num': serialNum } = object;

 

1. 기본값 작성 가능

2. rest 파라미터 사용가능

3. 할당 안된 파라미터에는 undefined 값이 할당됨

4. [ ] 대괄호를 사용해 다양한 변수 지정 가능