Destructuring assignment is a syntax that allows us to “unpack” arrays or objects into variables Array destructuring let arr = ["John", "Smith"] let [firstName, surname] = arr // firstName = "John", surname = "Smith" let [firstName, surname] = "John Smith".split(' ') // firstName = "John", surname = "Smith" let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"] // title = "Consul" let [one, two, three] = [1, 2, 3] // one = 1, two = 2, three = 3 let user = {} [user.name, user.surname] = ["John", "Smith"] // user.name = "John", user.surname = "Smith" let [one, two, three] = new Set([1, 2, 3]) // works with any iterable let [a, b, c] = "abc" // a = "a", b = "b", c = "c" // works with any iterable 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 } Swap variables trick let guest = "Jane"; let admin = "Pete"; [guest, admin] = [admin, guest]; // guest = "Pete", admin = "Jane" Rest ... let [num1, num2] = [1, 2, 3, 4] // num1 = 1, num2 = 2 let [num1, num2, ...rest] = [1, 2, 3, 4] // rest[0] = 3, rest[1] = 4, rest.length = 2 let [num1, num2, ...arr] = [1, 2, 3, 4] // arr[0] = 3, arr[1] = 4, arr.length = 2 let [num1, num2] = [1] // num1 = 1, num2 = undefined let [num1 = 1, num2 = 2] = [666] // num1 = 666, num2 = 2 let [name = prompt('name?'), surname = prompt('surname?')] = ['John'] // John (from array), whatever from prompt // prompt will run only for the missing value (surname) Object destructuring let options = {title: "Menu", width: 100, height: 200} let {title, width, height} = options // title = "Menu", width = 100, height = 200 let {height, width, title} = options // same // order does not matter let {width: w, height: h, title} = options // title = "Menu", w = 100, h = 200 let {title} = options // title = "Menu" let {title, ...rest} = options // now title="Menu", rest={height: 200, width: 100}, rest.height = 200, rest.width = 100 Default values let options = {title: "Menu"} let {width = 100, height = 200, title} = options // title = "Menu", width = 100, height = 200 let {width: w = 100, height: h = 200, title} = options; let {width = prompt("width?"), title = prompt("title?")} = options // values can be any expressions or even function calls Rest ... let options = {title: "Menu", height: 200, width: 100} let {title, ...rest} = options; // title="Menu", rest={height: 200, width: 100} let in destructuring let {title, width, height} = {title: "Menu", width: 200, height: 100}; // WORKS let title, width, height; {title, width, height} = {title: "Menu", width: 200, height: 100}; // ERROR in this line // "{}" are treated as a code block in the main code flow (not inside another expression) ({title, width, height} = {title: "Menu", width: 200, height: 100}) // WORKS Nested destructuring let options = { size: { width: 100, height: 200 }, items: ["Cake", "Donut"], extra: true } // The pattern has the same structure to extract values let { size: { width, height }, items: [item1, item2], // assign items here title = "Menu" // not present in the object (default value is used) } = options; title, width, height, item1, item2 // Menu 100 200 Cake Donut Destructure and rename const bio = { firstName: 'Bruce', lastName: 'Lee', } const {firstName: first, lastName: last} = bio console.log(first, last) // Bruce Lee Destructure with default values const settings = { speed: 100} const { speed = 750, width = 500 } = settings console.log(speed, width) // 100, 500 Smart function parameters function showMenu({ title = "Untitled", width = 200, height = 100, items = [] } = {}) { alert(`${title} ${width} ${height} ${items}`); } let options = { title: "My menu", height: 100, items: ["Item1", "Item2"] }; showMenu(options); // My menu 200 100 Item1,Item2 showMenu(); // Untitled 200 100 console.log() console.log('hello') // 'hello' let { log } = console log('hello') // 'hello'