JavaScript Destructuring & Spread Cheat Sheet

Covers array and object destructuring with defaults and renaming, the spread operator for arrays and objects, and common usage patterns.

1 PageBeginnerApr 2, 2026

Array Destructuring

Unpack array values into variables, skip items, and set defaults.

javascript

const [first, second, ...rest] = [1, 2, 3, 4, 5];console.log(first, second, rest); // 1 2 [3, 4, 5]// Skipping elementsconst [, , third] = [1, 2, 3];// Default valuesconst [a = 10, b = 20] = [undefined, 5];console.log(a, b); // 10 5// Swapping variableslet x = 1, y = 2;[x, y] = [y, x]; // x=2, y=1

Object Destructuring

Extract, rename, and default object properties, including nested ones.

javascript

const user = { name: 'Ana', age: 30, address: { city: 'Lima' } };const { name, age: years, address: { city } } = user; // rename + nestedconsole.log(name, years, city); // Ana 30 Limaconst { role = 'guest' } = user; // default when key is missingconst { name: n2, ...otherFields } = user; // rest pulls remaining keysfunction greet({ name, age = 18 } = {}) { // destructure params w/ default object  console.log(`${name} is ${age}`);}

Spread Operator

Expand arrays, objects, and strings into new collections or arguments.

javascript

// Arraysconst nums = [1, 2, 3];const combined = [...nums, 4, 5]; // [1,2,3,4,5]const copy = [...nums]; // shallow copyconst max = Math.max(...nums); // spread into function args// Objects (ES2018+)const base = { a: 1, b: 2 };const merged = { ...base, c: 3, b: 20 }; // { a:1, b:20, c:3 } - later keys win// Strings spread into charactersconst chars = [...'hi']; // ['h', 'i']

Common Patterns

Where destructuring and spread show up most often in real code.

Function parameter destructuring- Extract named args from a single options object: function f({a, b}) {}
Swapping without a temp variable- [x, y] = [y, x] using array destructuring
Importing named exports- import { useState, useEffect } from 'react' is object destructuring at the module level
Rest in function args- function sum(...nums) collects remaining arguments into an array
Nested defaults- const { a: { b = 1 } = {} } = obj guards against a being undefined
Shallow copy caveat- Both spread and destructuring rest only shallow-copy; nested objects are still shared references

Pro Tip

Object spread ({...obj}) and Object.assign() only produce a shallow copy - nested objects/arrays are still shared by reference, so mutating a nested property affects both the original and the copy.

Was this cheat sheet helpful?

JavaScript Error Handling Cheat Sheet

TypeScript Advanced Types Cheat Sheet

Explore Topics

#JavaScriptDestructuringSpread#JavaScriptDestructuringSpreadCheatSheet#Programming#Beginner#ArrayDestructuring#ObjectDestructuring#SpreadOperator#CommonPatterns#OOP#DataStructures#CheatSheet#SkillVeris

Sri Hayavadhana Info-Tech

Professional Web Designing Services