Array Concepts

JavaScript Array Destructuring

Extract values from arrays into variables using the concise destructuring syntax.

What is Destructuring?

Array destructuring is a JavaScript feature that allows you to extract values from an array and assign them to variables in a single statement. It's a concise way to unpack values.

Basic Array Destructuring

// Without destructuring
const colors = ['red', 'green', 'blue'];
const first = colors[0];
const second = colors[1];

// With destructuring
const [first, second, third] = colors;
console.log(first); // 'red'
console.log(second); // 'green'
console.log(third); // 'blue'

Extracting values from arrays into individual variables

Run Code

Basic Examples

Extract First Few Elements

const [a, b] = [1, 2, 3, 4, 5];
console.log(a); // 1
console.log(b); // 2

Extracting the first two elements from an array

Run Code

Skip Elements

const [first, , third] = ['a', 'b', 'c'];
console.log(first); // 'a'
console.log(third); // 'c' (b is skipped)

Using commas to skip elements during destructuring

Run Code

Collect Remaining Elements

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

Using rest operator to collect remaining elements

Run Code

Default Values

const [x = 10, y = 20] = [5];
console.log(x); // 5
console.log(y); // 20 (uses default)

const [a, b, c = 30] = [1, 2];
console.log(c); // 30

Providing default values for missing elements

Run Code

Swap Variables

let a = 1, b = 2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1

Swapping variable values using array destructuring

Run Code

Destructure Function Return

function getCoordinates() {
  return [10, 20];
}

const [x, y] = getCoordinates();
console.log(x, y); // 10, 20

Destructuring values returned from a function

Run Code

Nested Destructuring

const [a, [b, c]] = [1, [2, 3]];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

Destructuring nested arrays

Run Code

Real-World Use Cases

React Hooks

import { useState } from 'react';

// useState returns an array
const [count, setCount] = useState(0);
const [name, setName] = useState('');

Using destructuring with React useState hook

Run Code

Parse API Response

const response = [200, { data: 'success', id: 123 }];
const [status, { data, id }] = response;
console.log(status); // 200
console.log(data); // 'success'

Destructuring API response arrays

Run Code

Function Parameters

function displayPoint([x, y]) {
  console.log(`Point: (${x}, ${y})`);
}

displayPoint([10, 20]); // Point: (10, 20)

Using destructuring in function parameters

Run Code

Common Mistakes

❌ Forgetting Brackets

Forgetting Brackets

// Wrong - will throw error
const a, b = [1, 2];

// Correct
const [a, b] = [1, 2];

Always use brackets for array destructuring

Run Code

❌ Confusing Rest Operator with Spread

Rest vs Spread Operator

// Rest operator (...) in destructuring collects remaining
const [first, ...rest] = [1, 2, 3];

// Spread operator (...) in array/function call spreads elements
const arr = [...[1, 2, 3]];

Understanding the difference between rest and spread operators

Run Code

FAQs

Can I destructure strings?

Destructuring Strings

const [a, b, c] = 'hello';
console.log(a, b, c); // 'h' 'e' 'l'

Strings can be destructured like arrays since they're iterable

Run Code

What if array is shorter than variables?

Handling Shorter Arrays

const [a, b, c] = [1, 2];
console.log(c); // undefined

// Use defaults to prevent this:
const [a, b, c = 3] = [1, 2];
console.log(c); // 3

Using default values when array is shorter than variables

Run Code

Can rest operator be used multiple times?

No, you can only have one rest element, and it must be last.

← Back to Arrays Overview