Destructuring In JavaScript

Hello Devs,

In this article we will learn Destructuring in JavaScript

Table Of Contents

• Table Of Contents
• 1. Array Destructuring:
• 2. Some Additional use of Destructuring
• 3. we can also assign default values using destructuring assignment
• 4. Destructuring of nested array
• 5. Object Destructuring
• 6.Nested object destructuring
• 7. How to skip values in Array destructuring
• 8.Combined Array and Object Destructuring

Without wasting any time lets get into it,

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

But why do we need destructuring ? Lets first see the traditional way of accessing the array elements and object properties,

let arr = [1, 2, 3, 4];
arr[2]; //3

let obj = {
  fname: "john",
  lname: "doe",
};
obj.fname; //john
//or
obj["fname"]; //john

Think of accessing elements or properties when the array or object is nested, its little complex.

Now we will see how things gets simpler/ easier using Destructuring concept.

A destructuring assignment looks like this:

«pattern» = «value»

1. Array Destructuring:

syntax:

[a, b, c] = some_array;

Example:

let arr = ["John", "Doe"];

// older way
let firstName = arr[0];
let lastName = arr[1];
console.log(firstName, lastName); //John Doe

//array destructuring way
let [firstName, lastName] = arr;
console.log(firstName, lastName); //John Doe

//what if there are more values in array
var [fname, lname] = ["john", "doe", "capscode", 26, car];

//we can use rest operator,
var [fname, lname, ...others] = ["john", "doe", "capscode", 26, car];

2. Some Additional use of Destructuring

//Works with any iterables of JavaScript
String iterable
let [a, b, c] = "abc";
console.log(a) // "a"
console.log(b) // "b"
console.log(c) // "c"

let [first, ...rest] = "Hello";
console.log(first) // "H"
console.log(rest) // ["e", "l", "l", "o"]

//Swap variables trick using array destructuring
let guest = "Jane";
let admin = "Pete";

// Swap values: make guest=Pete, admin=Jane
[guest, admin] = [admin, guest];

3. we can also assign default values using destructuring assignment

let arr = []
let [firstName, surname] = arr;
alert(firstName); // undefined
alert(surname); // undefined

so to get out of this,
// default values
let [name = "Guest", surname = "Anonymous"] = ["Julius"];
alert(name);    // Julius (from array)
alert(surname); // Anonymous (default used)

//Make sure to handle the error when the values of arr is an non iterable value like undefined, null, true, false,  

4. Destructuring of nested array

const person = ["John", ["capscode", "google", "yahoo"], "Doe"];
const [fname, [comp1, comp2, comp3]] = person;
console.log(comp3); //"yahoo"

5. Object Destructuring

Syntax:

let {var1, var2} = {var1:…, var2:…}

Example:

let person = {
  fname: "John",
  lname: "Doe",
  company: "capscode",
};

let { fname, lname, company } = person;

//we can also use rest operator
let { fname, ...others } = person;
console.log(others);
console.log(others.lname);
console.log(others.company);

//how to assing a new name to the variable along wiht the default value
let { fname:myname=" ", lname, company } = person;
console.log(myname) //John

what if we will use Destructuring assignment without declaration?

let fname, lname, company;

{fname, lname, company} = {
     fname: "John",
     lname: "Doe",
     company: "capscode"
};
// error in this line

The problem is that JavaScript treats {.....} in the main code flow (not inside another expression) as a code block.

The parentheses ( ... ) around the assignment statement are required when using object literal destructuring assignment without a declaration.

{a, b} = {a: 1, b: 2} is not valid stand-alone syntax, as the {a, b} on the left-hand side is considered a block and not an object literal.

// okay now
({ fname, lname, company } = {
  fname: "John",
  lname: "Doe",
  company: "capscode",
});

🔥NOTE: 🔥Your (....) expression needs to be preceded by a semicolon or it may be used to execute a function on the previous line. I will tell why I am saying like this, just take a look at the below 2 examples carefully,

let href, pathname;
({ href } = window.location)(({ pathname } = window.location));
//TypeError: (intermediate value)(intermediate value) is not a function

let href;
somefunc()(({ href } = window.location));
//TypeError: somefunc(...) is not a function

🔥 What's happening is, Without the semicolon, when parsing, Javascript engine considers both lines as a single call expression. 🔥 So if you are using () after any () then put ; after first () 😅

`NOTE: Be very mindful while destructuring that the dstructured keys will behave like a normal variable and the name should be a (https://www.capscode.in/blog/valid-identifier-in-js)[valid identifier]

For example,

let obj = {
  name:"John",
  "my-company":"CapsCode"
}

//lets destrucuture this
let {name, "my-company"} = obj //this will throw an error as my-company is not a valid dentifier

//lets correct this by assigning a variable to my-company
let {name, "my-company":company} = obj //this will work absolutly fine
console.log(company) //CapsCode

`

6.Nested object destructuring

const student = {
  name: "John Doe",
  age: 16,
  scores: {
    maths: 74,
    english: 63,
  },
};

// We define 3 local variables: name, maths, science
const {
  name,
  scores: { maths, science = 50 },
} = student;
console.log(maths); //74
console.log(english); //undefined

7. How to skip values in Array destructuring

//IN ARRAY
let arr=[4,1,6]
let [,...op] = arr
console.log(op) //[1, 6]

let [,,op] = arr
console.log(op) //6

let [,op] = arr
console.log(1) //6

8.Combined Array and Object Destructuring

Example,

const props = [
  { id: 1, name: "John" },
  { id: 2, name: "Saam" },
  { id: 3, name: "Rahul" },
];

const [, , { name }] = props;

console.log(name); // "Rahul"

Destructuring values that are not an object, array, or iterable gives you a TypeError

let [NaN_] = NaN //TypeError: NaN is not iterable
let [Boolean_] = true // TypeError: true is not iterable
let [Number_] = 10 = TypeError: 10 is not iterable
let [NULL_] = nul //TypeError: null is not iterable
let [undefined_] = undefined //TypeError: undefined is not iterable

// NOTE: String are iterable in JavaScript
let [String_] = "CapsCode" // "C"

Thank you for reading this far. This is a brief introduction of Destructuring Assignment in JavaScript . If you find this article useful, like and share this article. Someone could find it useful too. If you find anything technically inaccurate please feel free to comment below.

Hope its a nice and informative read for you. VISIT https://www.capscode.in/blog TO LEARN MORE... See you in my next Blog article, Take care!!

Thanks,
CapsCode