JS Destructuring Assignment (구조분해할당)

https://javascript.info/destructuring-assignment

Destructuring assignment

위 페이지 내용의 대략적인 번역 + 개인적인 필기

Object & Arrray - I need Datas.. a lots of datas..

하여튼 많이 필요함

오브젝트와 어레이는 자바스크립트에서 가장 많이 쓰이는 데이터 구조입니다. 

• 오브젝트는 key와 연동해서 데이터를 저장할 수 있는 하나의 덩어리를 제공합니다
• 어레이의 경우, 순서가 있는 리스트 형식으로 데이터를 모을 수 있도록 합니다 

그렇지만 종종 데이터의 집합보다는 개별 데이터들에 접근 할 수 있는 방법이 필요할 때가 있습니다.

바로 그럴 때, 우리는 destructuring assignment를 이용합니다.

1. 어레이의 경우

역으로 어레이를 작성하여 변수로 바꾸는 방법입니다.

// we have an array with the name and surname
let arr = ["John", "Smith"]

// destructuring assignment
// sets firstName = arr[0]
// and surname = arr[1]
let [firstName, surname] = arr;

alert(firstName); // John
alert(surname);  // Smith

이 경우에는, `split` 과 같이 어레이로 값을 반환하는 메소드를 함께 적용할 수도 있습니다.

let [firstName, surname] = "John Smith".split(' ');
alert(firstName); // John
alert(surname);  // Smith

띄어쓰기를 기점으로 2개의 요소를 가지는 어레이가 반환되므로, 결과가 같습니다.

“Destructuring” does not mean “destructive”

이것은 어레이를 부숴버리거나 파손 시키는 것이 아님을 명심하십시오, 그저 개별 요소를 나누어서 변수에 복사본을 저장하는 방법일 뿐입니다.

따라서 원본 어레이에는 아무런 영향도 가지 않습니다.

Ignore elements using commas

// second element is not needed
let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert( title ); // Consul

원하지 않는 요소가 있다면 쉼표를 활용해 제외시키고 변수로 나눌 수 있습니다

위의 경우 "Caesar"가 제외되도록 빈 쉼표를 사용했습니다.

Works with any iterable on the right-side

사실 어레이뿐만 아니라 모든 반복가능한 객체를 오른쪽에 넣을 수 있습니다.

let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);

왜냐하면 `for .. of` 와 같은 방식의 문법적 설탕으로서 작동하기 때문입니다. 따라서 `=` 을 기준으로 오른쪽 이터러블이 주르르륵 변수로 들어가게 됩니다.

Assign to anything at the left-side

반대로 왼편에는 모든 선언가능한 변수이름이 다 됩니다!

let user = {};
[user.name, user.surname] = "John Smith".split(' ');

alert(user.name); // John
alert(user.surname); // Smith

이렇게 자손을 끌어와도 바로 값을 넣어줄 수 있습니다.

Looping with .entries()

Object Entries 를 이용해서 루프를 돌게 할 수도 있습니다. 

let user = {
  name: "John",
  age: 30
};

// loop over keys-and-values
for (let [key, value] of Object.entries(user)) {
  alert(`${key}:${value}`); // name:John, then age:30
}

오브젝트의 엔트리들을 훑으면서 진행됩니다. 맵을 할 때도 유용합니다. 

let user = new Map();
user.set("name", "John");
user.set("age", "30");

// Map iterates as [key, value] pairs, very convenient for destructuring
for (let [key, value] of user) {
  alert(`${key}:${value}`); // name:John, then age:30
}

Swap variables trick

두개의 변수를 이용해서 안의 값을 서로 교체하는 유명한 트릭도 있습니다.

let guest = "Jane";
let admin = "Pete";

// Let's swap the values: make guest=Pete, admin=Jane
[guest, admin] = [admin, guest];

alert(`${guest} ${admin}`); // Pete Jane (successfully swapped!)

존나게 신기하네요.. 일시적으로 순간적인 어레이를 생성했다가 곧바로 분할하면서 내용물을 바꿔치기 하는 겁니다. 물론 한번에 수많은 변수를 바꿀수도 있습니다.

2. Object Destructuring 

이번엔 오브젝트입니다. 일단 기본적인 문법은 다음과 같습니다.

let {var1, var2} = {var1:…, var2:…}

오른편에 우리가 변수로 바꾸고, 분할하고 싶은 오브젝트가 있습니다. 왼편에는 분할하고 싶은 원 오브젝트의 패턴과 유사한 key값을 변수명으로 할당해줍니다.

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

let {title, width, height} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

실제로는 `options.title`, `options.width`, `options.height` 으로 원래 key와는 다르지만 잘 작동합니다. 

순서도 관계없습니다. 예를 들어, 아래처럼.

// changed the order in let {...}
let {height, width, title} = { title: "Menu", height: 200, width: 100 }

이 문법구조에서 왼편은 복잡해질 수도 있습니다. 만약 새로 값을 담을 변수명을 다른 이름으로 바꾸고 싶다면,

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

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

// width -> w
// height -> h
// title -> title

alert(title);  // Menu
alert(w);      // 100
alert(h);      // 200

w와 h 로 바뀌었습니다. 이때 필요한것은 "뭐가 : 무엇으로" 입니다.

`=` 을 미리 왼편에 넣어둬서 기본값을 지정할 수도 있습니다.

let options = {
  title: "Menu"
};

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

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

본래 오브젝트에는 없는 요소들이지만, 지정한 값으로 잘 생성되고 변수로 저장되었습니다.

3. ... rest ...

어레이나 오브젝트의 내용물이 너무 많아서 변수의 이름짓기가 힘들거나, 그럼에도 내용물들을 날려버리긴 싫고 가지고 싶다면 ...을 사용합니다.

let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

// rest is array of items, starting from the 3rd one
alert(rest[0]); // Consul
alert(rest[1]); // of the Roman Republic
alert(rest.length); // 2

rest라는 변수 이름에 "Consul", "of the Roman Republic" 두개의 요소가 한꺼번에 할당되었습니다. 예스!

물론 오브젝트에서도 됩니다.

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

// title = property named title
// rest = object with the rest of properties
let {title, ...rest} = options;

// now title="Menu", rest={height: 200, width: 100}
alert(rest.height);  // 200
alert(rest.width);   // 100