Array destructuring is the array counterpart to object destructuring — it lets you unpack values from an array into individual variables in a single line, based on their position rather than a property name. If you've ever written const first = arr[0]; followed by const second = arr[1];, destructuring replaces both lines with one.
Because arrays are ordered, destructuring an array is purely positional: the first variable you list gets the first element, the second gets the second element, and so on.
Basic Syntax
const colors = ["red", "green", "blue"];
// Without destructuring
const first1 = colors[0];
// With destructuring
const [first, second, third] = colors;
console.log(first, second, third);Output:
red green blue
Unlike object destructuring, the variable names here can be anything you like — JavaScript doesn't look for a matching property name, it just assigns by position.
Skipping Elements
You can skip values you don't need by leaving a gap between commas:
const scores = [90, 75, 60, 85];
// Skip the second and third values entirely
const [highest, , , lowest] = scores;
console.log(highest, lowest);Output:
90 85
You can also grab the rest of an array with the rest syntax: const [first, ...rest] = colors; puts everything after the first element into a new rest array.
Swapping Two Variables
The classic example that shows why array destructuring is genuinely useful, not just shorter syntax, is swapping two variables without a temporary third one:
let a = 1;
let b = 2;
// Old way needed a temp variable:
// let temp = a; a = b; b = temp;
[a, b] = [b, a];
console.log(a, b);Output:
2 1
JavaScript builds a temporary array [b, a] on the right, then destructures it back into a and b in the new order — no extra variable required. This pattern is also commonly used when a function returns multiple values as an array, which you then destructure straight into named variables at the call site.