~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/js/16js-destructuring-spread

# JavaScript Destructuring & Spread

Extract values from arrays/objects and merge them easily.

## Array Destructuring

```javascript
let [a, b, c] = [1, 2, 3];       // a=1, b=2, c=3
let [first, , third] = [1, 2, 3]; // skip: first=1, third=3
let [head, ...tail] = [1, 2, 3];  // head=1, tail=[2, 3]
let [x = 10, y = 20] = [1];       // x=1, y=20 (default)
```

**Tip:** Use defaults to handle missing values gracefully.

## Object Destructuring

```javascript
let { name, age } = { name: "John", age: 25 };

// Rename variables
let { name: userName, age: userAge } = { name: "John", age: 25 };

// Default values
let { name, age, city = "NYC" } = { name: "John", age: 25 };

// Rest pattern
let { name, ...details } = { name: "John", age: 25, city: "NYC" };
// details = { age: 25, city: "NYC" }
```

## Spread (Arrays)

```javascript
let arr1 = [1, 2, 3];
let arr2 = [...arr1];             // copy
let merged = [...arr1, ...arr2];  // merge
let chars = [..."hello"];         // string → array
```

## Spread (Objects)

```javascript
let defaults = { theme: "light", language: "en" };
let userSettings = { theme: "dark" };
let settings = { ...defaults, ...userSettings };
// { theme: "dark", language: "en" }
```

**Remember:** Later properties override earlier ones with the same key.

## Complete Example: Data Transformation

```javascript
let users = [
  { name: "John", city: "NYC" },
  { name: "Jane", city: "LA" }
];

// Destructure directly in callbacks
let names = users.map(({ name }) => name);
// ["John", "Jane"]

// Group by city
let grouped = users.reduce((groups, { city, ...rest }) => {
  if (!groups[city]) groups[city] = [];
  groups[city].push(rest);
  return groups;
}, {});
```

## Complete Example: Array Utilities

```javascript
// Remove duplicates
let unique = ([...new Set([1, 2, 2, 3])]); // [1, 2, 3]

// Chunk array
function chunk(arr, size) {
  let chunks = [];
  for (let i = 0; i < arr.length; i += size) {
    chunks.push(arr.slice(i, i + size));
  }
  return chunks;
}

chunk([1, 2, 3, 4, 5], 2); // [[1, 2], [3, 4], [5]]
```

## Best Practices

1. **Use destructuring for extraction** — cleaner code
2. **Use spread for copying** — avoids mutation
3. **Use rest for remaining** — collect leftovers
4. **Use defaults** — handle missing values

## Common Mistakes

1. **Forgetting `{}` for objects** — array destructuring uses `[]`
2. **Not handling undefined** — use defaults
3. **Mutating original** — use spread to copy
4. **Overcomplicating** — keep it readable

No changes yet

cancel