It seems like you are using an ad blocker. To enhance your experience and support our website, please consider:

  1. Signing in to disable ads on our site.
  2. Sign up if you don't have an account yet.
  3. Or, disable your ad blocker by doing this:
    • Click on the ad blocker icon in your browser's toolbar.
    • Select "Pause on this site" or a similar option for lancecourse.com.

Javascript in 100 bits

Course by zooboole,

Last Updated on 2025-01-28 08:04:00

Lesson 20 - JavaScript Spread Operator

What is the Spread Operator?

The spread operator (...) allows us to quickly copy all or part of an array or object into another array or object.

Example 1: Using Spread Operator with Arrays

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5, 6];

console.log(newNumbers); 
// Output: [1, 2, 3, 4, 5, 6]
  • The ...numbers spreads the values of numbers into newNumbers.

    Example 2: Combining Arrays

    const arr1 = [10, 20, 30];
    const arr2 = [40, 50, 60];
    const combinedArr = [...arr1, ...arr2];
    console.log(combinedArr); 
    // Output: [10, 20, 30, 40, 50, 60]
  • We use ... to merge two arrays into a new one.

Example 3: Using Spread Operator with Objects

const person = { name: "Alice", age: 25 };
const updatedPerson = { ...person, city: "New York" };

console.log(updatedPerson); 
// Output: { name: "Alice", age: 25, city: "New York" }
  • The ...person spreads all properties from person into updatedPerson, then we add a new property city.

Example 4: Copying an Object Without Mutation

const car = { brand: "Toyota", model: "Corolla" };
const carCopy = { ...car };

console.log(carCopy); 
// Output: { brand: "Toyota", model: "Corolla" }
  • This is useful when we want to copy an object without modifying the original.

Try Your Hand

Let’s practice using the spread operator. Follow the steps below:

Steps:

1. Create a File:

  • Create a new file named lesson20-spread-operator.html

2. Write the Code:

  • Copy and paste the following code into your file:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lesson 20 - Spread Operator</title>
</head>
<body>
    <script>
        const fruits = ["apple", "banana", "orange"];
        const moreFruits = [...fruits, "grape", "mango"];

        console.log("Fruits:", fruits);
        console.log("More Fruits:", moreFruits);

        const user = { name: "John", age: 30 };
        const updatedUser = { ...user, country: "USA" };

        console.log("User:", user);
        console.log("Updated User:", updatedUser);
    </script>
</body>
</html>
  • Save the file in your folder.

3. Preview the File: Open the file in your browser and check the developer console.

Key Takeaways

  • The spread operator (...) allows you to copy arrays and objects.
  • You can use it to merge arrays and objects.
  • It prevents direct mutation of objects, making it useful in functional programming.