Goal

Practice using array and object destructuring, and learn how to properly copy objects in JavaScript. These patterns are essential for working with data and will be important when you learn React.

Setup

1. Within your tutorial07 folder, create a folder called 02-destructuring for this exercise.
2. Each exercise will be a separate .mjs file that you can run with Node.js.

Before You Start: Reference

Before working on the exercises, familiarize yourself with these patterns:

1. Destructuring

Destructuring allows you to extract values from arrays or properties from objects into separate variables. It’s a convenient way to access data without repeatedly using dot notation or bracket notation.

// Array destructuring
const colors = ['red', 'green', 'blue'];
const [first, second] = colors;  // first = 'red', second = 'green'

// Object destructuring
const student = { name: "Alice", age: 20, major: "CS" };
const { name, age } = student;  // name = 'Alice', age = 20

// Renaming
const person = { firstName: "Bob", yearsOld: 25 };
const { firstName: first, yearsOld: age } = person;  // first = 'Bob', age = 25

2. Copying Objects and Arrays

The spread operator (...) can be used to create copies of arrays and objects. When copying objects, this creates a “shallow” copy¹ where top-level properties are independent, but nested arrays or objects are still shared between the original and copy.

// Shallow copy (spread operator)
const original = { name: "Alice", courses: ['CSCI 182'] };
// Top-level properties copied, nested arrays/objects shared
const copy = { ...original };  

// Array copy
const arr = [1, 2, 3];
// New array with same elements
const arrCopy = [...arr];  

Your Tasks

Please complete the 3 destructuring exercises below:

const fruits1 = ['apple', 'banana'];
const fruits2 = ['orange', 'grape'];

// Use spread operator to combine both arrays into a new array
// Print the result: console.log(allFruits);

['apple', 'banana', 'orange', 'grape']

const basicInfo = { name: "Diana", age: 22 };
const contactInfo = { email: "diana@example.com", phone: "555-1234" };

// Use spread operator to merge both objects into a new object
// Print the result: console.log(merged);

{ name: 'Diana', age: 22, email: 'diana@example.com', phone: '555-1234' }

const original = {
    name: "Eve",
    age: 20,
    courses: ['CSCI 182', 'CSCI 344']
};

// Use spread operator to create a shallow copy
// Modify the copy's name property
// Modify the copy's courses array (add a new course, e.g., 'CSCI 370')
// Print both original and copy to see the difference

// Original: 
{ 
    name: 'Eve', 
    age: 20, 
    courses: [ 'CSCI 182', 'CSCI 344', 'CSCI 370' ]  // what?!? The array is still a pointer
}
// Copy: 
{ 
    name: 'Eve Modified', 
    age: 20, 
    courses: [ 'CSCI 182', 'CSCI 344', 'CSCI 370' ] 
}

    const deepCopy = JSON.parse(JSON.stringify(original));

Checklist

Takeaways

• Spread operator: (...) expands arrays/objects for copying, merging, or combining
• Shallow copy: {...obj} copies top-level properties only; nested objects/arrays are still shared (modifying nested properties affects the original)
• Function parameters: Destructuring in parameters is common in React (props pattern)

Next Steps

After completing these exercises, you’ll be ready to build the Course Search Interface in Tutorial 7C, where you’ll use array methods with DOM manipulation!

← Back to Tutorial 7

¹ Deep Copying: If you need a completely independent copy where nested properties are also separate, you can use JSON.parse(JSON.stringify(obj)). However, this method only works with objects that can be serialized to JSON (no functions, dates, or circular references). For most cases, shallow copying with the spread operator is sufficient.