JavaScript Objects
JavaScript Destructuring
JavaScript destructuring pulls values out of objects and arrays into their own variables.
It replaces several lines of assignment with one.
It works with both objects and arrays, using braces or brackets.
Example
Example
javascript
const person = { name: "Ada", age: 36 };
const { name, age } = person;
console.log(name + " is " + age);Two variables were created in one line.
What is Destructuring?
Destructuring unpacks values from a structure into separate variables.
For objects the names must match the property names.
For arrays the position decides which value you get.
Syntax
Syntax
javascript
const { key } = object;
const [first] = array;Braces for objects, square brackets for arrays.
Array Destructuring
Position decides the value, so the names are up to you.
Example
Example
javascript
const colours = ["red", "green", "blue"];
const [first, second] = colours;
console.log(first + " " + second);Extra elements are simply ignored.
Skipping Elements
Leave a gap with a comma to skip a position.
Example
Example
javascript
const colours = ["red", "green", "blue"];
const [, , third] = colours;
console.log(third);The output is blue.
Renaming
Use a colon to give the variable a different name.
Example
Example
javascript
const person = { name: "Ada" };
const { name: fullName } = person;
console.log(fullName);This is useful when the property name would clash with an existing variable.
Default Values
A default is used when the property is missing.
Example
Example
javascript
const settings = { theme: "dark" };
const { theme, size = "medium" } = settings;
console.log(theme + " " + size);The output is dark medium.
Destructuring Parameters
This is very common when a function takes an options object.
Example
Example
javascript
function describe({ name, city = "unknown" }) {
return name + " from " + city;
}
console.log(describe({ name: "Ada" }));The function reads the properties it needs directly from the argument.
Nested Destructuring
You can reach into nested structures in one step.
Example
Example
javascript
const user = { name: "Ada", address: { city: "London" } };
const { address: { city } } = user;
console.log(city);Keep this shallow, or it becomes hard to read.
Complete Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Destructuring</title>
</head>
<body>
<h1>JavaScript Destructuring</h1>
<p id="result"></p>
<script>
const user = {
name: "Ada Lovelace",
role: "Mathematician"
};
const { name, role, city = "London" } = user;
document.getElementById("result").innerHTML =
name + "<br>" + role + "<br>" + city;
</script>
</body>
</html>Try It Yourself
Run the above example in the Try It Editor.
Try renaming:
Change to { name: fullName } and update the output.
Important Points
- Destructuring creates variables from an object or array in one line.
- Object destructuring matches by property name.
- Array destructuring matches by position.
- Use a colon to rename and an equals sign for a default.
- It works in function parameters too.
Conclusion
Destructuring removes a lot of repetitive assignment.
It is used constantly in modern JavaScript, especially in function parameters.
Renaming and defaults make it flexible enough for messy data.