Spread-operaattori JavaScriptissä

ES6:ssa ilmestyi erikoinen operaattori ..., jota kutsutaan spread:ksi.

Kun spread-operaattori on taulukon edessä, se jakaa taulukon erillisiksi arvoiksi, muuttaen taulukon joukoksi parametreja, joita tarvitaan funktion kutsussa.

Kuulostaa varmasti hämärältä, joten katsotaanpa yksinkertaista esimerkkiä. Olkoon meillä funktio, joka ottaa vastaan 3 parametria ja palauttaa niiden summan:

javascriptfunction func(num1, num2, num3) {
  return num1 + num2 + num3;
}

Olkoon meillä myös taulukko, jossa on kolme alkiota:

javascriptlet arr = [1, 2, 3];

On selvää, että emme voi yksinkertaisesti antaa tätä taulukkoa funktion parametrina, näin:

javascriptlet arr = [1, 2, 3];
func(arr);

Silloinhan koko taulukko menisi funktion ensimmäiseen parametriin, vaikka tähän parametriin pitäisi antaa numero (samoin kuin muihinkin parametreihin).

Voimme tietysti tehdä seuraavasti:

javascriptlet arr = [1, 2, 3];
func(arr[0], arr[1], arr[2]);

Mutta on olemassa helpompikin tapa - käyttää spread-operaattoria:

javascriptlet arr = [1, 2, 3];
func(...arr);

Muuttujan olemassaolo ei ole pakollista - spreadiä voi soveltaa suoraan taulukkoon:

javascriptfunc(...[1, 2, 3]);

javascriptlet arr = [1, 2, 3, 4, 5];

javascriptfunction func(num1, num2, num3, num4, num5) {
  return num1 + num2 + num3 + num4 + num5;
}