JavaScript for Beginners #58 Object Destructuring Part 1

Here, we will learn about the object destructuring assignment syntax in JavaScript. We have already seen how to use the destructuring assignment syntax with arrays. Now, we will see some examples of how to use this process with objects and nested objects. This will let us unpack objects into a bunch of variables.

Our mall object:

const mall = {
mallName: "Mall of Irvine",
address: {
street: "555 Main Street",
city: "Irvine",
state: "CA",
zip: "92620"
},
anchorStores: ["Macy's", "Sears", "Dick's Sporting Goods", "JCPenny"],
fastFood: ["Panda Express 🐥", "Subway 🥪", "Burger King 🍔"],
restaurants: ["Red Lobster", "Cheesecake Factory", "California Pizza Kitchen"],
};

0:00 MDN destructuring assignment
0:34 Looking over our mall object
1:10 Old method of storing property values in variables
2:27 Destructuring assignment with objects
3:45 Renaming our variables
5:13 Using the rest pattern ...rest
6:46 Working with default values
8:41 Destructuring with nested objects

JavaScript Playlist:

MDN Destructuring assignment

NodeJS:

VS Code:

[meganbrown]

How many videos are you planning for this playlist? Are you doing projects? I love it so far!

[laponiec]

Is it correct to say, that when you are destructuring the order of the elements in the object does not really matter as long as you refer to these elements in the same way as they are defined in the object, so these two will work the same:
const {restaurants: restaurantsArray, anchorStores:stores, mallName} = mall
const {mallName, restaurants:restaurantsArray, anchorStores:stores} = mall