Array Destructuring
Learn how to unpack values from arrays into distinct variables using destructuring syntax, including skipping elements, default values, swapping, and nested patterns.
Reading Time
14 min
Lesson
Lesson 22 of 48
Introduction
Before destructuring existed, pulling values out of an array meant reaching for each one by its index — const first = arr[0]; const second = arr[1]; and so on. Array destructuring, introduced in ES6, lets you unpack multiple values from an array into separate variables in a single, readable statement. The syntax mirrors the array literal syntax you already know, except it appears on the left-hand side of an assignment instead of the right.
Basic Destructuring
Console Output
Click “Run” to see the console output here.
Skipping Elements
You don't have to capture every element. Leaving a slot empty — just a comma with nothing between the commas — skips over that position in the array entirely. This is handy when you only care about certain values and want to ignore the rest without inventing throwaway variable names for them.
Skipping Elements Example
Console Output
Click “Run” to see the console output here.
Default Values
If the array doesn't have enough elements to fill every variable, the missing ones are undefined by default — unless you supply a default value using =. The default only kicks in when the corresponding value is undefined (either because the array is too short, or because the element itself is explicitly undefined), so it's a great safety net for optional data.
Default Values Example
Console Output
Click “Run” to see the console output here.
Swapping Variables
One of the most satisfying uses of array destructuring is swapping the values of two variables without a temporary holding variable. Before destructuring, swapping required a third variable to avoid overwriting one of the values before it was copied. Destructuring builds a temporary array behind the scenes, so you no longer need to manage that yourself.
Swapping Example
Console Output
Click “Run” to see the console output here.
Nested Array Destructuring
Arrays can contain other arrays, and destructuring patterns can be nested to match that shape. Each level of square brackets in the pattern corresponds to a level of nesting in the data, so you can reach directly into inner arrays without first pulling out the outer one and destructuring it separately.
Nested Destructuring Example
Console Output
Click “Run” to see the console output here.
Destructuring Function Return Values
Functions can only return a single value, but that value is often an array bundling multiple pieces of related data. Destructuring lets the caller unpack that returned array immediately, giving each piece of data a meaningful name right at the call site instead of accessing it by index afterward.
Destructuring a Return Value
Console Output
Click “Run” to see the console output here.
Destructuring in Function Parameters
Destructuring patterns aren't limited to variable declarations — they can appear directly in a function's parameter list. When an array is passed as an argument, the function can destructure it right there, unpacking the values without an extra line inside the function body.
Destructuring in Parameters Example
Console Output
Click “Run” to see the console output here.
Where You Will See This in the Wild
- Unpacking [value, setValue] from React's useState()
- Iterating Object.entries(obj) with for (const [key, value] of ...)
- Swapping two variables without a temp variable
- Reading only the pieces you need from a function that returns an array
- Splitting a string like "2026-07-14".split("-") into [year, month, day]
Combine with the Rest Pattern
Array destructuring pairs naturally with the rest pattern, letting you capture the first few elements individually while gathering everything else into a new array: const [first, ...others] = [1, 2, 3, 4] gives you first === 1 and others === [2, 3, 4]. You'll cover this rest pattern in more depth in the Rest Parameters lesson.
Order Matters
Unlike object destructuring, array destructuring is positional — the order of the variables in your pattern must match the order of the values in the array, not their names. Reordering [a, b] = [b, a] performs a swap because position, not name, decides which value goes where. If you reorder the array itself, every variable downstream shifts to a different value.