The ins-and-outs of object destructuring with vanilla JS

One of my favorite newer additions to JavaScript is the destructing syntax.
Destrucing in JavaScript provides a way to pull array values and object properties into individual variables. Today, we’re going to look at how it works with objects, and tomorrow, we’ll look at arrays.
Let’s dig in!
The syntax basics Imagine you had an object with the best movies by movie studio, and you wanted to pull them out into individual variables.


This content originally appeared on Go Make Things and was authored by Go Make Things

One of my favorite newer additions to JavaScript is the destructing syntax.

Destrucing in JavaScript provides a way to pull array values and object properties into individual variables. Today, we’re going to look at how it works with objects, and tomorrow, we’ll look at arrays.

Let’s dig in!

The syntax basics

Imagine you had an object with the best movies by movie studio, and you wanted to pull them out into individual variables.

You could use dot notation for that.

let movies = {
	disney: 'Moana',
	pixar: 'Up',
	dreamworks: 'How to Train Your Dragon',
	nickelodeon: 'Wonder Park'
};

let disney = movies.disney;
let pixar = movies.pixar;
let dreamworks = movies.dreamworks;
let nickelodeon = movies.nickelodeon;

But destructuring provides a simpler way to do to the same thing.

You define an object of variables, and the destructuring syntax will pull the properties at the matching keys out and assign them to the variables.

let {disney, pixar, dreamworks, nickelodeon} = movies;

// logs "Up"
console.log(pixar);

Renaming properties with destructuring

You can also rename a variable to something different than its key in the object. In your object variable, add a colon (:) and the new variable name you’d like to use.

For example, let’s change nickelodeon to nick.

let {disney, pixar, dreamworks, nickelodeon: nick} = movies;

// logs "Wonder Park"
console.log(nick);

You don’t need to destructure the entire object

You do not need to assign every key in an object to a variable. For example, if you only wanted pixar and dreamworks, you would do this.

let {pixar, dreamworks} = movies;

// logs "How to Train Your Dragon"
console.log(dreamworks);

Only destructured properties are assigned to variables.

// Uncaught ReferenceError: disney is not defined
console.log(disney);

🔥 Join the Vanilla JS Academy! A new session starts on January 30. Click here to learn more.


This content originally appeared on Go Make Things and was authored by Go Make Things


Print Share Comment Cite Upload Translate Updates
APA

Go Make Things | Sciencx (2023-01-19T14:30:00+00:00) The ins-and-outs of object destructuring with vanilla JS. Retrieved from https://www.scien.cx/2023/01/19/the-ins-and-outs-of-object-destructuring-with-vanilla-js/

MLA
" » The ins-and-outs of object destructuring with vanilla JS." Go Make Things | Sciencx - Thursday January 19, 2023, https://www.scien.cx/2023/01/19/the-ins-and-outs-of-object-destructuring-with-vanilla-js/
HARVARD
Go Make Things | Sciencx Thursday January 19, 2023 » The ins-and-outs of object destructuring with vanilla JS., viewed ,<https://www.scien.cx/2023/01/19/the-ins-and-outs-of-object-destructuring-with-vanilla-js/>
VANCOUVER
Go Make Things | Sciencx - » The ins-and-outs of object destructuring with vanilla JS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/01/19/the-ins-and-outs-of-object-destructuring-with-vanilla-js/
CHICAGO
" » The ins-and-outs of object destructuring with vanilla JS." Go Make Things | Sciencx - Accessed . https://www.scien.cx/2023/01/19/the-ins-and-outs-of-object-destructuring-with-vanilla-js/
IEEE
" » The ins-and-outs of object destructuring with vanilla JS." Go Make Things | Sciencx [Online]. Available: https://www.scien.cx/2023/01/19/the-ins-and-outs-of-object-destructuring-with-vanilla-js/. [Accessed: ]
rf:citation
» The ins-and-outs of object destructuring with vanilla JS | Go Make Things | Sciencx | https://www.scien.cx/2023/01/19/the-ins-and-outs-of-object-destructuring-with-vanilla-js/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts