JavaScript Array and Object Destructuring

JavaScript destructuring assignment is used to unpack values from arrays, or properties from objects, into distinct variables. Using destructuring makes it more convenient to extract values and assign them to variables.

Array destructuring

const [India, USA, Japan] = ['Rupee', 'Dollar', 'Yen'];
console.log("Indian Currency - " + India); // Indian Currency - Rupee
console.log("American Currency - " + USA);// American Currency - Dollar
console.log("Japanese Currency - " + Japan);// Japanese Currency - Yen

Which is equivalent to this old way of assigning array elements to variables.

const currencies = ['Rupee', 'Dollar', 'Yen'];
const India = currencies[0];
const USA = currencies[1];
const Japan = currencies[2];
console.log("Indian Currency - " + India);
console.log("American Currency - " + USA);
console.log("Japanese Currency - " + Japan);

Extracting specific elements of an array

You may not want to assign all the elements to variables. When destructuring, don't use any variable for the array element whose value is not needed, though you still need to keep the comma for the skipped element. For example, assigning only Rupee and Yen.

const currencies = ['Rupee', 'Dollar', 'Yen'];
const [India, , Japan] = currencies;

Using Destructuring when function returns an array

You can use destructuring to assign an array returned from a function to variables. Infact that's one of the most common uses of destructuring which you'll see in React.

For example useState() hook in React returns an array with exactly two values; current state and set function. Assignment for these two returned values can be done like this-

const [prevCount, setPrevCount] = useState(count);

Object destructuring in JavaScript

const obj = {first: 'Ramesh', last: 'Sharma', age: 35 };
const {first, last, age} = obj;
console.log(first); // Ramesh
console.log(last); // Sharma
console.log(age); // 35

Which is equivalent to this old way of assigning object properties to variables.

const obj = {first: 'Ramesh', last: 'Sharma', age: 35 };
   
var f = obj.first;
var l = obj.last;
var ag = obj.age;

Assigning different name

When destructuring an object you have to use the same name for the variable as the mapped object key. If you want to use different names then you have to specify those names explicitly.

//specify new name after colon
const { first: firstName, last: lastName, age} = obj;
console.log(firstName);
console.log(lastName);
console.log(age);

Extracting specific properties of an object

You can extract specific properties of an object by giving just the needed keys. For example, if you need only first and age.

const obj = {first: 'Ramesh', last: 'Sharma', age: 35 };
const {first, age} = obj;

Passing destructured object as function arguments

If you have a function that takes object as an argument then you can pass the destructured object as function arguments to make your function more readable.

// function taking params as destructuring
function displayPerson({first, last, age}){
  console.log("first ", first, "last ", last, "age ", age)
}

That's where you will see its usage in React, to destructure props object.

In calling component-

<Person first="Ramesh" last="Sharma" age=35 />

Person Component with props

const Person = (props) => {
  return(
    <h2>{props.first} {props.last} {props.age}</h2>
  );
}

Same thing with props destructuring

const Person = ({first, last, age}) => {
  return(
    <h2>{first} {last} {age}</h2>
  );
}

That's all for this topic JavaScript Array and Object Destructuring. If you have any doubt or any suggestions to make please drop a comment. Thanks!

Related Topics

You may also like-

Tech Tutorials

Tuesday, December 6, 2022