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);