Destructuring Assignment (구조 분해 할당)

Destructuring Assignment (구조 분해 할당)

 

 

Destructuring Assignment란?

 

• 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식

var x = [1, 2, 3, 4, 5];

view raw example.js hosted with ❤ by GitHub

• 객체 및 배열 리터럴 표현식을 사용하면 쉽게 데이터 뭉치를 만들 수 있음
• 구조 분해 할당의 구문은 위의 표현식과 비슷
• 하지만, 할당문의 좌변에서 사용하여, 원래 변수에서 어떤 값을 분해해 할당할지 정의함

	var x = [1, 2, 3];
	var [y, z] = x;
	console.log(y); // 1
	console.log(z); // 2

view raw example.js hosted with ❤ by GitHub

 

---

 

 

배열 구조 분해

 

 

기본 변수 할당

 

	let fruits = ["apple", "banana", "grape"];
	let [x, y, z] = fruits;
	console.log(x); // "apple"
	console.log(y); // "banana"
	console.log(z); // "grape"

view raw example.js hosted with ❤ by GitHub

 

 

선언에서 분리한 할당

 

	let x, y;
	[x, y] = [1, 2];
	console.log(x); // 1
	console.log(y); // 2

view raw example.js hosted with ❤ by GitHub

• 변수의 선언이 분리되어도 구조 분해를 통해 값을 할당할 수 있음

 

 

기본값

 

	let x, y;
	[x=5, y=7] = [1];
	console.log(x); // 1
	console.log(y); // 7

view raw example.js hosted with ❤ by GitHub

• 변수에 기본값을 할당하면, 분해한 값이 undefined일 때 그 값을 대신 사용함

 

 

변수 값 교환하기

 

	let x = "apple";
	let y = "banana";
	[x, y] = [y, x];
	console.log(x); // "apple"
	console.log(y); // "banana"

view raw example.js hosted with ❤ by GitHub

• 하나의 구조 분해 표현식만으로 두 변수의 값을 교환할 수 있음

 

	let x = "apple";
	let y = "banana";
	let temp = "";
	x = temp;
	x = y;
	y = temp;
	console.log(x); // "apple"
	console.log(y); // "banana"

view raw example.js hosted with ❤ by GitHub

• 구조 분해 할당 없이 두 값을 교환하려면 위의 예시처럼 사용해야함

 

 

함수가 반환한 배열 분석

 

	function func() {
	return [1, 2];
	}
	let x, y;
	[x, y] = func();
	console.log(x); // 1
	console.log(y); // 2

view raw example.js hosted with ❤ by GitHub

• func()는 출력으로 배열 [1, 2]을 반환하는데, 이처럼 하나의 구조 분해만으로 값을 분석할 수 있음

 

 

일부 반환 값 무시하기

 

	function func() {
	return [1, 2, 3];
	}
	let [x, , y] = func();
	console.log(x); // 1
	console.log(y); // 3

view raw example.js hosted with ❤ by GitHub

• 이처럼 필요하지 않은 반환 값을 무시할 수 있음
• 또한, 이를 이용하여 반환 값을 모두 무시할 수도 있음

 

 

변수에 배열의 나머지를 할당하기

 

	let [x, ...y] = [1, 2, 3];
	console.log(x); // 1
	console.log(y); // [2, 3]

view raw example.js hosted with ❤ by GitHub

• 배열을 구조 분해할 경우, 나머지 구문을 이용해 분해하고 남은 부분을 하나의 변수에 할당할 수 있음
• 만약, 이때, 나머지 요소의 오른쪽 뒤에 쉼표가 있으면 SyntaxError가 발생함

 

 

---

 

 

객체 구조 분해

 

 

기본 할당

 

	let lim = {age: 26, gender: "man"};
	let {x, y} = lim;
	console.log(x); // 26
	console.log(y); // "man"

view raw example.js hosted with ❤ by GitHub

 

 

선언 없는 할당

 

	let x, y;
	({x, y} = {x: 1, y: 2});

view raw example.js hosted with ❤ by GitHub

• 구조 분해를 통해 변수의 선언과 분리하여 변수에 값을 할당할 수 있음

 

 

새로운 변수 이름으로 할당하기

 

	let lim = {age: 26, gender: "man"};
	let {age: x, gender: y} = lim;
	console.log(x); // 26
	console.log(y); // "man"

view raw example.js hosted with ❤ by GitHub

• 객체로부터 속성을 해체하여 객체의 원래 속성명과는 다른 이름의 변수에 할당할 수 있음

 

 

기본값

 

	let {x = 10, y = 5} = {x: 3};
	console.log(x); // 3
	console.log(y); // 5

view raw example.js hosted with ❤ by GitHub

• 객체로부터 해체된 값이 undefined인 경우, 변수에 기본값을 할당할 수 있음

 

 

기본값 갖는 새로운 이름의 변수에 할당하기

 

	let {x: xx = 10, y: yy = 5} = {x: 3};
	console.log(xx); // 3
	console.log(yy); // 5

view raw example.js hosted with ❤ by GitHub

• 새로운 변수명 할당과 기본값 할당을 한번에 할 수 있음

 

 

중첩된 객체 및 배열의 구조 분해

 

	const profile = {
	name: "hooni",
	detail: [
	{
	gender: "man",
	mbti: "ISFP",
	age: 26,
	like: "sleep",
	name: "hooni22"
	}
	],
	};
	const { name: lim, detail: [{ name: lee }] } = profile;
	console.log(lim); // "hooni"
	console.log(lee); // "hooni22"

view raw example.js hosted with ❤ by GitHub

 

 

객체 구조 분해에서 Rest

 

	let {lim, lee, ...rest} = {lim: 26, lee: 27, woo: 40, shin: 25}
	console.log(lim); // 26
	console.log(lee); // 27
	console.log(rest); // { woo: 40, shin: 25 }

view raw example.js hosted with ❤ by GitHub