JavaScript & ES6 - Spread Operator

Šta je Spread Operator?

Operator širenja (Spread Operator), koji se takođe označava sa (...), izvodi potpuno suprotnu funkciju od operatora rest. Operator širenja (spread) širi (tj. razdvaja) niz i prosljeđuje vrijednosti u navedenu funkciju, kao što je prikazano u sljedećem primjeru: 

function addNumbers(a, b, c) {
    return a + b + c;
}

let numbers = [5, 12, 8];

// ES5 način prenošenja niza kao argumenta funkcije
alert(addNumbers.apply(null, numbers)); // 25

// ES6 spread operator
alert(addNumbers(...numbers)); // 25
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript ES6 Spread Operator</title>
</head>
<body>
    <script>
    function addNumbers(a, b, c) {
        return a + b + c;
    }
    
    let numbers = [5, 12, 8];
    
    // ES5 način prenošenja niza kao argumenta funkcije
    document.write(addNumbers.apply(null, numbers)); // 25
    document.write("<br>");
    
    // ES6 spread operator
    document.write(addNumbers(...numbers)); // 25
    </script>
</body>
</html>

Operator širenja (spread) se takođe može koristiti za umetanje elemenata niza u drugi niz bez upotrebe metoda poput: push(), unshift() concat() itd. 

let pets = ["Cat", "Dog", "Parrot"];
let bugs = ["Ant", "Bee"];

// Stvaranje niza umetanjem elemenata iz drugih nizova
let animals = [...pets, "Tiger", "Wolf", "Zebra", ...bugs];

alert(animals); // Cat,Dog,Parrot,Tiger,Wolf,Zebra,Ant,Bee
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript ES6 umetnite elemente niza u drugi niz pomoću Spread Operator</title>
</head>
<body>
    <script>
    let pets = ["Cat", "Dog", "Parrot"];
    let bugs = ["Ant", "Bee"];
    
    // Stvaranje niza umetanjem elemenata iz drugih nizova
    let animals = [...pets, "Tiger", "Wolf", "Zebra", ...bugs];
    
    document.write(animals); // Cat,Dog,Parrot,Tiger,Wolf,Zebra,Ant,Bee
    </script>
</body>
</html>