Array Destructuring – How Does Destructuring Work in JS?

Array destructuring is a unique technique that allows you to neatly extract an array’s value into new variables.

For instance, without using the array destructuring assignment technique, you would copy an array’s value into a new variable like so:

const profile = ["Oluwatobi", "Sofela", "codesweetly.com"];

const firstName = profile[0];
const lastName = profile[1];
const website = profile[2];

console.log(firstName); // "Oluwatobi"
console.log(lastName); // "Sofela"
console.log(website); // "codesweetly.com"

Try Editing It

Notice that the snippet above has a lot of repeated code which is not a DRY (Don’t Repeat Yourself) way of coding.

Let’s now see how array destructuring assignment makes things neater and DRYer.

const profile = ["Oluwatobi", "Sofela", "codesweetly.com"];

const [firstName, lastName, website] = profile;

console.log(firstName); // "Oluwatobi"
console.log(lastName); // "Sofela"
console.log(website); // "codesweetly.com"

Try Editing It

You see, like magic, we’ve cleaned up our code by placing the three new variables (that is, firstName, lastName, and website) into an array object ([...]). Then, we assigned them the profile array’s values.

In other words, we instructed the computer to extract the profile array’s values into the variables on the left-hand side of the assignment operator.

Therefore, JavaScript will parse the profile array and copy its first value ("Oluwatobi") into the destructuring array’s first variable (firstName).

Likewise, the computer will extract the profile array’s second value ("Sofela") into the destructuring array’s second variable (lastName).

Lastly, JavaScript will copy the profile array’s third value ("codesweetly.com") into the destructuring array’s third variable (website).

Notice that the snippet above destructured the profile array by referencing it. However, you can also do direct destructuring of an array. Let’s see how.

How to Do Direct Array Destructuring

JavaScript lets you destructure an array directly like so:

const [firstName, lastName, website] = [
  "Oluwatobi",
  "Sofela",
  "codesweetly.com",
];

console.log(firstName); // "Oluwatobi"
console.log(lastName); // "Sofela"
console.log(website); // "codesweetly.com"

Try Editing It

Suppose you prefer to separate your variable declarations from their assignments. In that case, JavaScript has you covered. Let’s see how.

How to Use Array Destructuring While Separating Variable Declarations from Their Assignments

Whenever you use array destructuring, JavaScript allows you to separate your variable declarations from their assignments.

Here’s an example:

let firstName, lastName, website;

[firstName, lastName, website] = ["Oluwatobi", "Sofela", "codesweetly.com"];

console.log(firstName); // "Oluwatobi"
console.log(lastName); // "Sofela"
console.log(website); // "codesweetly.com"

Try Editing It

What if you want "Oluwatobi" assigned to the firstName variable—and the rest of the array items to another variable? How would you do that? Let’s find out below.

CodeSweetly ads

Learn Flexbox with Images

Use beautiful images to learn CSS Flexbox.

Find out more

How to Use Array Destructuring to Assign the Rest of an Array Literal to a Variable

JavaScript allows you to use the rest operator within a destructuring array to assign the rest of a regular array to a variable.

Here’s an example:

const [firstName, ...otherInfo] = ["Oluwatobi", "Sofela", "codesweetly.com"];

console.log(firstName); // "Oluwatobi"
console.log(otherInfo); // ["Sofela", "codesweetly.com"]

Try Editing It

Now, what if you only want to extract "codesweetly.com"? Let’s discuss the technique you can use below.

How to Use Array Destructuring to Extract Values at Any Index

Here’s how you can use array destructuring to extract values at any index position of a regular array:

const [, , website] = ["Oluwatobi", "Sofela", "codesweetly.com"];

console.log(website); // "codesweetly.com"

Try Editing It

In the snippet above, we used commas to skip variables at the destructuring array’s first and second index positions.

By so doing, we were able to link the website variable to the third index value of the regular array on the right side of the assignment operator (that is, "codesweetly.com").

At times, however, the value you wish to extract from an array is undefined. In that case, JavaScript provides a way to set default values in the destructuring array. Let’s learn more about this below.

How Default Values Work in an Array Destructuring Assignment

Setting a default value can be handy when the value you wish to extract from an array does not exist (or is set to undefined).

Here’s how you can set one inside a destructuring array:

const [firstName = "Tobi", website = "CodeSweetly"] = ["Oluwatobi"];

console.log(firstName); // "Oluwatobi"
console.log(website); // "CodeSweetly"

Try Editing It

In the snippet above, we set "Tobi" and "CodeSweetly" as the default values of the firstName and website variables.

Therefore, in our attempt to extract the first index value from the right-hand side array, the computer defaulted to "CodeSweetly"—because only a zeroth index value exists in ["Oluwatobi"].

So, what if you need to swap firstName’s value with that of website? Again, you can use array destructuring to get the job done. Let’s see how.

How to Use Array Destructuring to Swap Variables’ Values

You can use the array destructuring assignment to swap the values of two or more different variables.

Here’s an example:

let firstName = "Oluwatobi";
let website = "CodeSweetly";

[firstName, website] = [website, firstName];

console.log(firstName); // "CodeSweetly"
console.log(website); // "Oluwatobi"

Try Editing It

In the snippet above, we used direct array destructuring to reassign the firstName and website variables with the values of the array literal on the right-hand side of the assignment operator.

As such, firstName’s value will change from "Oluwatobi" to "CodeSweetly". While website’s content will change from "CodeSweetly" to "Oluwatobi".

Keep in mind that you can also use array destructuring to extract values from a regular array to a function’s parameters. Let’s talk more about this below.

How to Use Array Destructuring to Extract Values from an Array to a Function’s Parameters

Here’s how you can use array destructuring to extract an array’s value to a function’s parameter:

// Define an array with two items:
const profile = ["Oluwatobi", "Sofela"];

// Define a function with one destructuring array containing two parameters:
function getUserBio([firstName, lastName]) {
  return `My name is ${firstName} ${lastName}.`;
}

// Invoke getUserBio while passing the profile array as an argument:
getUserBio(profile);

// The invocation above will return: "My name is Oluwatobi Sofela."

Try Editing It

In the snippet above, we used an array destructuring parameter to extract the profile array’s values into getUserBio’s firstName and lastName parameters.

Here’s another example:

// Define an array with two string values and one nested array:
const profile = ["codesweetly.com", "Male", ["Oluwatobi", "Sofela"]];

// Define a function with two destructuring arrays containing a parameter each:
function getUserBio([website, , [userName]]) {
  return `${userName} runs ${website}`;
}

// Invoke getUserBio while passing the profile array as an argument:
getUserBio(profile);

// The invocation above will return: "Oluwatobi runs codesweetly.com"

Try Editing It

In the snippet above, we used two array destructuring parameters to extract the profile array’s values into getUserBio’s website and userName parameters.

There are times you may need to invoke a function containing a destructuring parameter without passing any argument to it. In that case, you will need to use a technique that prevents the browser from throwing a TypeError.

Let’s learn about the technique below.

CodeSweetly ads

Create NPM Package like a pro

Learn the fundamentals of building and managing NPM packages from scratch.

Find out more

How to Invoke a Function Containing Array Destructuring Parameters without Supplying Any Argument

Consider the function below:

function getUserBio([firstName]) {
  console.log(
    "Do something else that does not need the destructuring parameter."
  );
  return `My name is ${firstName}.`;
}

Now, let’s invoke the getUserBio function without passing any argument to its destructuring parameter:

getUserBio();

Try it on CodeSandBox

After invoking the getUserBio function above, the browser will throw an error similar to TypeError: undefined is not iterable.

The TypeError message happens because functions containing a destructuring parameter expect you to supply at least one argument.

So, you can avoid such error messages by assigning a default argument to the destructuring parameter.

Here’s an example:

function getUserBio([firstName] = []) {
  console.log(
    "Do something else that does not need the destructuring parameter."
  );
  return `My name is ${firstName}.`;
}

Notice in the snippet above that we assigned an empty array as the destructuring parameter’s default argument.

So, let’s now invoke the getUserBio function without passing any argument to its destructuring parameter:

getUserBio();

The function will output:

"Do something else that does not need the destructuring parameter.";
"My name is undefined.";

Try it on CodeSandBox

Keep in mind that you do not have to use an empty array as the destructuring parameter’s default argument. You can use any other value that is not null or undefined.

Support CodeSweetly