JavaScript Destructuring Assignment Error Fix

In this tutorial, you'll learn about JavaScript Destructuring Assignment Error Fix. We cover key concepts, practical examples, and best practices.

The Problem

Destructuring assignment throws TypeError when the source value is null or undefined, or when nested properties are missing. Without proper defaults or guards, destructuring produces runtime errors that crash your application.

Quick Fix

Step 1: Set default values for missing properties

// Wrong — destructuring undefined values
const user = { name: 'Alice' };
const { name, age } = user;
console.log(age); // undefined (no error, but unexpected)

// Right — provide defaults
const { name, age = 25 } = user;
console.log(age); // 25

Step 2: Guard against null or undefined

// Wrong — TypeError: Cannot destructure property of null
function getName(user) {
    const { name } = user;
    return name;
}
console.log(getName(null)); // TypeError

// Right — use default empty object
function getName(user) {
    const { name = 'Guest' } = user || {};
    return name;
}
console.log(getName(null)); // Guest
console.log(getName({ name: 'Alice' })); // Alice

Step 3: Handle nested destructuring safely

const response = {
    data: null
};

// Wrong — TypeError: Cannot read properties of null
const { data: { items } } = response;

// Right — nested defaults
const { data: { items = [] } = {} } = response;
console.log(items); // []

Step 4: Rename variables with destructuring

const user = { firstName: 'Alice', lastName: 'Smith' };

// Wrong — trying to use firstName as first_name
const { firstName: first_name, lastName: last_name } = user;
console.log(first_name); // ReferenceError: first_name... Wait, this works

// Actually correct — renaming works
console.log(first_name); // Alice
console.log(last_name);  // Smith

// But the original variable firstName is undefined
console.log(firstName); // ReferenceError

Step 5: Destructure array with defaults

const coords = [10];

// Wrong — second value is undefined
const [x, y] = coords;
console.log(y); // undefined

// Right — default value
const [x, y = 0] = coords;
console.log(y); // 0

Prevention

• Always provide default values for destructured properties that may be missing
• Guard against null/undefined source values with || {}
• Use nested defaults with { a: { b = defaultValue } = {} } pattern
• Validate API response shapes before deep destructuring
• Use TypeScript to catch missing properties at compile time

Common Mistakes with destructuring error

1. Mixing let bindings with <- bindings in do notation, producing type errors
2. Overlapping type class instances that cause GHC to reject the program with ambiguous dispatch errors
3. Non-exhaustive pattern matches that compile with warnings then crash at runtime

These mistakes appear frequently in real-world JS code. DodaTech's contributors have identified these patterns through analysis of open-source projects and production systems.

Practice Exercise

Write a pure function that safely divides two integers using Maybe, then test it with edge cases like division by zero and negative numbers.

This exercise reinforces the concepts covered in this guide. Try implementing it before checking online solutions.

FAQ