Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS DSA TYPESCRIPT ANGULAR ANGULARJS GIT POSTGRESQL MONGODB ASP AI R GO KOTLIN SASS VUE GEN AI SCIPY CYBERSECURITY DATA SCIENCE INTRO TO PROGRAMMING BASH RUST

Basic JavaScript

JS Tutorial JS Introduction JS Where To JS Output JS Syntax JS Statements JS Comments JS Variables JS Data Types JS Let JS Const JS Operators JS Strings JS String Templates JS Numbers JS Functions JS Objects JS Events JS Conditional JS Loops JS Arrays JS Dates JS Math JS Booleans JS Logical JS RegExp JS Errors JS Scope JS Hoisting JS Strict Mode JS Code Blocks JS UTF-8 Characters

JS Advanced

JS Versions JS Overview JS Data Types JS String Methods JS Number Methods JS Date Methods JS Array Methods JS Functions JS Objects JS Classes JS Set Methods JS Map Methods JS Loops JS RegExp Methods JS Promises JS Programming JS HTML DOM JS Windows JS Web API JS AJAX JS JSON JS jQuery JS Graphics JS Examples

JS References

JavaScript Objects


JavaScript Destructuring

Destructuring Assignment Syntax

The destructuring assignment syntax unpack object properties into variables:

let {firstName, lastName} = person;

It can also unpack arrays and any other iterables:

let [firstName, lastName] = person;

Object Destructuring

Example

// Create an Object
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50
};

// Destructuring
let {firstName, lastName} = person;
Try it Yourself »

The order of the properties does not matter:

Example

// Create an Object
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50
};

// Destructuring
let {lastName, firstName} = person;
Try it Yourself »

Note:

Destructuring is not destructive.

Destructuring does not change the original object.


Object Default Values

For potentially missing properties we can set default values:

Example

// Create an Object
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50
};

// Destructuring
let {firstName, lastName, country = "US"} = person;
Try it Yourself »

Object Property Alias

Example

// Create an Object
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50
};

// Destructuring
let {lastName : name} = person;
Try it Yourself »

String Destructuring

One use for destructuring is unpacking string characters.

Example

// Create a String
let name = "W3Schools";

// Destructuring
let [a1, a2, a3, a4, a5] = name;
Try it Yourself »

Note:

Destructuring can be used with any iterables.



Array Destructuring

We can pick up array variables into our own variables:

Example

// Create an Array
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];

// Destructuring
let [fruit1, fruit2] = fruits;
Try it Yourself »

Skipping Array Values

We can skip array values using two or more commas:

Example

// Create an Array
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];

// Destructuring
let [fruit1,,,fruit2] = fruits;
Try it Yourself »

Array Position Values

We can pick up values from specific index locations of an array:

Example

// Create an Array
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// Destructuring
let {[0]:fruit1 ,[1]:fruit2} = fruits;
Try it Yourself »

The Rest Property

You can end a destructuring syntax with a rest property.

This syntax will store all remaining values into a new array:

Example

// Create an Array
const numbers = [10, 20, 30, 40, 50, 60, 70];

// Destructuring
const [a,b, ...rest] = numbers
Try it Yourself »

Destructuring Maps

Example

// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

// Destructuring
let text = "";
for (const [key, value] of fruits) {
  text += key + " is " + value;
}
Try it Yourself »

Swapping JavaScript Variables

You can swap the values of two variables using a destructuring assignment:

Example

let firstName = "John";
let lastName = "Doe";

// Destructuring
[firstName, lastName] = [lastName, firstName];
Try it Yourself »

Browser Support

Destructuring is an ES6 feature.

ES6 is fully supported in all modern browsers since June 2017:

Chrome
51
Edge
15
Firefox
54
Safari
10
Opera
38
May 2016 Apr 2017 Jun 2017 Sep 2016 Jun 2016


×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2025 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.