Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

July 17, 2021 07:05 pm GMT

Destructuring In JavaScript

Hello Devs,

In this article we will learn Destructuring in JavaScript

Array Destructuring in JavaScript
Additional use of Array Destructuring
Assigning default values using destructuring assignment
Destructuing of nested array
Object Destructuring in JavaScript
Nested object destructuring
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] //3let obj = {   fname: 'john',   lname: 'doe'}obj.fname //john//orobj["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 waylet firstName = arr[0]let lastName = arr[1]console.log(firstName, lastName); //John Doe//array destructuring waylet [firstName, lastName] = arr;console.log(firstName, lastName); //John Doe//what if there are more values in arrayvar [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 JavaScriptString iterablelet [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 destructuringlet 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 [firstName, surname] = [];alert(firstName); // undefinedalert(surname); // undefinedso to get out of this,// default valueslet [name = "Guest", surname = "Anonymous"] = ["Julius"];alert(name);    // Julius (from array)alert(surname); // Anonymous (default used)

4. Destructuing 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 operatorlet {fname,...others} = person;console.log(others)console.log(others.lname)console.log(others.company)

what if we will use Destructuing 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 functionlet hrefsomefunc()({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 ()

6.Nested object destructuring

const student = {    name: 'John Doe',    age: 16,    scores: {        maths: 74,        english: 63    }};// We define 3 local variables: name, maths, scienceconst { name, scores: {maths, science = 50} } = student;console.log(maths)//74console.log(english)//undefined

7.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 iterablelet [Boolean_] = true // TypeError: true is not iterablelet [Number_] = 10 = TypeError: 10 is not iterablelet [NULL_] = nul //TypeError: null is not iterablelet [undefined_] = undefined //TypeError: undefined is not iterable// NOTE: String are iterable in JavaScriptlet [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

Original Link: https://dev.to/capscode/destructuring-in-javascript-gcg

Share this article: