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:
30
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]