JavaScript ES6-funktioner: de gode dele

ES6 tilbyder nogle seje nye funktionelle funktioner, der gør programmering i JavaScript meget mere fleksibel. Lad os tale om nogle af dem - specifikt standardparametre, hvileparametre og pilfunktioner.

Sjovt tip : Du kan kopiere og indsætte et hvilket som helst af disse eksempler / kode i Babel REPLog du kan se, hvordan ES6-koden transporteres til ES5.

Standardparameterværdier

JavaScript-funktioner har en unik funktion, der giver dig mulighed for at overføre et vilkårligt antal parametre under funktionsopkald (faktiske parametre) uanset antallet af parametre, der findes i funktionsdefinitionen (formelle parametre). Så du skal medtage standardparametre, hvis nogen glemmer at videregive en af ​​parametrene.

Hvordan standardparametre ville blive implementeret i ES5

Ovenstående virker fint, når vi kører det. number2blev ikke bestået, og vi kontrollerede dette ved hjælp af ||operatøren ' ' for at returnere den anden operand, hvis den første er falsk. Således blev '10' tildelt som en standardværdi, da den number2er udefineret.

Der er dog kun et problem. Hvad hvis nogen sender '0' som det andet argument? ⚠

Ovenstående tilgang mislykkedes, fordi vores standardværdi '10' tildeles i stedet for den beståede værdi, såsom '0'. Hvorfor? Fordi '0' vurderes som falsk!

Lad os forbedre ovenstående kode, skal vi?

Agh! Det er for meget kode. Overhovedet ikke sejt. Lad os se, hvordan ES6 gør det.

Standardparametre i ES6

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

number1og number2tildeles standardværdier på henholdsvis '5' og '10'.

Nå ja, dette er stort set det. Kort og sød. Ingen ekstra kode til at kontrollere for en manglende parameter. Dette gør funktionens krop flot og kort. ?

BEMÆRK: Når en værdi af undefinedsendes til en parameter med standardargument, er den overførte værdi som forventet ugyldig, og standardparameterværdien tildeles . Men hvis den nullvideregives, betragtes den som gyldig, og standardparameteren bruges ikke, og null er tildelt den pågældende parameter.

Et godt træk ved standardparametre er, at standardparameteren ikke nødvendigvis behøver at være en primitiv værdi, og vi kan også udføre en funktion for at hente standardparameterværdien. Her er et eksempel:

Tidligere parametre kan også være standardparametre for de parametre, der følger efter dem sådan:

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

Men det omvendte vil kaste en fejl. Det vil sige, at hvis den anden parameter er tildelt som standardværdien for den første parameter, resulterer den i en fejl, fordi den anden parameter endnu ikke er defineret, mens den tildeles den første parameter.

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

Hvileparametre

Et resten parameter er simpelthen en navngiven parameter, der indledes med tre prikker (...). Denne navngivne parameter bliver en matrix, der indeholder resten af ​​parametrene (dvs. bortset fra de navngivne parametre), der sendes under funktionsopkald.

Bare husk på, at der kun kan være én hvile parameter, og det skal være den sidste parameter. Vi kan ikke have en navngivet parameter efter en hvileparameter.

Her er et eksempel:

Som du kan se, har vi brugt restparameteren til at få alle de nøgler / egenskaber, der skal ekstraheres fra det passerede objekt, som er den første parameter.

Forskellen mellem en hvileparameter og 'argumentobjektet' er, at sidstnævnte indeholder alle de faktiske parametre, der er sendt under funktionsopkaldet, mens 'hvileparameteren' kun indeholder de parametre, der ikke er navngivne parametre og sendes under funktionsopkaldet.

Pilefunktioner ➡

Pilfunktioner eller "fede pilfunktioner" introducerer en ny syntaks til definition af funktioner, der er meget kortfattede. Vi kan undgå at skrive søgeord som function, returnog endda krøllede parenteser { }og parenteser ().

Syntaks

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.

"Pilefunktioner var som raketbrændstof til den funktionelle programmeringseksplosion i JavaScript." - Eric Elliott

Nå, der går du! Måske er det tid for dig at begynde at bruge disse funktioner.

ES6-funktioner som disse er et frisk pust, og udviklere elsker bare at bruge dem.

Her er linket til mit tidligere indlæg om variable erklæringer og hejsning!

Jeg håber, at dette motiverer dig til at tage ES6 på hovedet, hvis du ikke allerede har gjort det!

Fred ✌️️