A JavaScript Spread operátora egy olyan újdonság, ami az ES6-tal került bele a nyelvbe. Valamilyen lista elemeit dobálja szét egyszerű változókba. Ennyi lenne? Tulajdonképpen igen, de mi lenne, ha egy példán keresztül néznénk inkább meg…?
Spread példa
Legyen egy függvényünk, ami összead 3 darab számot:
function osszead(a, b, c) {
return a + b + c;
}Ez a világ egyik legegyszerűbb függvénye talán. Hogyan hívjuk meg? Például így (ez a hagyományos mód):
osszead(1, 2, 3);Az eredmény a három szám összege lesz, vagyis 6.
Tegyük fel, hogy van egy három elemet tartalmazó tömbünk:
let szamok = [1, 2, 3];Ha a tömb elemeit akarjuk összeadni az osszead() függvényünk segítségével, akkor ahelyett, hogy egyesével átadnánk a tömb elemeit a függvénynek, szólhatunk a Spread operátornak, hogy siessen a segítségünkre és íme:
osszead(...szamok);Hoppácska! Az eredményt ellenőrizve most is 6-ot kaptunk. Mit csinált a Spread operátor? Nos azt, hogy fogta a tömböt és amikor a függvénynek átadtuk, akkor ő szépen, kiszedte a tömb elemeit és átadta őket a függvény paramétereinek.
Akkor sincs probléma, ha a tömb több elemet tartalmaz, mint ahány paramétere van a függvénynek. A Spread annyi elemet szed ki a tömbből, ahány paramétere van a függvénynek. A többivel nem csinál semmit.
Szintaktika (…)
A Spread operátor szintaxisa nagyon egyszerű: Három pontot követően kell beírni a tömb vagy bármilyen más lista-szerű változó nevét.
A Spread nem csak tömbökkel tud dolgozni, hanem bármilyen más lista-szerű adatszerkezettel elbír. Így például objektumokkal, HTML node listákkal is.
Rest paraméter
Van egy hasonló szintaktikával rendelkező másik ES6-os egzotikum is, ez pedig a Rest paraméter. A Spread operátor és a Rest paraméter között a különbség, az a használatnak a helye. A Spread operátort függvény hívásoknál, míg a Rest paramétereket a függvény deklarációban használjuk.
YouTube videó
YouTube csatornámon még több hasznos példát is találsz, illetve megmutatom, hogy ES6 előtt ez hogyan működött.
Íme a videó: