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.
- 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
- 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
Top comments (0)