구조 분해 할당

객체나 배열을 변수로 “분해”할 수 있게 해주는 특별한 문법 :

구조 분해 할당(destructuring assignment)

 

배열 분해하기

➡️ let [item1 = default, item2…] = array, iterable object

 

let arr = [“Doyeon”, “Shim”]

 

// 구조 분해 할당

let [firstName, surname] = arr;

 

console.log(firstName);

console.log(surname);

 

// 또는 split() 을 사용해도 좋다

 

let [firstName, surname] = “Doyeon Shim”.split(‘ ‘);

 

1. 분해(destructing) ≠ 파괴(destructive)

 

1. 쉼표를 사용하여 요소 무시하기

 

let [firstName, , title] = [ “a”, “b”, “c”, “d” ];

console.log(title); // c

 

1. 할당 연산자 우측엔 모든 iterable 객체가 올 수 있다

 

let [a, b, c] = “abc”;

let [one, two, three] = new Set([1, 2, 3]);

 

1. 할당 연산자 좌측엔 뭐든지 올 수 있다

 

let user = {};

[user.name, user.surname] =  “Doyeon Shim”.split(‘ ‘);

 

console.log(user.name); // Doyeon

 

1. Object.entries()로 반복하기

 

let user = {

name: “J”,

age: 30

};

 

for (let [key, value] of Object.entries(user)) {

console.log(`${key}:${value}`);

}

 

// map에서도 사용

let user = new Map();

user.set(“name”, “J”);

user.set(“age”, “30”);

 

for (let [key, value] of Object.entries(user)) {

console.log(`${key}:${value}`);

}

 

1. 변수 교환 트릭

 

// 변수에 저장된 값을 교환할 때

let guest = “J”;

let admin = “P”;

 

[guest, admin] = [admin, guest];

console.log(`${guest} ${admin}`);

 

• ‘…’ 로 나머지(rest) 요소 가져오기

: 배열 앞쪽에 있는 요소들만 필요하고 나머지 요소들은 따로 모아서 저장하고 싶을 때

 

let [name1, name2, …rest] = [ “a”, “b”, “c”, “d” ];

 

console.log(name1); // a

console.log(name2); // b

 

// rest 요소들이 저장된 배열 rest

console.log(rest[0]); // c

console.log(rest[1]); // d

console.log(rest.length); // 2

 

• 기본값

: 할당할 값이 없다면 undefined 로 취급된다

 

let [firstName, surname] = [];

 

console.log(firstName); // undefined

console.log(surname); // undefined

 

// = 로 기본값(default value)를 설정할 수 있다

let [name = "Guest", surname = "Anonymous"] = ["Julius"];

 

console.log(name);    // Julius (배열에서 받아온 값)

console.log(surname); // Anonymous (기본값)

 

// 기본값에 함수 또는 복잡한 표현식도 올 수 있다

// name의 prompt만 실행됨

let [surname = prompt('성을 입력하세요.'), name = prompt('이름을 입력하세요.')] = ["김"];

 

// 기본값이 설정되지 않았을 때만 함수 호출

console.log(surname); // 김 (배열에서 받아온 값)

console.log(name);    // prompt에서 받아온 값

 

객체 분해하기

➡️ let [var1, var2} = {var1:…, var2:…}

 

Left : 객체의 프로퍼티의 패턴

Right : 분해하고자 하는 객체

 

let options = {

title: “Menu”,

width: 100,

height: 200

};

 

let {title, width, height} = options;

 

console.log(title); // Menu

console.log(width); // 100

console.log(height); // 200

 

// let {…} 안의 순서가 바뀌어도 동일하게 동작

// 위의 예시와 동일한 예시

let {height, width, title} = { title: "Menu", height: 200, width: 100 }

 

// 객체 프로퍼티와 다른 이름을 가진 변수에 저장

let options = {

  title: "Menu",

  width: 100,

  height: 200

};

 

// { 객체 프로퍼티: 목표 변수 }

let {width: w, height: h, title} = options;

 

// width -> w

// height -> h

// title -> title

 

console.log(title);  // Menu

console.log(w);      // 100

console.log(h);      // 200

 

// 객체의 프로퍼티가 없는 경우

let options = {

  title: "Menu"

};

 

let {width = 100, height = 200, title} = options;

 

console.log(title);  // Menu

console.log(width);  // 100

console.log(height); // 200

 

• 기본값

: 배열에서 처럼 함수나 표현식을 넣을 수 있다

 

let options = {

  title: "Menu"

};

 

let {width = prompt("width?"), title = prompt("title?")} = options;

 

console.log(title);  // Menu

console.log(width);  // prompt 창에 입력한 값

 

// 특이한 점은 콜론(:)과 =를 동시에 사용할 수 있다

let options = {

  title: "Menu"

};

 

let {width: w = 100, height: h = 200, title} = options;

 

console.log(title);  // Menu

console.log(w);      // 100

console.log(h);      // 200

 

// 프로퍼티가 많은 복잡한 객체에서 원하는 정보만 뽑아오기

let options = {

  title: "Menu",

  width: 100,

  height: 200

};

 

// title만 변수로 뽑아내기

let { title } = options;

 

console.log(title); // Menu

 

• 나머지 패턴 ‘…’

: 분해하려는 객체의 프로퍼티 개수 > 할당하려는 변수의 개수 ➡️ 여기서 남는 나머지들을 처리 할 수 있는것이 나머지 패턴(rest pattern)

 

let options = {

  title: "Menu",

  height: 200,

  width: 100

};

 

let {title, ...rest} = options;

 

// title엔 "Menu", rest엔 {height: 200, width: 100}이 할당

console.log(rest.height);  // 200

console.log(rest.width);   // 100

 

1. let 없이 사용하기

 

// wrong code

let title, width, height;

 

{title, width, height} = {title: "Menu", width: 200, height: 100};

// SyntaxError: Unexpected token '=' 

// JS가 {…} 를 코드 블록으로 인식해서 난 에러

 

// {} ➡️ ({})

let title, width, height;

 

({title, width, height} = {title: "Menu", width: 200, height: 100});

console.log( title ); // Menu

 

중첩 구조 분해(nested destructuring)

: 객체나 배열안에 또다른 객체나 배열이 있는 경우 값을 추출할 때

 

let options = {

  size: {

    width: 100,

    height: 200

  },

  items: ["Cake", "Donut"],

  extra: true

};

 

// 코드를 여러 줄에 걸쳐 작성해 의도하는 바를 명확히 드러냄

let {

  size: { // size는 여기,

    width,

    height

  },

  items: [item1, item2], // items는 여기에 할당함

  title = "Menu" // 분해하려는 객체에 title 프로퍼티가 없으므로 기본값을 사용함

} = options;

 

// extra 를 제외한 options 객체의 모든 프로퍼티가 상응하는 변수에 할당됨

 

똑똑한 함수 매개변수

 

// 리팩토링 전 메뉴 생성 함수

function showMenu(title = "Untitled", width = 200, height = 100, items = []) {

  // ...

}

 

// 이런 상황에서 호출할 때 -기본값을 사용해도 괜찮은 경우- 아래와 같이 undefined를 여러 개 넘겨줘야 한다

showMenu("My Menu", undefined, undefined, ["Item1", "Item2"])

 

// 구조 분해 할당으로 리팩토링하기

// 1.매개변수를 객체에 한데 모아 함수에 전달

// 2.전달받은 객체를 분해하여 변수에 할당

 

// 함수에 전달할 객체

let options = {

  title: "My menu",

  items: ["Item1", "Item2"]

};

 

// 똑똑한 함수는 전달받은 객체를 분해해 변수에 즉시 할당함

function showMenu({title = "Untitled", width = 200, height = 100, items = []}) {

 

  // title, items – 객체 options에서 가져옴

  // width, height – 기본값

 

  console.log( `${title} ${width} ${height}` ); // My Menu 200 100

  console.log( items ); // Item1, Item2

}

 

showMenu(options);

 

// 중첩 객체와 콜론(:)을 사용하여 좀 더 복잡한 구조 분해

let options = {

  title: "My menu",

  items: ["Item1", "Item2"]

};

 

function showMenu({

  title = "Untitled",

  width: w = 100,  // width는 w에,

  height: h = 200, // height는 h에,

  items: [item1, item2] 

// items의 첫 번째 요소는 item1에, 두 번째 요소는 item2에 할당함

}) {

 

  console.log( `${title} ${w} ${h}` ); // My Menu 100 200

  console.log( item1 ); // Item1

  console.log( item2 ); // Item2

 

}

 

showMenu(options);

 

똑똑한 함수 매개변수 문법 = 구조 분해 할당 문법

➡️ function({

  incomingProperty: varName = defaultValue

  ...

})

 

참고로 이렇게 함수 매개변수를 구조 분해할 땐, 반드시 인수가 전달된다고 가정되어 사용된다는 점을 유의하자

 

모든 인수에 기본값을 할당 해주려면 빈 객체를 명시적으로 전달해야 한다

 

functionName({});

 

아예 예방 차원에서 이렇게 작성할 수도 있다

function showMenu({ title = "Menu", width = 100, height = 200 } = {}) {

  console.log( `${title} ${width} ${height}` );

}

 

showMenu(); // Menu 100 200

 

이렇게 설정해놓으면 어떤 경우든 분해할 것이 생겨서 함수에 인수를 하나도 전달해주지 않아도 에러가 발생하지 않는다