JS Spread Operator

Exercise 3: The Spread Operator in JavaScript

Make this exercise in Visual Studio Code and node.js.

These exercises practice the spread operator, which will be valuable when you start learning React.

3.1 Merging Arrays

Exercise:

Given two arrays:

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

Use the spread operator to merge array1 and array2 into a new array called mergedArray. Print mergedArray.

Expected Output:

[1, 2, 3, 4, 5, 6]

3.2 Copying Array

Exercise:

Given the array:

const originalArray = ['apple', 'banana', 'cherry'];

Use the spread operator to create a copy of originalArray called copiedArray. Then, add 'date' to copiedArray without changing originalArray. Print both arrays to verify.

Expected Output:

originalArray: ['apple', 'banana', 'cherry']
copiedArray: ['apple', 'banana', 'cherry', 'date']

3.3 Adding Elements to the Beginning of an Array

Exercise:

Given the array:

const numbers = [20, 30, 40];

Use the spread operator to add 10 at the beginning of numbers, creating a new array called newNumbers. Print newNumbers.

Expected Output:

[10, 20, 30, 40]

4. Merging Objects

Exercise:

Given two objects:

const userDetails = { name: 'Alice', age: 25 };
const contactInfo = { email: 'alice@example.com', phone: '123-456-7890' };

Use the spread operator to merge userDetails and contactInfo into a new object called userProfile. Print userProfile.

Expected Output:

{ name: 'Alice', age: 25, email: 'alice@example.com', phone: '123-456-7890' }

3.5 Copying and Modifying an Object

Exercise:

Given the object:

const book = { title: '1984', author: 'George Orwell', year: 1949 };

Use the spread operator to create a copy of book, but modify the year to 1950 in the new object updatedBook. Print both book and updatedBook.

Expected Output:

book: { title: '1984', author: 'George Orwell', year: 1949 }
updatedBook: { title: '1984', author: 'George Orwell', year: 1950 }

6. Using Spread with Function Arguments

Exercise:

Define a function sum that takes any number of arguments and returns their sum. Use the spread operator to pass an array of numbers to this function:

const numbers = [5, 10, 15];
console.log(sum(...numbers));

Expected Output:

7. Combining Arrays with New Elements

Exercise:

Given two arrays:

const colors1 = ['red', 'blue'];
const colors2 = ['green', 'yellow'];

Use the spread operator to combine colors1 and colors2 into a new array called allColors, but add 'purple' at the end of the array. Print allColors.

Expected Output:

['red', 'blue', 'green', 'yellow', 'purple']

8. Rest Operator in Function Parameters

Exercise:

Define a function describePerson that takes a name parameter followed by any number of hobbies (using the rest operator). The function should log the name and a list of hobbies. Call the function as shown:

describePerson('Charlie', 'reading', 'coding', 'hiking');

Expected Output:

Name: Charlie, Hobbies: reading, coding, hiking

9. Destructuring with Rest Operator

Exercise:

Given the array:

const numbers = [10, 20, 30, 40, 50];

Use array destructuring with the rest operator to assign the first element to firstNum and the remaining elements to otherNums. Print firstNum and otherNums.

Expected Output:

firstNum: 10
otherNums: [20, 30, 40, 50]