Episode 3: Destructuring Assignment Syntax in Modern JavaScript | Lightning Web Component | Salesforce ☁️⚡️

Kapil November 01, 2022

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

JavaScript developers are always trying to get data in and out of arrays or objects. Most probably you have used the standard way, let’s try to understand it using an Example


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
let firstName='Kapil', lastName='Batra';
let user={
  firstName:firstName,
  lastName:lastName
}

console.log(user);

//Output
//{firstName: "Kapil", lastName: "Batr...}

In ES6 you no longer have to repeat yourself as long as the variables and object property names are the same. Below code accomplishes the same thing:


1
2
3
4
5
6
let firstName='Kapil', lastName='Batra';
let user={firstName,lastName};
console.log(user);

//Output
//{firstName: "Kapil", lastName: "Batr...}


All we did here was remove the repeating variable names and colons ( : ). This shorthand comes in handy when you have objects containing a large number of fields.

But that's not all. ES6 provides a simpler way of getting data out of arrays or objects. This also helps reduce repetitive lines of code. Take for example an array that contains four numbers:


1
2
3
4
5
6
7
8
9
let numbers = [1, 2, 3, 4]; 

//To get data out of this array, you can assign its values to variables like this:

let one = numbers[0],
  two = numbers[1],
  three = numbers[2],
  four = numbers[3];
  console.log(one);

You can now access the data through the variable names. So here the number 1 would be printed to the console. Even though this works, you might prefer to use a shortened method known as array destructuring.


1
2
let [one, two, three, four] = numbers;
console.log(one);

The brackets on the left side of the assignment are part of the new destructuring syntax. So, this code is the same thing as saying, “Give me four variables named one, two, three, and four, and assign the first value in the numbers array to variable one, the second value to variable two, and so on.” Shorter, sweeter, great.


Let’s try to understand the array destructuring more using some other examples:


Example 1: Basic variable assignment


1
2
3
4
5
6
const foo = ['one', 'two', 'three'];

const [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"


Example 2: Destructuring with more elements than the source

In an array destructuring from an array of length N specified on the right-hand side of the assignment, if the number of variables specified on the left-hand side of the assignment is greater than N, only the first N variables are assigned values. The values of the remaining variables will be undefined.


1
2
3
4
5
6
7
const foo = ['one', 'two'];

const [red, yellow, green, blue] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // undefined
console.log(blue);  //undefined


Example 3: Swapping variables

Two variables values can be swapped in one destructuring expression.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
let a = 1;
let b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

const arr = [1, 2, 3];
[arr[2], arr[1]] = [arr[1], arr[2]];
console.log(arr); // [1, 3, 2]


Example 4: Parsing an array returned from a function

It's always been possible to return an array from a function. Destructuring can make working with an array return value more concise. In this example, f() returns the values [1, 2] as its output, which can be parsed in a single line with destructuring.

1
2
3
4
5
6
7
function f() {
  return [1, 2];
}

const [a, b] = f();
console.log(a); // 1
console.log(b); // 2


Example 5: Ignoring some returned values

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
function f() {
  return [1, 2, 3];
}

const [a, , b] = f();
console.log(a); // 1
console.log(b); // 3

const [c] = f();
console.log(c); // 1


Checkout complete video tutorial below

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Happy Coding :)
Tags:

Post a Comment

0 Comments