Introduction to Javascript Destructuring

Javascript Destructuring facilitates the process of obtaining the individual values of arrays and objects, then assigning them to variables. This can be possible with a few lines of code.

Destructuring can be useful in different situations, which I will describe below.

Array Destructuring

Let's start talking about array destructuring, this syntax can allow you to obtain the values from the array and assign them to variables. the following examples apply this in different ways:

Assigning a variable from an array

const [a, b] = [1, 2, 3, 4, 5, 6, 7];
console.log(a); // Output: 1
console.log(b); // Output: 2

Assigning a variable from a nested array

const [a, [b]] = [1, [3, 2], 3, 4, 5, 6, 7];
console.log(a); // Output: 1
console.log(b); // Output: 3

Skipping values is possible by leaving an empty space and a comma. the number of commas will skip a number of values inside the array.

const [a,, c] = [1, 2, 3, 4, 5, 6, 7];
console.log(a); // Output: 1
console.log(c); // Output: 3

We can combine the rest operator ... with destructuring, which assigns the rest of the array values to the variable rest.

const [a, b, ...rest] = [1, 2, 3, 4, 5, 6, 7]
console.log(rest); // Output: [3, 4, 5, 6, 7]

We can also define default values in case the value from the array is not present, in this example below, we are destructuring an array with 2 values, however, we have a third variable c which will be assigned to a default value of 3.

const [a, b, c = 3] = [1, 2];
console.log(a, b, c); // Output: 1 2 3

Whenever the value is present in the array, the variable will no be assigned to the default value but to the value in the array. below we see the variable c is assigned to the value from the array, which is 4.

const [a, b, c = 3] = [1, 2, 4];
console.log(a, b, c); // Output: 1 2 4

Swapping variables with array destructuring

let name1 = 'Louise';
let name2 = 'Ellie';

console.log(name1, name2); // Louise Ellie 
[name1, name2] = [name2, name1];
console.log(name1, name2); // Ellie Louise 

Object Destructuring

Object destructuring allows you to obtain the values from the object properties and assign them to variables. the following examples apply this in different ways:

Assigning a variable from an object

const {name, age} = {name: 'Ellie', age: 27};
console.log(name); // Output: Ellie
console.log(age); // Output: 27

Assigning a variable from a nested object

const details = {
  name: 'Louise',
  age: 25,
  languages: {
    frontEnd: ['HMTL', 'CSS', 'JavaScript', 'React'],
    backEnd: ['Node.js', 'Express.js'],
    database: ['PostgreSQL', 'MongoDB'],
  }
}

const {name, age, languages: { frontEnd, backEnd, database }} = details;
console.log(frontEnd); // Output: ["HMTL", "CSS", "JavaScript", "React"]
console.log(backEnd); // Output: ["Node.js", "Express.js"]
console.log(database); // Output: ["PostgreSQL", "MongoDB"]

Assigning the rest of an object to a variable

const { a, b, ...rest } = { a: 12, b: 43, c: 67, d: 17 };
console.log(a); // Output: 12
console.log(b); // Output: 43
console.log(rest); // Output: {c: 67, d: 17}

With object destructuring is also possible to set default values, but also to rename values. renaming values is usually useful when there are invalid property identifiers inside objects. in the example below name is assigned to the firstName variable and the likesProgramming variable is assigned to false as a default value.

const {name: firstName, age, likesProgramming = false} = {name: 'Ellie', age: 27};
console.log(firstName); // Output: Ellie
console.log(age); // Output: 27
console.log(likesProgramming); // Output: false

const {name: firstName, age, likesProgramming = false} = {name: 'Ellie', age: 27, likesProgramming: true};
console.log(likesProgramming); // Output: true

Destructuring an object passed as a functions argument. in the example below, the name, age, and country are being destructured right in the function argument. (This would also be possible with arrays).

const details = {
  name: "Max",
  age: 23,
  country: "Spain"
};

const showDetails = ({ name, age, country }) => {
  console.log("Name: " + name, "Age: " + age, "Country: " + country);
};

showDetails(details); // Output: Name: Max Age: 23 Country: Spain 

It is also possible to rename and set default values inside functions. In the example below, the name value is assigned to the variable firstName, and the likesProgramming variable has a default value of false.

const showDetails = ({name: firstName, age, likesProgramming = false}) => {
  console.log('First Name: ' + firstName + ', ' + 'Age: ' + age + ', ' + 'Likes Programming: ' + likesProgramming);
}

const details = {name: 'Ellie', age: 27};
showDetails(details);
// Output: First Name: Ellie, Age: 27, Likes Programming: false

Here we add the property likesProgramming set to true inside the details object, therefore once we run the showDetails function it won't use the default value anymore. It will destructure the property from the object instead.

const details = {name: 'Ellie', age: 27, likesProgramming: true};
showDetails(details);
// Output: First Name: Ellie, Age: 27, Likes Programming: true

A returned object from a function, can be destructured right after the function has been called, as shown below. (This would also be possible with arrays).

const showDetails = () => ({name: 'Knox', age: 20, city: 'New York'});

const {name, city} = showDetails();

console.log(name); // Output: Knox
console.log(city); // Output: New York

Thank you for reading! See you in the next one, Happy Coding! 😃