— JavaScript, beginner, tutorial, learn-modern-javascript — 1 min read
By the end of this tutorial, you will be able to:
When you have to access numerous properties from an object (e.g., state or props in a React component), you can use destructuring assignment. This avoids the need to assign them to a variable one by one, resulting in cleaner syntax. You can destructure objects, arrays, and even function parameters.
The destructuring syntax allows data to be easily extracted from arrays or objects into separate variables.
Take a look at the code below:
1const person = {2 name: "Hou Chia",3 title: "software engineer",4 city: "Brooklyn,NY",5 age: 32,6};If you wanted to extract the values from the person object into variables that you can use in your program, you might write something like this:
1const name = person.name;2const title = person.title;3const city = person.city;4const age = person.age;With destructuring, you can accomplish the same thing in one line of code:
1const { name, title, city, age } = person;2console.log(name, title, city, age);If you wanted to store the data in variable names that are different from the property names of the object, you can specify the custom variable names using a : followed by the custom name, like this:
1const {2 name: employeeName,3 title: employeeTitle,4 city: employeeCity,5 age: employeeAge,6} = person;7console.log(employeeName, employeeTitle, employeeCity, employeeAge);In React, you'd often have to access values stored in the state object, as follows:
1const state = { id: 1, coins: ["bitcoin", "ethereum"], error: null };2
3// no object destructuring4const id = state.id;5const coins = state.coins;6const error = state.error;7
8// object destructuring9const { id, coins, error } = state;Destructuring assignment keeps the syntax concise.
You can also destructure arrays, as follows:
1const letters = ["a", "b", "c"];2
3// no array destructuring4const firstLetter = letters[0];5const secondLetter = letters[1];6const thirdLetter = letters[2];7
8// array destructuring9const [firstLetter, secondLetter, thirdLetter] = list;You can also assign default values using =:
1let [a = 4, b = 3] = [2];2console.log(a); // 23console.log(b); // 3You can also use destructuring to simplify the arguments passed to a function. If a function takes more than 1 parameter, we can pass in an object that contains possible key/values and destructure the object:
The function introduce() below accepts four arguments:
1const introduce = (name, title, city, age) => {2 return `Hello, my name is ${name}, and I'm a ${title}. I live in ${city}, and I'm ${age} years old.`;3};4introduce("Hou", "software engineer", "Brooklyn, NY", 32);When calling the introduce() function, the order in which the arguments are passed to the introduce() function matters here. If the order of any two arguments were to be accidentally switched, then the function would output a nonsensical message.
With destructuring, you can simply pass an object that contains all the relevant data for the person, like this:
1const person = {2 name: "Hou Chia",3 title: "software engineer",4 city: "Brooklyn,NY",5 age: 32,6};7
8const introduce = ({ name, title, city, age }) => {9 return `Hello, my name is ${name}, and I'm a ${title}. I live in ${city}, and I'm ${age} years old.`;10};11
12console.log(introduce(person));You can destructure the person object directly within the function parameter.
In React, functional components receive the props object in their function signature. Often, you'd have to access the content within props, so you can destructure the content directly in the function signature.
1// no destructuring2function Post(props) {3 return (4 <article>5 <h1>{props.title}</h1>6 <h2>{props.subtitle}</h2>7 <p>{props.body}</p>8 </article>9 );10}11
12// destructuring13function Post({ title, subtitle, body }) {14 return (15 <article>16 <h1>{title}</h1>17 <h2>{subtitle}</h2>18 <p>{body}</p>19 </article>20 );21}What did you like or didn't like about this post? Let me know what worked well and what can be improved. Your feedback is much appreciated!