[Javascript] Destructuring Assignment

Destructuring assignment is a special syntax that allows us to “unpack” arrays or objects into a bunch of variables, as sometimes that’s more convenient.

Array

Syntax

let arr = ["Ilya", "Kantor"]
let [firstName, surname] = arr;

alert(firstName); // Ilya
alert(surname);  // Kantor


// (1) Ignore elements using commas
let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert( title ); // Consul

// (2) With split()
let [firstName, surname] = "Ilya Kantor".split(' ');

// (3) 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]);

// (4) Assign to anything at the left-side
let user = {};
[user.name, user.surname] = "Ilya Kantor".split(' ');

alert(user.name); // Ilya

// (5) Looping with .entries()
let user = {
  name: "John",
  age: 30
};

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

// (6) Swap variables trick
let guest = "Jane";
let admin = "Pete";

[guest, admin] = [admin, guest];
alert(`${guest} ${admin}`); // Pete Jane 

// (7) The ...rest
let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert(name1); // Julius

// Note that type of `rest` is Array.
alert(rest[0]); // Consul
alert(rest.length); // 2

// (8) Default values
let [name = "Guest", surname = "Anonymous"] = ["Julius"];

alert(name);    // Julius 
alert(surname); // Anonymous 

Object

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

let {title, width, height} = options;

alert(title);  // Menu

// (1) changed the order in let {...}
let {height, width, title} = { title: "Menu", height: 200, width: 100 } // Order doesn't matter

// (2)  Assign a property to a variable with another name
let options = {
  title: "Menu",
  width: 100,
  height: 200
};

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

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

// (3) Default values
let options = {
  title: "Menu"
};

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

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

// (4) With propmt
let options = {
  title: "Menu"
};

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

alert(title);  // Menu
alert(width);  // (whatever the result of prompt is)

// (5) The ...rest pattern
let options = {
  title: "Menu",
  height: 200,
  width: 100
};

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

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

// (6)  If there’s no "let"
let title, width, height;

// error : JavaScript treats {...} as a code block. 
{title, width, height} = {title: "Menu", width: 200, height: 100}; 

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

// (7) Nested destructuring
let options = {
  size: {
    width: 100,
    height: 200
  },
  items: ["Cake", "Donut"],
  extra: true
};

let {
  size: { 
    width,
    height
  },
  items: [item1, item2], 
  title = "Menu" 
} = options;

alert(title);  // Menu
alert(width);  // 100
alert(item1);  // Cake

// (8) Smart function parameters
function showMenu(title = "Untitled", width = 200, height = 100, items = []) {
  // ...
}

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

// Beautiful
let options = {
  title: "My menu",
  items: ["Item1", "Item2"]
};

showMenu(options);

// (9) Complex destructuring with nested objects
function({
  incomingProperty: varName = defaultValue
  ...
})

// (10-1)  If we want all values by default
function showMenu({
  title = "Untitled",
  width: w = 100,  
  height: h = 200,
  items: [item1, item2] 
}) {
	// ...
}
showMenu({}); // ok
showMenu(); // error

// (10-2)
function showMenu({ title = "Menu", width = 100, height = 200 } = {}) {
  //...
}

showMenu(); // Menu 100 200