Skip to content

JavaScript Destructuring object

  • by

JavaScript Destructuring an object means assigning the properties of an object to individual variables. It is a useful JavaScript feature to extract properties from objects and bind them to variables.

let { property1: variable1, property2: variable2 } = object;

The identifier before the colon (:) is the property of the object and the identifier after the colon is the variable.

JavaScript Destructuring object

Simple example code extracts some properties of an object.

<!DOCTYPE html>
<html>
<body>
  <script>
   var hero = {
    name: 'Batman',
    realName: 'Bruce Wayne'
  };
    // OLD
    const n     = hero.name;
    const rName = hero.realName;

    // is equivalent to:
    const { name, realName } = hero;

    console.log(n,rName)

  </script>
</body>
</html>

Output:

JavaScript Destructuring object

Assigning to existing variable names

var employee = {    // Object we want to destructure
    firstname: 'Jon',
    lastname: 'Snow',
    dateofbirth: '1990'
};

// Destructuring the object into our variables
var { firstname, lastname, dateofbirth } = employee;
console.log( firstname, lastname, dateofbirth);

Assigning to new variable names

var employee = { 
    firstname: 'Jon',
    lastname: 'Snow',
    dateofbirth: '1990'
};
var { firstname: fn, lastname: ln, dateofbirth: dob } = employee;
console.log( fn, ln, dob);

Assigning to a variable with default values

var employee = {   
    firstname: 'Jon',
    lastname: 'Snow',
    dateofbirth: '1990'
};

var { firstname, lastname, country } = employee;
console.log( firstname, lastname, country);


var { firstname = 'default firstname', 
      lastname = 'default lastname', 
      country = 'default country' } = employee;
console.log( firstname, lastname, country);

Do comment if you have any doubts or suggestions on this JS object topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading