(작성중)구조 분해할당 : 여러 변수를 한번에 할당하기

구조 분해 할당 (Destructuring Assignment)은 객체와 배열의 속성을 해체하여 각 값을 변수에 쉽게 할당할 수 있도록 하는 JavaScript 구문입니다.

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

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20

// Stage 4(finished) proposal
({ a, b, ...rest } = { a: 10, b: 20, c: 30, d: 40 });
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

 

---

배열 구조 분해

기본 변수 할당

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

 

나머지 요소 할당

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

 

기본값 지정

let [a = 5, b = 7] = [1]; 
console.log(a); // 1 
console.log(b); // 7

 

값 교환

let a = 1, b = 3; 
[a, b] = [b, a]; 
console.log(a); // 3 
console.log(b); // 1

함수 반환값 구조 분해

function getData() { return [1, 2, 3]; } 
let [a, , c] = getData(); 
console.log(a); // 1 console.log(c); // 3

---

객체 구조 분해

기본 변수 할당

let { a, b } = { a: 10, b: 20 }; 
console.log(a); // 10
console.log(b); // 20

 

새로운 변수명으로 할당

let { a: x, b: y } = { a: 10, b: 20 }; 
console.log(x); // 10 
console.log(y); // 20

 

기본값 지정

let { a = 1, b = 2 } = { a: 5 }; 
console.log(a); // 5
console.log(b); // 2

 

중첩 구조 분해

let obj = { p: { q: 42, r: true } }; 
let { p: { q, r } } = obj; 
console.log(q); // 42 
console.log(r); // true

 

Rest 속성

let { a, b, ...rest } = { a: 10, b: 20, c: 30, d: 40 };
console.log(rest); // { c: 30, d: 40 }

 

계산된 속성 이름

let key = "z";
let { [key]: foo } = { z: "bar" };
console.log(foo); // "bar"

---

함수 매개변수에서 구조 분해

객체 매개변수와 기본값

function drawChart({ size = "big", cords = { x: 0, y: 0 }, radius = 25 } = {}) { console.log(size, cords, radius); } drawChart({ cords: { x: 18, y: 30 }, radius: 30 });

중첩된 매개변수 구조 분해

function printInfo({ name, family: { father } }) { console.log(name, father); } printInfo({ name: "John", family: { father: "Smith" } });

---

활용

반복문에서 구조 분해

let people = [ { name: "Alice", age: 25 }, { name: "Bob", age: 30 }, ]; for (let { name, age } of people) { console.log(`${name} is ${age}`); }

정규식 매칭

let url = "https://example.com"; let [, protocol, domain] = /(\w+):\/\/([^/]+)/.exec(url); console.log(protocol); // "https" console.log(domain); // "example.com"

API 응답 처리

let response = { data: { user: { id: 1, name: "Alice" }, }, }; let { data: { user: { id, name }, }, } = response; console.log(id, name); // 1, "Alice"

---

주의사항

배열 구조 분해의 나머지 요소는 마지막에만 올 수 있습니다.

let [a, ...b, c] = [1, 2, 3]; // SyntaxError

객체 선언 없이 할당하려면 괄호로 감싸야 합니다.

let a, b; ({ a, b } = { a: 10, b: 20 });

---

 

 

 

 

 

 

구조분해할당 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment