As we already learn, that destructuring assignment is the way of unpacking values from object and arrays into specific variables, in other words, destructuring implies breaking complex structure into simpler parts. let’s now go for some examples of destructuring arrays, and let’s go for a new studentInfo
array, that has as a value the student id, student, name, and a city.
const studentInfo = [8643, "Maria Carter", "Washington"];
So, to get to the value of each index, you’ve to create a variable for each
index. To get to the student id, you create a variable id
.
const id = studentInfo[0];
Same for the name
.
const name = studentInfo[1];
And the city
.
const city = studentInfo[2];
This way of accessing the values of an array like that, it’s not useful, so,
we’ll use destructuring to extract smaller fragments from the array and assign
them to their corresponding variables. For that, and unlike destructuring
objects, when you’ve to use an object literal on the left-hand-side of the
assignment expression.
const { } =
we’re going to use array literal
,
const [] =
which indicate that we’re going to destructure an array, and add variable names
for each position of the studentInfo
array,
const [] = studentInfo;
in this way, we map the variable names on the array literal side, to their
corresponding items at a specific index.
const [ id, name, city ] = studentInfo;
Now if you access the id
, name
and
city
you’ll get their corresponding values at the same index on the
studentInfo
array.
console.log(id, name, city);
Default Value
We’ve got an array of 3 items.
console.log(studentInfo.length);
When you create local variables
to destructure the
studentInfo
array, you go for the same number of elements, that
means in this example, the number of items on the studentInfo
is
matching the number of local variable
on the
destructuring array literal
. What If, you remove the variable
city
,
const [ id, name ] = studentInfo;
in this case, you’re in a situation where the number items on
studentInfo
are more than the local variables
on the
destructuring array literal
, the excess of items will never cause a
problem, you just don’t want to access to the value city
. You’re
free to choose the elements you want to access to, as an example, you can also
remove the name
, and you’ll only get access to the id
.
const [ id ] = studentInfo;
Okay, return the name
and the city
variables
const [ id, name, city ] = studentInfo;
However, if the number of local variables
in the
destructive array literal
is more than the number of the items on
the studentInfo
array, let’s go for a new local variable
college
const [ id, name, city, college ] = studentInfo;
The college
variable will go to an index 3
to find a
value on the studentInfo
, there is no value at this
position
, console log college
and you’ll get undefined
console.log(college);
You can define a default value Harvard
to the
college
variable to avoid getting an undefined value.
const [ id, name, city, college = "Harvard"] = studentInfo;
Now instead of undefined
console log will return
Harvard
. So far you learn, how to access specific items using the
destructive array literal
by mapping each
local variable
to its specific index
on the
studentInfo
array, and you learn also how to set a default value to
a local variable
that doesn’t match any position of the
studentInfo
.
Array Destructuring Assignment
Now let’s move to another example, So, what if, you already have an
id
variable
let id = 4325;
And you want to update its value by getting the id from the first element of the
array studentInfo
at the index 0, now, and without creating a new
variable, you use the destructive array syntax, open and close the
square brackets
, add the assignment operator.
[] =
To avoid confusion. Any time you set the square brackets
before an
assignment you are in a situation of destructuring an array. Add the variable
id
that you want to update its value, then the array
studentInfo
you want to get the value from
[ id ] = studentInfo;
Console log the id
value
console.log(id);
Now, and instead of getting the first assigned value 4352
you’ll
get 8643
Skipping Items
You can also skip elements, as an example if you want to get into the
city
without getting the student id and the student name, First
const
and add the square brackets
to destruct the
array studentInfo
const [] = studentInfo;
Then you use comma
to exclude the first and the second element, two
elements two commas, and go for a local variable city
to access to
the third element of the array studentInfo
.
const [ , , city] = studentInfo;
Console log the city
console.log(city);
And the value is Washington
, Cool
Swapping Variables
Destructuring arrays can also be useful if you wanna swap variables values,
okay, let’s go to a real example, imagine that you’ve two variables
a
and b
let a = 12;
let b = 45;
and for specific reason you want to swap the value of these two variables, so
the value of a
will be 45
and the value of
b
will be 12
, to achieve that, you’ve first to create
a copy of the value of a
, so go for aninitialA
let initialA = a;
Then swap the value of the variable a
to b
by
assigning b
to a
.
a = b
Now, set the value of b
to be the initialA
b = initialA;
Console log a
and b
console.log(a, b);
And you’ll get respectively the swapped values. a
now change it
initial value to 45
and b to 12
This is super
confusing, and longer to write. You can achieve the same result, using the
destructuring assignment, for that, use the destructure array literal or the
square bracket,
[];
Get into the variable you want to swap their values
[a, b];
And after the assignment, or, we can name it the destructuring target, so the
left-hand side is the destructuring source, and the right-hand side is the
destructuring target, you use the pattern b
and a
[a, b] = [b, a];
This syntax is similar to a
is equal to b
and
b
is equal to a
.
[a, b] = [b, a]; // a = b; b = a;
As you see, you achieve the same result by only using one line of code. Awesome.
Nested Array Destructuring
You can also access to a specific value of a nested array, let’s add a social
media user-names as an array for the studentInfo
array.
const studentInfo = [8643, "Maria Carter",[], "Washington"];
Go respectively, and for the first element of this array, will be the facebook
username flashtoni
, what’s this flashtoni mean, nothing, this is
just a fake username, and for the second fake twitter user-name
@corpoint
and the instagram Ally_Brid
.
const studentInfo = [
8643,
"Maria Carter",
["flashtoni", "@corpoint", "Ally_Bird"],
"Washington",
];
Let’s now use destructuring to access to each element of this array, so
const
and at the left-hand side before the assignment open and
close the square brackets to create a destructive target, and on the right-hand
side add the destructive target, which it’s the studentInfo
array.
const [] = studentInfo;
Now create local variables for each position, go first for the id
,
and the name
, now you’ve another array to access to, open again the
square bracket, and specify each element you want to access to, so respectively
facebook
, twitter
and instagram
, and set
the last local variable to city
.
const [id, name, [facebook, twitter, instagram], city] = studentInfo;
Console log facebook
twitter
and
instagram
console.log(facebook, twitter, instagram);