Skip to content
beginnerPhase 32 · JavaScript Fundamentals

Destructuring

Extract values from arrays and objects with destructuring assignment syntax.

30m
0 problems
Topic Progress0%

Array Destructuring

Array Destructuring

Basic Syntax

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

Skipping Elements

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

const [, second] = arr;
console.log(second); // 2

Rest Pattern

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

Swapping Variables

let a = 1;
let b = 2;

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

Function Return Values

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

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

Skipping with Commas

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

Iterables

// Works with any iterable
const [a, b, c] = 'hello'; // 'h', 'e', 'l'
const [a, b, c] = new Set([1, 2, 3]); // 1, 2, 3

Swap Without Temp Variable

let x = 1;
let y = 2;

// Before ES6
let temp = x;
x = y;
y = temp;

// With destructuring
[x, y] = [y, x];

Object Destructuring

Object Destructuring

Basic Syntax

const person = { name: 'John', age: 30, city: 'NYC' };
const { name, age } = person;
console.log(name, age); // "John", 30

Renaming Variables

const person = { name: 'John', age: 30 };
const { name: personName, age: personAge } = person;
console.log(personName, personAge); // "John", 30

Rest Pattern

const person = { name: 'John', age: 30, city: 'NYC' };
const { name, ...rest } = person;
console.log(rest); // { age: 30, city: 'NYC' }

Nested Destructuring

const user = {
  name: 'John',
  address: {
    city: 'NYC',
    zip: '10001'
  }
};

const { name, address: { city, zip } } = user;
console.log(name, city, zip); // "John", "NYC", "10001"

Function Parameters

function greet({ name, age }) {
  console.log(`Hello ${name}, you are ${age}`);
}

greet({ name: 'John', age: 30 });

In Imports

// Without destructuring
import React from 'react';
const Component = React.Component;

// With destructuring
import React, { Component, useState } from 'react';

Extracting from Arrays of Objects

const users = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' }
];

const [{ name: firstUser }] = users;
console.log(firstUser); // "John"

Computed Property Names

const key = 'name';
const { [key]: value } = { name: 'John' };
console.log(value); // "John"

Default Values

Default Values

Basic Defaults

const { name = 'Guest', age = 0 } = {};
console.log(name, age); // "Guest", 0

With Existing Values

const { name = 'Guest', age = 0 } = { name: 'John' };
console.log(name, age); // "John", 0

Function Parameters

function createUser({ name = 'Anonymous', age = 0 } = {}) {
  return { name, age };
}

createUser(); // { name: 'Anonymous', age: 0 }
createUser({ name: 'John' }); // { name: 'John', age: 0 }

Defaults with Rename

const { name: n = 'Guest' } = {};
console.log(n); // "Guest"

Defaults in Nested Destructuring

const user = { name: 'John' };
const { name, address: { city = 'Unknown' } = {} } = user;
console.log(name, city); // "John", "Unknown"

Array Destructuring Defaults

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

Defaults with Computed Values

const { timestamp = Date.now() } = {};
console.log(timestamp); // Current timestamp

Common Pattern

// Config object with defaults
function configure({
  width = 800,
  height = 600,
  color = 'black',
  debug = false
} = {}) {
  return { width, height, color, debug };
}

configure(); // { width: 800, height: 600, color: 'black', debug: false }
configure({ width: 1024 }); // { width: 1024, height: 600, ... }

Practice Problems

0/3solved
Build Destructuring Component

Create a reusable React component implementing Destructuring. Include proper state management and accessibility.

Solution
// Production-ready component with:
// - Proper TypeScript types
// - Accessibility (ARIA)
// - Error boundaries
// - Loading states
// - Memoization where needed
Destructuring Testing

Write unit and integration tests for Destructuring using React Testing Library.

Solution
// Test coverage:
// 1. Rendering tests
// 2. Interaction tests
// 3. Edge case tests
// 4. Accessibility tests
Destructuring Performance

Optimize Destructuring for performance. Consider memoization, code splitting, and bundle size.

Solution
// Optimization techniques:
// 1. React.memo / useMemo / useCallback
// 2. Code splitting with lazy()
// 3. Virtual scrolling for lists
// 4. Image lazy loading
// 5. Bundle analysis

Quiz

1. What is array destructuring?

Question 1 options

2. How do you skip elements in array destructuring?

Question 2 options

3. What does the rest pattern do in destructuring?

Question 3 options

4. How do you provide default values?

Question 4 options

5. How do you rename variables while destructuring?

Question 5 options

Flashcards

Question

What is destructuring?

Click to reveal answer

Answer

A syntax that extracts values from arrays/objects into variables: const { name } = obj;

Question

How do you skip elements in array destructuring?

Click to reveal answer

Answer

Use commas to skip: const [a, , c] = [1, 2, 3];

Question

How do you collect remaining elements?

Click to reveal answer

Answer

Use the rest pattern: const [first, ...rest] = arr;

Question

How do you provide default values?

Click to reveal answer

Answer

Use = after the variable: const { name = 'default' } = {};

Question

How do you rename variables while destructuring?

Click to reveal answer

Answer

Use colon: const { name: personName } = obj;

Revision Notes

Key Takeaways

  • 1.Destructuring extracts values from arrays/objects
  • 2.Use commas to skip elements
  • 3.Use rest to collect remaining elements
  • 4.Default values handle undefined
  • 5.Rename with colon syntax

Interview Tips

  • •Know array vs object destructuring syntax
  • •Understand rest pattern usage
  • •Be able to provide default values
  • •Know nested destructuring

Cheat Sheet

Destructuring Cheat Sheet

Array Destructuring

const [a, b, c] = [1, 2, 3];
const [a, , c] = [1, 2, 3]; // skip
const [a, ...rest] = [1, 2, 3]; // rest

Object Destructuring

const { name, age } = obj;
const { name: n } = obj; // rename
const { name, ...rest } = obj; // rest

Default Values

const { name = 'Guest' } = {};
const [a = 1] = [];

Nested Destructuring

const { user: { name } } = obj;
const { address: { city = 'Unknown' } = {} } = obj;

Function Parameters

function greet({ name, age = 0 }) {
  console.log(name, age);
}