JavaScript Resources > Object Destructuring & the Spread Operator

The spread operator and object destructuring are two powerful features in JavaScript that allow you to manipulate arrays and objects more easily. You will commonly see these two techniques in sample code and in the wild, so it’s important to understand how they work.

1. Spread Operator

The spread operator (...) is like a way to “unpack” or “spread out” the contents of an array or object. Think of it like opening a package and taking all the items out. You can read more about the spread operator here.

Here are some practical examples:

1. With Arrays

// Imagine you have a box of fruits
const fruits = ['apple', 'banana', 'orange'];

// The spread operator (...) unpacks all the fruits
console.log(...fruits);
// Prints: apple banana orange

// It's great for combining arrays
const moreFruits = ['grape', 'mango'];
const allFruits = [...fruits, ...moreFruits];
// allFruits is now: ['apple', 'banana', 'orange', 'grape', 'mango']

2. With Objects

// Let's say you have a student's basic info
const basicInfo = {
    name: 'Walter',
    age: 20
};

// And their academic info
const academicInfo = {
    major: 'Computer Science',
    gpa: 3.8
};

// Spread operator combines them into one object
const studentProfile = {...basicInfo, ...academicInfo};
// Result: {name: 'Walter', age: 20, major: 'Computer Science', gpa: 3.8}

3. Common Use Cases

1. Making Copies

// Create a new array with the same elements
const original = [1, 2, 3];
const copy = [...original];

// Changes to copy won't affect original
copy.push(4);

2. Adding Elements

// Add elements to the beginning or end easily
const numbers = [2, 3, 4];
const newNumbers = [1, ...numbers, 5];
// Result: [1, 2, 3, 4, 5]

3. Function Arguments

// Spread an array into function arguments
const numbers = [1, 2, 3];
Math.max(...numbers);  // Same as Math.max(1, 2, 3)

2. Object Destructuring

Object destructuring allows you to get specific items from an object. It’s just a convenient shortcut.

1. Simple Example

// Here's our backpack (object)
const backpack = {
    laptop: 'MacBook',
    water: 'Water Bottle',
    snack: 'Granola Bar'
};

// Old way of getting items:
const laptop = backpack.laptop;
const water = backpack.water;

// New way using destructuring:
const { laptop, water } = backpack;
// Now 'laptop' = 'MacBook' and 'water' = 'Water Bottle'

2. Renaming Variables

// Sometimes you want to call your variables something else
const person = {
    name: 'Alex',
    age: 20
};

// You can rename while destructuring
const { name: fullName, age: yearsOld } = person;
// Now 'fullName' = 'Alex' and 'yearsOld' = 20

3. Nested Objects

// Objects inside objects
const student = {
    name: 'Jamie',
    grades: {
        math: 90,
        science: 85
    }
};

// Getting nested values
const { name, grades: { math, science } } = student;
// name = 'Jamie', math = 90, science = 85

4. Common Use Cases

1. Function Parameters

// Instead of accessing props.name, props.age
function greetStudent({ name, age }) {
    console.log(`Hello ${name}, you are ${age} years old!`);
}

greetStudent({ name: 'Sam', age: 19 });

2. Working with API Responses

// When you get data from an API
const response = {
    status: 200,
    data: {
        userId: 123,
        username: 'coder123'
    }
};

// Get just what you need
const { data: { username } } = response;
// username = 'coder123'

CSCI 344: Spring 2025

Advanced Web Technology