Arrays and the spread operator(...). JavaScript examples

Spread operator (…) – allows you to divide the array into separate values:

    const users = ["Alexander", "Timote", "Sergey"];
    console.log(...users);  // Alexander Timote  Sergey

With the help of this operator, we can fill one array with the values of another array:

    const users = ["Alexander", "Timote", "Sergey"];


    const users2 = [...users];
    const users3 = new Array(...users);
    const users4 = Array.of(...users);

    console.log(users);     //  ["Alexander", "Timote", "Sergey"]
    console.log(users2);     //  ["Alexander", "Timote", "Sergey"]
    console.log(users3);     //  ["Alexander", "Timote", "Sergey"]

The values of several arrays can be transferred to one array. Example:

    const user1 = ["Alexander", "Timote", "Sergey"];
    const user2 = ["Bob", "William", "John"];
    const allusers = [...users1, "Jordan", ...users2];

    console.log(allusers);     //  ["Alexandeer", "Timote", "Sergey", "Jordan", "Bob", "William", "John"]

Similarly, you can pass values from an array to function parameters:

    const users1 = ["Alexander", "Timote", "Sergey"];

    function print(first, second, third) {
        console.log(first);
        console.log(second);
        console.log(third);
    }

    print(...users1); // Alexander
// Timote
// Sergey

It is worth noting that this is not the same as passing an array when calling a function:

    print(users1);

In this case, the entire array will be passed to the first parameter of the function – the first parameter, and the rest will have the value undefined.

!If the number of function parameters is less than the number of array elements, then the remaining array elements will simply be discarded. If the number of parameters is greater than the number of array elements, then the parameters that did not get values will get the value undefined.

Copying arrays with the spread operator

Using the spread operator, you can easily copy the elements of one array to another.

    const users = ["Alexander", "Timote", "Sergey"];
    const users2 = [...users];

    users2[0] = "Dan";

    console.log(users2);// ["Dan", "Timote", "Sergey"]

    console.log(users);//  ["Alexander", "Tomote", "Sergey"]

Sometimes there may be problems:

    const user1 = [{ name: "Sam" }, { name: "Tom" }, { name: "Bob" }];
    const user2 = [...user1];
    user2[0].name = "Dan";
    console.log(user2);     //  [{name:"Dan"}, {name:"Tom"}, {name:"Bob"}]

    //as you can see in the code below the values have also changed
    console.log(user1);        //  [{name:"Dan"}, {name:"Tom"}, {name:"Bob"}]

The console output will show us that changing one array led to a change in the second array. Since objects represent a reference type, and when copying to a new array, it is not a copy of the object that is passed (as in case with strings), and the object itself.

Therefore, the first element of one array and the first element of the second array will actually represent the same an object.

However, we can completely replace an element of one array with another object, and then the element of the second array is still will store a reference to the old object and will not depend on the first array:

    const users = [{ name: "Sam" }, { name: "Tom" }, { name: "Bob" }];
    const users2 = [...users];
    //overwrite the entire object, not its property
    users2[0] = { name: "Dan" };

    console.log(users2);     //  [{name:"Dan"}, {name:"Tom"}, {name:"Bob"}]
    console.log(users);        //  [{name:"Sam"}, {name:"Tom"}, {name:"Bob"}]