Loading lesson path
Destructuring is a JavaScript feature that allows you to extract values from objects or arrays into distinct variables. In React, it's commonly used with props, hooks, and state management.
Destructuring makes React code cleaner and more readable by reducing repetitive object and array access.
Here is the old way of assigning array items to a variable:
const vehicles = ['mustang', 'f-150', 'expedition'];// old way const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];//You can now access each variable separately:
document.getElementById('demo').innerHTML = truck;Here is the new way of assigning array items to a variable:
const vehicles = ['mustang', 'f-150', 'expedition'];const [car, truck, suv] = vehicles;//You can now access each variable separately:
document.getElementById('demo').innerHTML = truck;When destructuring arrays, the order that variables are declared is important. If we only want the car and suv we can simply leave out the truck but keep the comma:
const vehicles = ['mustang', 'f-150', 'expedition'];const [car,, suv] = vehicles;Destructuring comes in handy when a function returns an array:
Example function dateInfo(dat) {
const d = dat.getDate();
const m = dat.getMonth() + 1;
const y = dat.getFullYear();return [d, m, y];
}const [date, month, year] = dateInfo(new Date());You can use destructuring to extract the values from an object:
Unpack the values from an object:
const person = {
firstName: "John", lastName: "Doe", age: 50
};// Destructuring let {firstName, lastName, age} = person;//You can now access each variable separately:
document.getElementById("demo").innerHTML = firstName;For objects, the order of the properties does not matter:
Unpack the values in a random order:
const person = {
firstName: "John", lastName: "Doe", age: 50
};// Destructuring let {lastName, age, firstName} = person;
You can extract only the value(s) you want:Extract only firstName from the object:
const person = {
firstName: "John", lastName: "Doe", age: 50
};// Destructuring let {firstName} = person;For potentially missing properties we can set default values:
Set a default value for the missing property:
const person = {
firstName: "John", lastName: "Doe", age: 50
};// Destructuring let {firstName, lastName, age, country = "Norway"} = person;We can also destructure deeply nested objects by referencing the nested object then using a colon and curly braces to again destructure the items needed from the nested object:
const person = {
firstName: "John", lastName: "Doe", age: 50, car: {
brand: 'Ford', model: 'Mustang',
}
};// Destructuring let {firstName, car: { brand, model }} = person;
let message = `My name is ${firstName}, and I drive a ${brand} ${model}.`;Destructuring in our JavaScript Tutorial.
Destructuring is particularly useful in React for working with props, hooks, and API responses. It helps make your code more concise and easier to read.
When a component receives props, you can use destructuring to extract the values you need. Check out the difference between using and not using destructuring: //Using destructuring:
function Greeting({ name, age }) {
return <h1>Hello, {name}! You are {age} years old.</h1>;
}//NOT using destructuring:
function Greeting(props) {
return <h1>Hello, {props.name}! You are {props.age} years old.</h1>;
}import { createRoot } from 'react-dom/client'function Greeting({ name, age }) {
return <h1>Hello, {name}! You are {age} years old.</h1>;
}createRoot(document.getElementById('root')).render(
<Greeting name="John" age={25} />
);useState Hook Destructuring When a component uses the useState hook, we use destructuring to extract the values from it.
Using destructuring to extract values from useState:
import { createRoot, useState } from 'react-dom/client'function Counter() {
// Destructuring the array returned by useState const [count, setCount] = useState(0);return (
<button onClick={() => setCount(count + 1)}>Count: {count} </button>
);
}createRoot(document.getElementById('root')).render( <Counter />
);