12 Essential Destructuring Techniques to Write Cleaner JavaScript

Destructuring assignment is a key ES6 feature that makes code more concise and improves development efficiency. Here are 12 practical destructuring patterns to write more elegant code.

1. Array Basic Destructuring

The most basic array destructuring lets us easily extract elements from an array:

// 基础解构
const [first, second] = [1, 2, 3];
console.log(first);  // 1
console.log(second); // 2

// 跳过元素
const [, , third] = [1, 2, 3];
console.log(third);  // 3

2. Object Destructuring with Renaming

When avoiding naming conflicts, we can give new names to destructured properties:

const person = {
  name: '张三',
  age: 25
};

const { name: userName, age: userAge } = person;
console.log(userName); // '张三'
console.log(userAge);  // 25

3. Setting Default Values

Destructuring can set default values to prevent undefined:

// 数组默认值
const [x = 1, y = 2] = [undefined, null];
console.log(x); // 1
console.log(y); // null

// 对象默认值
const { title = '默认标题', count = 0 } = {};
console.log(title); // '默认标题'
console.log(count); // 0

4. Nested Destructuring

For complex nested data structures, nested destructuring can be used:

const user = {
  id: 1,
  info: {
    name: '李四',
    address: {
      city: '北京'
    }
  }
};

const { info: { name, address: { city } } } = user;
console.log(name); // '李四'
console.log(city); // '北京'

5. Combining with Spread Operator

The spread operator together with destructuring easily handles remaining elements:

6. Function Parameter Destructuring

Using destructuring in function parameters makes code clearer:

7. Dynamic Property Destructuring

Computed property names can be used in destructuring:

8. Swapping Variables with Destructuring

Destructuring can elegantly swap variable values:

9. Chained Destructuring Assignment

Multiple destructuring assignments can be performed in a single line:

10. Destructuring with Regular Expression Matching

Destructuring is especially useful when handling regex results:

11. Destructuring Imports

When importing modules, destructuring allows importing only needed parts:

12. Conditional Destructuring

Combined with the nullish coalescing operator, conditional destructuring can be achieved:

const data = null;
const { value = 'default' } = data ?? {};
console.log(value); // 'default'

Feel free to add more examples.