JavaScript Objects
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
javascript
const person = { name: "Ada", age: 36 };
const { name, age } = person;
console.log(name + " is " + age);Two variables were created in one line.
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
javascript
const { key } = object;
const [first] = array;Braces for objects, square brackets for arrays.
Position decides the value, so the names are up to you.
Example
javascript
const colours = ["red", "green", "blue"];
const [first, second] = colours;
console.log(first + " " + second);Extra elements are simply ignored.
Leave a gap with a comma to skip a position.
Example
javascript
const colours = ["red", "green", "blue"];
const [, , third] = colours;
console.log(third);The output is blue.
Use a colon to give the variable a different name.
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.
A default is used when the property is missing.
Example
javascript
const settings = { theme: "dark" };
const { theme, size = "medium" } = settings;
console.log(theme + " " + size);The output is dark medium.
This is very common when a function takes an options object.
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.
You can reach into nested structures in one step.
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
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>Run the above example in the Try It Editor.
Try renaming:
Change to { name: fullName } and update the output.
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.