Tips: Array destructuring in javascript ES6

The following invokes the getScore() function and assigns the returned value to a variable.

const scores = getScore()

To get the invidual score, you need to do like this:

const x = scores[0],
    y = scores[1],
    z = scores[2];

Prior to ES6, there was no direct way to assign the elements of the array to multiple variables such as x, y and z.

But in ES6, you can use the destructing assignment as follow:

const [x, y, z] = getScore()

console.log(x) // 10
console.log(y) // 20
console.log(z) // 30

The variable x, y and z will take the values of the first second third elements of the array.

*Note that the square brackets [ ] look like the array syntax but they are not.

If array return two elements, the third varible z will be undefined

function getScore() {
    return [10, 20]
}

const [x, y, z] = getScore()

console.log(x) // 10
console.log(y) // 20
console.log(z) // undefined

But if array has more than three element, the remaining elements are discarded. Example:

function getScore() {
    return [10, 20, 30, 40, 50]
}

const [x, y, z] = getScore()

console.log(x) // 10
console.log(y) // 20
console.log(z) // 30

But there are a cool way to catch them ;)

Array Destructuring Assigment and REST syntax

It's possible to take all remaining elements of an array and put them in a new array bu using the rest syntax (...):

function getScore() {
    return [10, 20, 30, 40, 50]
}

const [x, y, z, ...args] = getScore()

console.log(x) // 10
console.log(y) // 20
console.log(z) // 30
console.log(args) // [40, 50]

Remember, rest return a new array with remaining elements.

Note: it's possible to destructure an array in the assingment that separates from the variable's declaration. For example:

const [x, y ]= [10, 20]

console.log(x) // 10
console.log(y) // 20

Intro to JS array destructuring

Suppose, you have a function that returns an array of numbers as follows:

Nested array destructuring

The following function returns an array that contains an element or nested array.

const getProfile = () => {
    return [
        'John',
        'Doe',
        ['Red','Blue', 'Green']
    ]
}

Since the third element of the returned array is another array, you have to use the nested array destructuring suntax to destructure it, like this:

const [name1, name2, [color1, color2, color3]] = getProfile()

console.log(color1, color2, color3);
//output: Red Blue Green

Array Destructuring Assignment Applications

Let's see some practical examples of using the array destructuring assignments syntax.

1. Swapping variables

The array destructuring make it easy to swap values of variables without using a temporary variable:

const x = 10,
    y = 20;

[x, y] = [y, x]


console.log(x) // 20
console.log(y) // 10

1. Functions that return multiple values

In JavaScript, a function can return a value. However, you can return an array that contains multiple values.

const state = (x, y) => {
    return [
        x + y,
        (x * y) / 2
    ]
}

And then you use the array destructuring assignment syntax to destructure the elements of the return array into variables:

const [ sum, average ] = state()

console.log(sum) // 30
console.log(average) // 15

So? Did you learned? If you enjoyed and learned something please let me know. See yaa