How To Extract Data From JavaScript Object Using ES6

In this tutorial, you’ll see how you can extract data from JavaScript object using ES6 and traditional approach.

Let’s first have a look at how you can extract data using traditional approach.

let data = {
  "name"  : "Shaam",
  "country" : "INDIA",
  "age" : 25
};

console.log(data.name)

ES6 introduced a new feature called Destructuring assignment which can be used to extract data from JavaScript object.

let data = {
  "name"  : "Shaam",
  "country" : "INDIA",
  "age" : 25
};

let { name } = data;
console.log(name);

You need to specify the Object key inside curly braces as shown in the above code to extract that particular key value from JavaScript object.

Note : The variable name mentioned inside the curly braces needs to be the same as the object key to extract that particular object key value.

For example, to extract country key value from the above object, the code will be :

let data = {
  "name"  : "Shaam",
  "country" : "INDIA",
  "age" : 25
};

let { country } = data;
console.log(country);

There might be situations where you may want to extract the object key value to a different variable. In such cases you can use the following syntax :

let data = {
  "name"  : "Shaam",
  "country" : "INDIA",
  "age" : 25
};

let { name : empName } = data;
console.log(empName);