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
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
0 Comments