in

Introduction to JavaScript Destructuring – DEV Community




What is JavaScript Destructuring?

The destructuring assignment syntax is an ES6 feature, that allows you to unpack values from an array or an object into separate variables..



Destructuring Arrays

Before destructuring was introduced, if we wanted to extract elements from an array, it would be done as follows:

const seasons = ['Winter', 'Spring', 'Summer', 'Fall'] 

const 1 = seasons[0];
const 2 = seasons[1];
const 3 = seasons[2];
const 4 = seasons[3];

console.log(1, 2, 3, 4)
// returns
Winter Spring Summer Fall 
Enter fullscreen mode

Exit fullscreen mode

But using destructuring, we can do it in a much simpler, and streamlined fashion.

To use it, start with the const keyword, followed by brackets []. Within the brackets is the destructuring assignment, or the elements we want to abstract out, then set equal to the original array.

Following that process, in order to destructure the elements of our seasons array, would be done as follows:

const [1, 2, 3, 4] = seasons
console.log(1, 2, 3, 4)
// returns 
Winter Spring Summer Fall 
Enter fullscreen mode

Exit fullscreen mode

The original array is not mutated, and remains untouched.

If for whatever reason, we only wanted to pull out certain variables within an array and not all, say only Summer and Fall, to do that within an array, leave an empty space, or a hole.

const [,, third, fourth] = ['Winter', 'Spring', 'Summer', 'Fall'] 
console.log(third, fourth)
// returns 
Summer Fall
Enter fullscreen mode

Exit fullscreen mode

We can also set default values for variables when extracting them, so that if that element is not part of the array, something will be returned.

const [a, b, c, d, e = "February"] = seasons 
console.log(a, b, c, d, e)
// returns 
Winter Spring Summer Fall February 
Enter fullscreen mode

Exit fullscreen mode

It is possible to destructure nested arrays.

const nestedArr = ['Winter', 'Spring', ['Jan', 'Feb', 'March']]

const [x, , [t, u, v]] = nestedArr;
console.log(x, t, u, v);
// returns 
Winter Jan Feb March
Enter fullscreen mode

Exit fullscreen mode

It’s also possible to switch the position of variables using destructuring.

Take the array of flavors, and to test out this example, make sure it is declared with let and not const, as using const will through an error.

let flavors = ["Vanilla", "Chocolate"];
const [vanilla, chocolate] = flavors; 
console.log(vanilla, chocolate);
// returns 
Vanilla Chocolate
Enter fullscreen mode

Exit fullscreen mode

If we wanted to switch the flavors in the destructuring assignment, it’s possible to do so in one simple line of code, rather than going through the process of reassigning one of the variables to a temporary variable, before reassigning altogether:

const [vanilla, chocolate] = [chocolate, vanilla];
console.log(vanilla, chocolate);
// returns 
Chocolate Vanilla 
Enter fullscreen mode

Exit fullscreen mode



Destructuring Objects

To use destructuring with objects, the philosophy is pretty much the same, but there are a few differences. The first is that instead of using brackets, curly braces are used instead {}.

const dog = {
    name: "Jack",
    breed: "Heinz 57", 
    age: 10.5,
    likes: [ "Long walks", "Belly rubs", "Chasing Squirrels"]}
Enter fullscreen mode

Exit fullscreen mode

Unlike with an array, within an object, the order of elements doesn’t matter. All we need is the property name to proceed.

const { name, breed, age, likes } = dog;
console.log(name, breed, age, likes);
// returns 
Jack Heinz 57 10.5 
(3) ['Long walks', 'Belly rubs', 'Chasing Squirrels']
0: "Long walks"
1: "Belly rubs"
2: "Chasing Squirrels"
Enter fullscreen mode

Exit fullscreen mode

If we wanted the variable names to be different from the property names, we still need to reference the property names as before, but followed by a colon, and the new property name.

const { name: nickName, breed: type, age: years, likes: interests } = dog;
console.log(nickName, type, years, interests);
// returns 
Jack Heinz 57 10.5 
(3) ['Long walks', 'Belly rubs', 'Chasing Squirrels']
0: "Long walks"
1: "Belly rubs"
2: "Chasing Squirrels"
Enter fullscreen mode

Exit fullscreen mode

Just as with an array, we can also assign a default value within an object. It’s done in the same manner.

const {
  name: nickName,
  breed: type,
  age: years,
  likes: interests,
  favoriteWalk = 'On the street',
} = dog;
console.log(nickName, type, years, interests, favoriteWalk);
// returns 
Jack Heinz 57 10.5 (3) ['Long walks', 'Belly rubs', 'Chasing Squirrels'] On the street
Enter fullscreen mode

Exit fullscreen mode

Just as it’s possible to destructure nested arrays, it’s possible to destructure nested objects.

Again, the curly braces are needed to access an object within an object.

const dog2 = {
  name: 'Maya',
  age: 1,
  breed: 'Samoyed',
  address: {
    city: 'Berlin',
    country: 'Germany',
  },
};

const {
  address: { city },
} = dog2;

console.log(city);
// returns 
Berlin
Enter fullscreen mode

Exit fullscreen mode

Destructuring is an incredibly powerful, and useful tool for developers. This is just an introduction to some of its capabilities, but there is a lot more that it’s possible to do using destructuring assignment in ES6.



Further Reading

Exploring ES6 – Chapter 10: Destructuring

ES6 in depth



Source: https://dev.to/dani8439/introduction-to-javascript-destructuring-43o8

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

Primary — Forum & Reddit info while you shop

Dense Deep Unfolding Network with 3D-CNN Prior for Snapshot Compressive Imaging