Kezdőlap » A JavaScript Spread operátora

A JavaScript Spread operátora

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-operator

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ó:

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük