JavaScript ES6 funkcije: dobri dijelovi

ES6 nudi neke nove nove funkcionalne značajke koje programiranje u JavaScript-u čine mnogo fleksibilnijim. Razgovarajmo o nekima od njih - posebno o zadanim parametrima, parametrima odmora i funkcijama strelice.

Zabavan savjet : možete kopirati i zalijepiti bilo koji od ovih primjera / koda u Babel REPLi možete vidjeti kako se ES6 kod transpilira u ES5.

Zadane vrijednosti parametara

JavaScript funkcije imaju jedinstvenu značajku koja vam omogućuje prosljeđivanje bilo kojeg broja parametara tijekom poziva funkcije (stvarni parametri), bez obzira na broj parametara prisutnih u definiciji funkcije (formalni parametri). Dakle, morate uključiti zadane parametre samo u slučaju da netko zaboravi proslijediti jedan od parametara.

Kako bi se zadani parametri implementirali u ES5

Gore navedeno izgleda u redu kada ga pokrenemo. number2nije prošao i to smo provjerili pomoću ||operatora ' ' za vraćanje drugog operanda ako je prvi lažan. Dakle, '10' je dodijeljena kao zadana vrijednost jer number2nije definirana.

Postoji samo jedan problem. Što ako netko kao drugi argument doda '0'? ⚠

Gornji pristup ne bi uspio jer bi se umjesto zadane vrijednosti dodijelila naša zadana vrijednost '10', kao što je '0'. Zašto? Budući da se '0' ocjenjuje lažno!

Poboljšajmo gornji kod, možemo li?

Agh! To je previše koda. Uopće nije cool. Pogledajmo kako to radi ES6.

Zadani parametri u ES6

function counts(number1 = 5, number2 = 10) { // do anything here}

number1te im number2se dodjeljuju zadane vrijednosti '5' i '10'.

Pa da, to je poprilično to. Kratko i slatko. Nema dodatnog koda za provjeru nedostajućeg parametra. To čini tijelo funkcije lijepim i kratkim. ?

NAPOMENA: Kada undefinedse za parametar sa zadanim argumentom prenese vrijednost od , očekivano je prenesena vrijednost nevaljana i dodijeljena je zadana vrijednost parametra . Ali ako nullje proslijeđen, smatra se valjanim, a zadani parametar se ne koristi i tom se parametru dodjeljuje null.

Lijepa značajka zadanih parametara je da zadani parametar ne mora nužno biti primitivna vrijednost, a također možemo izvršiti funkciju za dohvaćanje zadane vrijednosti parametra. Evo primjera:

Prethodni parametri također mogu biti zadani parametri za parametre koji slijede nakon njih, ovako:

function multiply(first, second = first) { // do something here}

Ali inverzna će baciti pogrešku. Odnosno, ako je drugi parametar dodijeljen kao zadana vrijednost za prvi parametar, to rezultira pogreškom jer drugi parametar još nije definiran dok je dodijeljen prvom parametru.

function add(first = second, second) { return first + second;}console.log(add(undefined, 1)); //throws an error

Parametri odmora

Ostatak parametar je jednostavno nazvan parametar koji prethodi tri točkice (...). Ovaj imenovani parametar postaje niz koji sadrži ostatak parametara (tj. Osim imenovanih parametara) proslijeđenih tijekom poziva funkcije.

Samo imajte na umu da parametar odmora može biti samo jedan , a to mora biti zadnji parametar. Ne možemo imati imenovani parametar nakon parametra odmora.

Evo primjera:

Kao što vidite, koristili smo parametar rest kako bismo izvukli sve ključeve / svojstva iz proslijeđenog objekta, što je prvi parametar.

Razlika između parametra za odmor i "objekta argumenata" je u tome što potonji sadrži sve stvarne parametre koji su proslijeđeni tijekom poziva funkcije, dok "parametar za odmor" sadrži samo parametre koji nisu imenovani parametri i koji se prosljeđuju tijekom poziva funkcije.

Funkcije strelice ➡

Funkcije strelica ili „funkcije masnih strelica“ uvode novu sintaksu definiranja funkcija koja je vrlo sažeta. Možemo izbjeći tipkanje ključnih riječi poput function, returnpa čak i kovrčavih zagrada { }i zagrada ().

Sintaksa

The syntax comes in different flavors, depending on our usage. All the variations have one thing in common, i.e they begin with the arguments, followed by thearrow (=>), followed by the function body.

The arguments and the body can take different forms. Here’s the most basic example:

let mirror = value => value;
// equivalent to:
let mirror = function(value) { return value;};

The above example takes a single argument “value” (before the arrow) and simply returns that argument(=> value;). As you can see, there’s just the return value, so no need for return keyword or curly braces to wrap up the function body.

Since there is only one argument, there’s no need for parentheses “( )” as well.

Here’s an example with more than one argument to help you understand this:

let add = (no1, no2) => no1 + no2;
// equivalent to:
let add = function(no1, no2) { return no1 + no2;};

If there are no arguments at all, you must include empty parentheses like below:

let getMessage = () => 'Hello World';
// equivalent to:
let getMessage = function() { return 'Hello World';}

For a function body with just a return statement, curly braces are optional.

For a function body having more than just a return statement, you need to wrap the body in curly braces just like traditional functions.

Here’s a simple calculate function with two operations — add and subtract. Its body must be wrapped in curly braces:

let calculate = (no1, no2, operation) => { let result; switch (operation) { case 'add': result = no1 + no2; break; case 'subtract': result = no1 - no2; break; } return result;};

Now what if we want a function that simply returns an object? The compiler will get confused whether the curly braces are of the object (()=>{id: number} ) or curly braces of the function body.

The solution is to wrap the object in parentheses. Here’s how:

let getTempItem = number => ({ id: number});
// effectively equivalent to:
let getTempItem = function(number) { return { id: number };};

Let’s have a look at the final example. In this we’ll use filter function on a sample array of numbers to return all numbers greater than 5,000:

// with arrow functionlet result = sampleArray.filter(element => element > 5000);
// without arrow functionlet result = sampleArray.filter(function(element) { return element > 5000;});

We can see how much less code is necessary compared to the traditional functions.

A few things about arrow functions to keep in mind though:

  • They can’t be called with new, can’t be used as constructors (and therefore lack prototype as well)
  • Arrow functions have their own scope, but there’s no ‘this’ of their own.
  • No arguments object is available. You can use rest parameters however.

Since JavaScript treats functions as first-class, arrow functions make writing functional code like lambda expressions and currying much easier.

"Funkcije strelica bile su poput raketnog goriva za eksploziju funkcionalnog programiranja u JavaScriptu." - Eric Elliott

Pa, eto! Možda je vrijeme da počnete koristiti ove značajke.

ES6 značajke poput ovih dašak su svježeg zraka, a programeri ih jednostavno vole koristiti.

Evo veze na moj prethodni post o deklaracijama varijabli i podizanju!

Nadam se da vas ovo motivira da krenete na ES6 ako već niste!

Mir ✌️️