JavaScript Destructuring Interview Questions

Array destructuring — position-based extraction

const rgb = [255, 128, 0]

// Without destructuring
const red   = rgb[0]
const green = rgb[1]
const blue  = rgb[2]

// With destructuring — mirrors the array's shape on the left
const [red, green, blue] = rgb
// red = 255, green = 128, blue = 0

// Skip elements with commas
const [,, blue] = rgb              // only need blue
const [first,, third] = [1, 2, 3]  // first=1, third=3

// Rest element — captures remaining items
const [head, ...tail] = [1, 2, 3, 4, 5]
// head = 1, tail = [2, 3, 4, 5]

// Default values — used when the value is undefined
const [a = 10, b = 20, c = 30] = [1, 2]
// a = 1, b = 2, c = 30 — c was undefined so default kicks in

// Swap variables — no temp variable needed
let x = 1, y = 2
;[x, y] = [y, x]
// x = 2, y = 1

// From function return values
function minMax(arr) {
  return [Math.min(...arr), Math.max(...arr)]
}
const [min, max] = minMax([3, 1, 4, 1, 5, 9])
// min = 1, max = 9

Object destructuring — name-based extraction

const user = { name: 'Alice', age: 30, role: 'admin', active: true }

// Basic — variable names must match property names
const { name, age } = user
// name = 'Alice', age = 30

// Rename — extract with a different variable name
const { name: userName, role: userRole } = user
// userName = 'Alice', userRole = 'admin'
// 'name' and 'role' no longer exist as variable names

// Default values — used when the property is undefined
const { name, score = 0, level = 1 } = user
// score = 0 (not in user), level = 1 (not in user), name = 'Alice'

// Rename AND default together
const { displayName: name = 'Anonymous' } = user
// user has no 'displayName', so name = 'Anonymous'

// Rest — collect remaining properties
const { name, age, ...rest } = user
// rest = { role: 'admin', active: true }

// Picking specific properties from an object
const { name, role } = user  // only extract what you need

Nested destructuring — matching deep structures

const response = {
  status: 200,
  data: {
    user: {
      id: 1,
      name: 'Alice',
      address: {
        city: 'Paris',
        country: 'France'
      }
    },
    permissions: ['read', 'write']
  }
}

// Nested object destructuring
const {
  status,
  data: {
    user: {
      name,
      address: { city, country }
    },
    permissions: [firstPermission, ...otherPermissions]
  }
} = response

// status = 200, name = 'Alice', city = 'Paris', country = 'France'
// firstPermission = 'read', otherPermissions = ['write']

// Note: 'data', 'user', 'address', 'permissions' are NOT created as variables
// They are patterns used to navigate — only the leaf variable names exist

Destructuring in function parameters

// The most important real-world use of destructuring

// Without destructuring — positional, hard to read with many args
function createUser(name, age, role, active, score) { }
createUser('Alice', 30, 'admin', true, 95)  // what is 'true'? what is 95?

// With destructuring — named, self-documenting, order irrelevant
function createUser({ name, age, role = 'user', active = true, score = 0 }) {
  return { name, age, role, active, score }
}
createUser({ name: 'Alice', age: 30, role: 'admin', score: 95 })
// Default for 'active' and partial score — clear what's being passed

// Rename in parameters
function display({ name: displayName, role: userRole = 'guest' }) {
  console.log(`${displayName} (${userRole})`)
}

// Array params
function first([head]) { return head }
function swap([a, b]) { return [b, a] }

// Nested in params
function getCity({ address: { city = 'Unknown' } = {} }) {
  return city
}
getCity({ address: { city: 'Paris' } })  // 'Paris'
getCity({ address: {} })                  // 'Unknown'
getCity({})                               // 'Unknown' — address defaults to {}

// React component props — the canonical use
function UserCard({ name, avatar, role = 'user', onEdit }) {
  return (
    <div>
      <img src={avatar} alt={name} />
      <h2>{name}</h2>
      <span>{role}</span>
      <button onClick={onEdit}>Edit</button>
    </div>
  )
}

Destructuring in loops

const users = [
  { id: 1, name: 'Alice', score: 90 },
  { id: 2, name: 'Bob',   score: 75 },
  { id: 3, name: 'Carol', score: 85 },
]

// for...of with object destructuring
for (const { id, name, score } of users) {
  console.log(`${id}: ${name} scored ${score}`)
}

// Object.entries() — [key, value] pairs
const config = { host: 'localhost', port: 3000, debug: true }
for (const [key, value] of Object.entries(config)) {
  console.log(`${key} = ${value}`)
}

// map with destructuring
const labels = users.map(({ name, score }) => `${name}: ${score}`)
// ['Alice: 90', 'Bob: 75', 'Carol: 85']

// filter then destructure in the callback
const topScorers = users
  .filter(({ score }) => score >= 85)
  .map(({ name }) => name)
// ['Alice', 'Carol']

Import destructuring — the module connection

// ES modules use object destructuring syntax for named imports
import { useState, useEffect, useCallback } from 'react'
import { BrowserRouter, Route, Switch } from 'react-router-dom'

// It's not EXACTLY the same as destructuring (imports are live bindings)
// but the mental model is identical — pull out named exports by name

// Dynamic import with destructuring
const { default: lodash, cloneDeep } = await import('lodash')

// CommonJS require + destructuring
const { readFile, writeFile } = require('fs/promises')

Gotchas and edge cases

// Gotcha 1: destructuring undefined/null throws
const { name } = null       // TypeError: Cannot destructure 'name' of null
const { name } = undefined  // TypeError

// Fix: provide a default for the whole value
const { name } = user ?? {}  // safe — {} if user is null/undefined
const { name } = user || {}  // also works but || triggers on any falsy value

// Gotcha 2: object destructuring in a statement (not assignment)
let name, age
{ name, age } = user  // SyntaxError — {} starts a block statement

// Fix: wrap in parentheses
;({ name, age } = user)  // ✓

// Gotcha 3: nested destructuring with potentially missing intermediaries
const { address: { city } } = user  // throws if user.address is undefined

// Fix: default the intermediate
const { address: { city } = {} } = user  // safe — address defaults to {}

// Gotcha 4: default only triggers for undefined, not null
const { name = 'Anonymous' } = { name: null }
// name = null — null does NOT trigger the default
// Only undefined does