Array destructuring syntax in JavaScript is a way to unpack values from arrays or properties from objects into distinct variables. The syntax for array destructuring involves using square brackets ([]) on the left side of an assignment, with variables inside the brackets that correspond to the elements of the array or iterable being destructured.

Syntax:

const [variable1, variable2, ...rest] = array;

• Square brackets []: Enclose the pattern for extracting elements.
• Variables (variable1, variable2, etc.): Individual variables to hold extracted values.
• Commas ,: Separate variables for different elements.
• Rest parameter (...rest): Optional, captures remaining elements into a new array.

Key Points:

• Matching Array Length: The number of variables on the left-hand side should generally match the number of elements you want to extract from the array.
• Skipping Elements: Use commas without variable names to skip elements:

Binding pattern:

 
// Declare and initialize an array of teachers
const teachers = ["Alice", "Bob", "Charlie", "David"];
 
// Use binding pattern to create four variables from the array
const [teacher1, teacher2, teacher3, teacher4] = teachers;
 
// Log the variables to the console
console.log(teacher1); // Alice
console.log(teacher2); // Bob
console.log(teacher3); // Charlie
console.log(teacher4); // David
 
 

In this example, teacher1, teacher2, teacher3 and teacher4 are declared and assigned values from the teachers array.

Assignment pattern:

In the assignment pattern, you can assign default values to variables in case the corresponding element in the array is undefined.

 
// Example: Assignment Pattern
 
const students = ['Alice', 'Bob'];
 
const [firstStudent, secondStudent, thirdStudent = 'Charlie'] = students;
 
console.log(firstStudent);   // Output: Alice
console.log(secondStudent);  // Output: Bob
console.log(thirdStudent);   // Output: Charlie
 
// In this example, if the third element in the students array is undefined, 
//it will be assigned the default value of 'Charlie'.
 
// Example Students array
let students = ["John", "Sachin", "Cris", "William"];
 
// Using array destructuring in a for...of loop
for (const student of students) {
  console.log(student);
}
 
// Array destructuring with the binding pattern
for (const [index, student] of students.entries()) {
  console.log(`Student at index ${index} is: ${student}`);
}
 

Destructuring with more elements than the source:

 
// Declare and initialize an array of boats
const boats = ["Sailboat", "Motorboat"];
 
// Use binding pattern to create four variables from the array
// The extra variables will be assigned undefined
const [boat1, boat2, boat3, boat4] = boats;
 
// Log the variables to the console
console.log(boat1); // Sailboat
console.log(boat2); // Motorboat
console.log(boat3); // undefined
console.log(boat4); // undefined
 
 

Swapping variables:

 
// Declare and initialize two variables
let school1 = "Harvard";
let school2 = "Yale";
 
// Use assignment pattern to swap the values of the variables
[school1, school2] = [school2, school1];
 
// Log the variables to the console
console.log(school1); // Yale
console.log(school2); // Harvard
 
 

Parsing an array returned from a function:

You can use array destructuring to parse values returned from a function.

 
//Example 1
function getDetails() {
  return ['John Doe', 25, 'Engineer'];
}
 
const [name, age, profession] = getDetails();
 
console.log(name);        // Output: John Doe
console.log(age);         // Output: 25
console.log(profession);  // Output: Engineer
 
//Example 2
function getSchools() {
  return ["Harvard", "MIT", "Stanford"];
}
const [school1, school2] = getSchools(); // Parse returned array
console.log(school1); // Output: "Harvard"