Spread & Rest operator

Spread operator

Sa novim ES2015 standardom je došao novi operator “…” koji može da razdvoji niz u listu i obrnuto da grupiše listu u niz. U zavisnosti koju funkciju obavlja ovaj parametar ima naziv “spread” ili “rest”. Ukoliko se operator nalazi ispred iteratibilnog objekta i “širi” iterator (npr.niz) u pojedinačne vrednosti praveći listu, onda se naziva “spread”.

Transformacija niza u listu argumenata

Ovaj operator je zamena za često korišćen problem kada je potrebno niz prebaciti u listu argumenata. A najbolji primer je “širenje” niza u listu argumenata funkcije. Ovaj operator se koristi pri pozivanju funkcije:

function foo (a,b,c){
  console.log(a);
  console.log(b);
  console.log(c);
}
argNiz = [1,2,3];

// Problem funkcija ne prihvata niz:
foo(argNiz);                         // Vraća: [1,2,3], undefined, undefined

// Stari način rešavanja problema:
foo.apply(null, argNiz);             // Vraća: 1,2,3

// Novi pristup sa novom sintaksom
foo(...argNiz);                      // Vraća: 1,2,3

function foo (a,b,c){

console.log(a);

console.log(b);

console.log(c);

}

argNiz = [1,2,3];

// Problem funkcija ne prihvata niz:

foo(argNiz); // Vraća: [1,2,3], undefined, undefined

// Stari način rešavanja problema:

foo.apply(null, argNiz); // Vraća: 1,2,3

// Novi pristup sa novom sintaksom

foo(...argNiz); // Vraća: 1,2,3

Deklaracije niza koji sadrži drugi niz

Koristi se u okviru deklaracije niza koji sadrži drugi niz:

var a = [2,3]
var b = [1, ...a];    // [1,2,3]

1 2	var a = [2,3] var b = [1, ...a]; // [1,2,3]

Kloniranje objekta

Sa novim standardom je dozvoljeno korišećenje spread operatora u okviru object literala. Ova pogodnost nam omogućava da korišćenjem spread operatora jednostavno kloniramo objekte, bez korišćenja metode Object.assign():

var obj1 = { foo: 'bar', x: 42 };

var clonedObj = { ...obj1 }; // Vraca: { foo: 'bar', x: 42 }

var obj1 = { foo: 'bar', x: 42 };

var clonedObj = { ...obj1 }; // Vraca: { foo: 'bar', x: 42 }

Spajanje dva objekta

Korišećenjem spread operatora je olakšano spajanje dva objekta bez dupliranja svojstava:

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var mergedObj = { ...obj1, ...obj2 }; // Vraća: { foo: "baz", x: 42, y: 13 }

var obj1 = { foo: 'bar', x: 42 };

var obj2 = { foo: 'baz', y: 13 };

var mergedObj = { ...obj1, ...obj2 }; // Vraća: { foo: "baz", x: 42, y: 13 }

Rest operator

Neograničeni broj argumenata kao niz

Rest sintaksa nam dozvoljava da predstavimo neograničeni broj argumenata kao niz. Ovaj operator se koristi pri definisanju funkcije tako što grupiše preostale argumente u niz:

function nekaFunkcija(x, y, ...ostatak) {
  console.log("Ovo je višak prosledjenih argumenata:  " + ostatak);
}
nekaFunkcija(3, 5, 8, 6);   // Vraća: "Ovo je višak prosledjenih argumenata:  8,6"

function nekaFunkcija(x, y, ...ostatak) {

console.log("Ovo je višak prosledjenih argumenata: " + ostatak);

}

nekaFunkcija(3, 5, 8, 6); // Vraća: "Ovo je višak prosledjenih argumenata: 8,6"

Sakupljen niz može po potrebi da se destruktuira na pojedinačne vrednosti.

function f(...[a, b, c]) {
  return a + b + c;
}

f(1, 2, 3)    // Vraća: 6
f(1)          // Vraća: NaN (jer su "b" i "c" undefined)
f(1, 2, 3, 4) // Vraća: 6 (Četvriti parametr nije destruktuiran jer nema kojoj vrednosti da se dodeli)

function f(...[a, b, c]) {

return a + b + c;

}

f(1, 2, 3) // Vraća: 6

f(1) // Vraća: NaN (jer su "b" i "c" undefined)

f(1, 2, 3, 4) // Vraća: 6 (Četvriti parametr nije destruktuiran jer nema kojoj vrednosti da se dodeli)

Transformacija liste u niz

Ovaj operator zamenjuje prekomplikovano rešenje koje se koristilo za prebacivanje liste u niz :

function kvadriranje(a, b, c) {
  // Stari pristup:
  var niz = Array.prototype.slice.call(arguments);

  var kvadrat = niz.map(function (clanNiza){
	return clanNiza * clanNiza;
  });

function kvadriranje(a, b, c) {

// Stari pristup:

var niz = Array.prototype.slice.call(arguments);

var kvadrat = niz.map(function (clanNiza){

return clanNiza * clanNiza;

});

Novi način sa rest operatorom:

function kvadriranje(a, b, c) {
  var niz = [...arguments];    // Stari pristup: var niz = Array.prototype.slice.call(arguments);
  var kvadrat = niz.map(function (clanNiza){
	return clanNiza * clanNiza;
  });
  console.log("Kvadrati brojeva su: " + kvadrat)
}

kvadriranje(1,2,3); // Vraća: "Kvadrati brojeva su: 1,4,9"

function kvadriranje(a, b, c) {

var niz = [...arguments]; // Stari pristup: var niz = Array.prototype.slice.call(arguments);

var kvadrat = niz.map(function (clanNiza){

return clanNiza * clanNiza;

});

console.log("Kvadrati brojeva su: " + kvadrat)

}

kvadriranje(1,2,3); // Vraća: "Kvadrati brojeva su: 1,4,9"

BONUS: Asocijativnost spread/rest operatora

Svaki JavaScript operator ima svoju “važnost” koja je direktno povezana za asocijativnost i način na koji se odredjuje koja operacija ima prednost u odsustvu zagrada. Sread/Rest operator spada u “slabije” operatore (tj. jedino je slabiji , “zarez” operator). Tabelu značaja operatora pogledajte u članku “JavaScript opertator”.

Primer

U JavaScript svetu možemo da naletimo na sledeći izraz:

const result = {
  name: "results";
  ...!!data ? : { default: true }
};

const result = {

name: "results";

...!!data ? : { default: true }

};

Bitan deo celog ovog izraza je ustvari ovaj teško razumljivo deo:

...!!data ? : { default: true }

1	...!!data ? : { default: true }

es6

Da bi se razumeo izraz potrebno je da znamo koji operator ima veći značaj tj. prednost pri izvršavanju izraza. Sledeća lista prikazuje operatore iz ovog izraza prema “značaju”:

!! (operator negacije)
… ? … : … (ternarni operator)
… (spread operator)

Predhodna lista nam odredjuje tok izvrašavanja izraza: prvo se sa duplom negacijom “data” promenjiva konvertuje u logičku vrednost (više o ovome pročitajte u članku “JS snippets (tips & tricks)”). Ukoliko dobijemo TRUE logičku vrednost onda na scenu stupa ternarni operator koji uzima “data” objekat nakon čega ga “raširi” sa spread operatorom, za FALSE vrednost trenarrni operator vraća objekt literal i nje ga raširi sa spread operatorom.

Podelite:

Web Programiranje

Skripte