Hello Devs,
In this article we will learn Destructuring in JavaScript
Table Of Contents
- 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] //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 [firstName, surname] = [];
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)
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 operator
let {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 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 () 😅
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.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,
Top comments (0)