Destructure Array Elements in JavaScript

The destructuring assignment syntax is a shorthand syntax that allows you to extract values from arrays, in order, and assign them to variables in a more concise and structured way:

let [element1, ..., elementN] = array;

Note: When destructuring a property that doesn't exist within the object, the specified variable will hold the undefined value.

Example

Let's consider this script, that outputs the result of a division and its remainder:

const divide = (a, b) => [a / b, a % b];

const [result, remainder] = divide(7, 3);

console.log('result = ', result);
console.log('remainder = ', remainder);

When executed, it will extract the values of the array returned by the divide() function into two distinct variables named result and remainder, and output their values.

Which will produce this output:

result =  2.3333333333333335
remainder =  1

Ignoring elements

When selectively destructuring an array, you can skip specific elements by leaving them blank:

let [element1, , , element4] = array;

Example

Let's consider this script, that calculates the minimum, maximum, and average value of an array of numbers:

function calculateGrades(...grades) {
  let min, max, avg = 0;

  for (let i = 0 ; i < grades.length ; i++) {
    if (min === undefined || grades[i] < min) {
      min = grades[i];
    } else if (max === undefined || grades[i] > max) {
      max = grades[i];
    }
    avg += grades[i];
  }

  avg = Math.round(avg / grades.length);

  return [min, max, avg];
}

const [, , avg] = calculateGrades(5, 3, 9, 5, 2, 4);

console.log('Average grade = ', avg);

When executed, it will:

1. Execute the calculateGrades() function that takes as parameter an unspecified list of numbers and returns an array containing the minimum, maximum, and average value of that array.
2. Extract only the last value of the array returned by the calculateGrades() function into a variable named avg and output its value.

Which will produce this output:

Average grade =  5

Define a default destructuring value

By default, destructing an element whose index doesn't exist in the array will result in an undefined value.

To specify a default fallback value, you can use the assignment operator as follows:

let [element = 'default_value'] = array;

Example

Let's consider this script, that extracts the elements of an array using default values:

const settings = ["dark", "fr"];

const [
  theme = "light",
  language = "en-us",
  notifications = "enabled",
  synchronization = "disabled"
] = settings;

console.log(theme, language, notifications, synchronization);

When executed, it will use the destructuring assignment syntax with fallback values to safely extract more elements than the settings array contains, and output the value of these elements.

Which will produce this output:

dark fr enabled disabled

Regroup remaining elements

When destructuring elements, you can regroup all the remaining elements of an array into a single variable using the rest operator ...:

let [element1, ...elements] = array;

Example

Let's consider this script, that determines whether a student passes based on the average of its grades:

function calculateAverage(grades) {
  let sum = 0;

  for (let grade of grades) {
    sum += grade;
  }

  return Math.round(sum / grades.length);
}

function pass(students) {
  let results = [];

  for (let student of students) {
    let [name, ...grades] = student;
    let average = calculateAverage(grades);
    
    results.push([name, average >= 5]);
  }

  return results;
}

const students = [
  ["John Doe", 8, 9, 5, 6],
  ["Jack Whyte", 1, 4, 0, 9],
  ["Samantha Frost", 0, 0, 1, 3]
];
const results = pass(students);

console.log(results);

When executed, the pass() function will:

1. Loop on each element of the students parameter array.
2. Use the destructuring syntax to extract the first value of the current subarray into the name variable.
3. Use the rest syntax to aggregate the remaining values of the current subarray into the grades variable.
4. Execute the calculateAverage() function with the grades array as parameter and store its return value into the average variable.
5. Push to the results variable an array containing the name variable and the boolean evaluation of whether the average variable is greater than or equal to 5.
6. Return the results variable.

Which will produce this output:

[
  [ 'John Doe', true ],
  [ 'Jack Whyte', false ],
  [ 'Samantha Frost', false ]
]

Destructure nested elements

Destructuring nested array elements is in a way similar to destructuring nested object properties, as it requires to follow the array structure using the following syntax:

let [[element1], [, , element3]] = array;