1. Destructuring Array

[기존 코드]

let data = ["crong", "honux", "jk", "jinny"];
let jisu = data[0];
let jung = data[2];
console.log(jisu, jung);

> "crong", "jk"

[ES6 코드]

let data = ["crong", "honux", "jk", "jinny";
let [jisu,,jung] = data;
console.log(jisu, jung);

> "crong", "jk"

• 배열에서 콤마를 연이어 적으면 해당 부분은 생략한 채로 값이 할당된다.

2. Destructuring Object

• 객체에서도 중괄호를 통해서 손쉽게 원하는 값을 뽑아낼 수 있다.

let obj = {
	name : "crong",
	address : "Korea", 
	age : 10,
}

let {name, age} = obj;
console.log(name,age);
> "crong", "10"

• 만약 이름을 바꾸고 싶다면 이름을 지정할 수도 있다.

let {name:myName, age:myAge} = obj;
console.log(myName, myAge});
> "crong", "10"

3. Destructuring JSON 파싱

[API로 받은 객체 예제]

var news = [{
	"title" : "sbs",
	"imgurl" : "http: //static.naver.net/newsstand/2017/0313/article";
	"newslist" : [
		"[가보니] 가상 경주도 즐기고, 내손으로 자동차도 만들고",
		"리캡차'가 사라진다",
		"갤럭시 S21' 출시? '갤노트7' 처리 계획부터 밝혀야",
		"블로코 -삼성 SD, 블록체인 사업 '맞손",
		"[블록체인 톺아보기] 퍼블릭 블록체인의 한계와 브라이빗 블록 체인"
		]
	},
	{
	"title" : "mbc",
	"imgurl" : "http: //static.naver.net/newsstand/2017/0313/article";
	"newslist" : [
		"국립어린이과학관, 네이버 메타버스 '제페토'에 과학관 열어",
		"네이버클라우드, 게임 빅데이터 서비스로 일본 공략",
		"잡코리아 '네이버 자격증 불러오기' 서비스 론칭",
		"야놀자·여기어때·네이버여행상품, '토종 빅3' 시대",
		]
	},
];

• 데이터를 가져온 경우에도 특정 값 가져올 수 있다.

[코드 1]

let [,mbc] = news;
let {title, imgurl} = mbc;
console.log(title, imgurl);

[코드 2] - 중괄호를 사용하여 한번에 값을 저장한다.

let [,{title, imgurl}] = news;
console.log(title, imgurl);