Learn how to unpack values from arrays into variables using destructuring in JavaScript.

Array Destructuring

When you want to pull values out of an array and store them in variables, the traditional way looks like this:

const colors = ["red", "green", "blue"];

const first = colors[0];
const second = colors[1];
const third = colors[2];

It works — but it is repetitive. You are writing colors[0], colors[1], colors[2] just to give names to things you already know the position of.

Array destructuring lets you do this in one clean line:

const colors = ["red", "green", "blue"];

const [first, second, third] = colors;

console.log(first);  // red
console.log(second); // green
console.log(third);  // blue

The square brackets on the left mirror the structure of the array on the right. Values are unpacked by position — first variable gets index 0, second gets index 1, and so on.

Basic Syntax

const [a, b, c] = [1, 2, 3];

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

You choose the variable names — they do not have to match anything in the array. Arrays have no keys, so destructuring is purely positional.

Skipping Items

Leave a gap with a comma to skip an item you do not need.

const colors = ["red", "green", "blue", "yellow"];

const [first, , third] = colors;

console.log(first); // red
console.log(third); // blue

The extra comma skips "green". You can skip multiple items the same way:

const [, , , fourth] = colors;
console.log(fourth); // yellow

Default Values

If the array does not have a value at that position, the variable becomes undefined. You can provide a default to use instead.

const [a, b, c = "default"] = ["first", "second"];

console.log(a); // first
console.log(b); // second
console.log(c); // default — nothing at index 2

// Real use — config with fallbacks
const [host = "localhost", port = 3000] = ["example.com"];

console.log(host); // example.com
console.log(port); // 3000 — used default

Rest in Destructuring

Use ... to collect the remaining items into a new array.

const [first, second, ...rest] = [1, 2, 3, 4, 5];

console.log(first);  // 1
console.log(second); // 2
console.log(rest);   // [3, 4, 5]

The rest element must always be last — same rule as rest parameters in functions.

const scores = [99, 88, 76, 65, 54];

const [top, runnerUp, ...others] = scores;

console.log(`1st: ${top}`);       // 1st: 99
console.log(`2nd: ${runnerUp}`);  // 2nd: 88
console.log(`Others: ${others}`); // Others: 76,65,54

Swapping Variables

Destructuring gives you a clean one-liner to swap two variables — no temporary variable needed.

let a = "first";
let b = "second";

// Old way — needs a temp variable
let temp = a;
a = b;
b = temp;

// Destructuring way — clean and direct
[a, b] = [b, a];

console.log(a); // second
console.log(b); // first

Destructuring Function Return Values

Functions that return arrays are very natural to destructure — especially when the function returns multiple related values.

function getMinMax(numbers) {
  const sorted = [...numbers].sort((a, b) => a - b);
  return [sorted[0], sorted[sorted.length - 1]];
}

const [min, max] = getMinMax([5, 3, 9, 1, 7]);

console.log(`Min: ${min}`); // Min: 1
console.log(`Max: ${max}`); // Max: 9

Without destructuring you would write result[0] and result[1] — less readable and less meaningful.

Nested Array Destructuring

You can destructure nested arrays by mirroring their structure on the left side.

const matrix = [[1, 2], [3, 4]];

const [[a, b], [c, d]] = matrix;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // 4

Real use — destructuring coordinates:

const points = [[10, 20], [30, 40], [50, 60]];

for (const [x, y] of points) {
  console.log(`x: ${x}, y: ${y}`);
}
// x: 10, y: 20
// x: 30, y: 40
// x: 50, y: 60

Destructuring in Function Parameters

You can destructure an array directly in the parameter list.

function printCoordinates([x, y]) {
  console.log(`Latitude: ${x}, Longitude: ${y}`);
}

printCoordinates([33.6844, 73.0479]);
// Latitude: 33.6844, Longitude: 73.0479

A Real Example — Processing API Response

Imagine an API returns data as arrays — a common format called CSV-style data:

const response = [
  ["Ali", 22, "Lahore"],
  ["Sara", 25, "Karachi"],
  ["Zara", 20, "Islamabad"],
];

for (const [name, age, city] of response) {
  console.log(`${name} is ${age} years old and lives in ${city}.`);
}

// Ali is 22 years old and lives in Lahore.
// Sara is 25 years old and lives in Karachi.
// Zara is 20 years old and lives in Islamabad.

Instead of row[0], row[1], row[2] — you get meaningful names immediately in the loop.

A Real Example — React `useState`

If you ever use React, you will see array destructuring on day one. The useState hook returns an array of two items — the current value and a function to update it.

const [count, setCount] = useState(0);
const [isOpen, setIsOpen] = useState(false);
const [username, setUsername] = useState("");

This is pure array destructuring. React chose to return an array specifically because destructuring lets you name the variables whatever you want — count and setCount are your names, not React's.

React's useState is one of the most common places you will use array destructuring in real projects. Now you know exactly what is happening under the hood.

Summary

Array destructuring unpacks array values into variables by position
Syntax mirrors the array structure — const [a, b, c] = array
Use commas to skip items you do not need
Provide default values with = for positions that might be empty
Use ...rest to collect remaining items into a new array
Swap variables cleanly with [a, b] = [b, a]
Destructure function return values for cleaner, more readable code
Nested arrays can be destructured by mirroring their structure
React's useState is a real-world example of array destructuring in action

Array Destructuring

On this page