DEV Community

Cover image for Tips: Array destructuring in javascript ES6
Sakib Ahmed
Sakib Ahmed

Posted on

Tips: Array destructuring in javascript ES6

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

const scores = getScore()
Enter fullscreen mode Exit fullscreen mode

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

const x = scores[0],
    y = scores[1],
    z = scores[2];
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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']
    ]
}

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  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
    ]
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)