JavaScript-pijlfuncties kunnen u een betere ontwikkelaar maken

JavaScript-pijlfuncties kunnen u een betere ontwikkelaar maken

JavaScript ES6 bracht spannende veranderingen in de wereld van webontwikkeling. Nieuwe toevoegingen aan de JavaScript-taal brachten nieuwe mogelijkheden.





Een van de meer populaire veranderingen was de toevoeging van pijlfuncties in JavaScript. Pijlfuncties zijn een nieuwe manier om JavaScript-functie-expressies te schrijven, waardoor u op twee verschillende manieren functies in uw app kunt maken.



Pijlfuncties vergen een beetje aanpassing als je een expert bent in traditionele JavaScript-functies. Laten we eens kijken naar wat deze zijn, hoe ze werken en hoe ze u ten goede komen.





Wat zijn JavaScript-pijlfuncties?

Pijlfuncties zijn een nieuwe manier om functie-uitdrukkingen te schrijven die waren opgenomen in de release van JavaScript ES6 . Ze zijn vergelijkbaar met de JavaScript-functie-expressies die u hebt gebruikt, met enkele iets andere regels.

Pijlfuncties zijn altijd anonieme functies, hebben verschillende regels voor:



this

, en hebben een eenvoudigere syntaxis dan traditionele functies.

video's met leeftijdsbeperking op YouTube bekijken

Deze functies gebruiken een nieuw pijlteken:



=>

Als je ooit in Python hebt gewerkt, lijken deze functies erg op: Python Lambda-expressies .

De syntaxis voor deze functies is een beetje schoner dan normale functies. Er zijn een paar nieuwe regels om in gedachten te houden:



  • Het functiesleutelwoord is verwijderd
  • Het return-trefwoord is optioneel
  • Een accolade is optioneel

Er zijn veel kleine veranderingen die moeten worden doorgenomen, dus laten we beginnen met een basisvergelijking van functie-uitdrukkingen.

Pijlfuncties gebruiken

Pijlfuncties zijn gemakkelijk te gebruiken. Het begrijpen van pijlfuncties is gemakkelijker wanneer ze worden vergeleken met traditionele functie-uitdrukkingen.

Hier is een functie-uitdrukking die twee getallen optelt; eerst met behulp van de traditionele functiemethode:

let addnum = function(num1,num2){
return num1 + num2;
};
addnum(1,2);
>>3

Het is een vrij eenvoudige functie die twee argumenten nodig heeft en de som retourneert.

Hier is de uitdrukking veranderd in een pijlfunctie:

let addnum = (num1,num2) => { return num1 + num2;};
addnum(1,2);
>>3

De syntaxis van de functie is heel anders bij het gebruik van een pijlfunctie. Het functiesleutelwoord is verwijderd; het pijlteken laat JavaScript weten dat u een functie schrijft.

De accolades en het return-trefwoord zijn er nog steeds. Deze zijn optioneel met pijlfuncties. Hier is een nog eenvoudiger voorbeeld van dezelfde functie:

let addnum = (num1,num2) => num1 + num2;

Het return-trefwoord en de accolades zijn nu verdwenen. Wat overblijft is een zeer schone eenregelige functie die bijna de helft van de code is als de oorspronkelijke functie. Je krijgt hetzelfde resultaat met veel minder geschreven code.

Er zijn meer pijlfuncties. laten we dieper duiken, zodat je een beter gevoel krijgt voor wat ze kunnen doen.

Functies van de pijlfunctie

Pijlfuncties hebben veel verschillende toepassingen en functies.

muiswiel schuift omhoog bij omlaag scrollen

Reguliere functies

Pijlfuncties kunnen een of meer argumenten gebruiken. Als u twee of meer argumenten gebruikt, moet u deze tussen haakjes plaatsen. Als je maar één argument hebt, hoef je geen haakjes te gebruiken.

let square = x => x * x
square(2);
>>4

Pijlfuncties kunnen zonder argumenten worden gebruikt. Als u geen argumenten in uw functie gebruikt, moet u lege haakjes gebruiken.

let helloFunction = () => Console.log('Hello reader!');
helloFunction();
>>Hello reader!

Eenvoudige functies zoals deze gebruiken veel minder code. Stel je voor hoeveel gemakkelijker een complex projecteren als een JavaScript-diavoorstelling wordt wanneer je een eenvoudigere manier hebt om functies te schrijven.

Dit gebruiken

Het concept van

this

is meestal het lastigste onderdeel van het gebruik van JavaScript. Pijlfuncties maken

this

gemakkelijker te gebruiken.

Wanneer u pijlfuncties gebruikt

this

wordt bepaald door de omsluitende functie. Dit kan problemen veroorzaken die zich voordoen wanneer u geneste functies maakt en nodig hebt

this

om op je hoofdfunctie te solliciteren

Hier is een populair voorbeeld dat de tijdelijke oplossing laat zien die u moet gebruiken met reguliere functies.

function Person() {
var that = this; //You have to assign 'this' to a new variable
that.age = 0;
setInterval(function growUp() {
that.age++;
}, 1000);
}

De waarde toekennen van

this

aan een variabele maakt het leesbaar wanneer u een functie binnen uw hoofdfunctie aanroept. Dit is rommelig, hier is een betere manier om dit te doen met behulp van pijlfuncties.

function Person(){
this.age = 0;
setInterval(() => {
this.age++; // Now you can use 'this' without a new variable declared
}, 1000);
}

Hoewel ze geweldig zijn voor functies, mogen ze niet worden gebruikt om methoden binnen een object te maken. Pijlfuncties gebruiken niet de juiste scoping voor

this

.

Hier is een eenvoudig object dat een methode binnenin maakt met behulp van een pijlfunctie. De methode moet de toppings variabel met één wanneer aangeroepen. In plaats daarvan werkt het helemaal niet.

hoe maak ik ruimte vrij op mijn Apple Watch
let pizza = {
toppings: 5,
removeToppings: () => {
this.toppings--;
}
}
//A pizza object with 5 toppings
>pizza
>>{toppings: 5, removeToppings: f}
pizza.removeToppings(); //The method will not do anything to the object
>pizza
>>{toppings: 5, removeToppings: f} //Still has 5 toppings

Werken met arrays

Met behulp van pijlfuncties kunt u de code vereenvoudigen die wordt gebruikt om met arraymethoden te werken. Arrays en array-methoden zijn zeer belangrijke onderdelen van JavaScript dus je zult ze veel gebruiken.

Er zijn enkele handige methoden zoals de kaart methode die een functie uitvoert op alle elementen van een array en de nieuwe array retourneert.

let myArray = [1,2,3,4];
myArray.map(function(element){
return element + 1;
});
>> [2,3,4,5]

Dit is een vrij eenvoudige functie die een waarde toevoegt aan elke waarde in de array. U kunt dezelfde functie schrijven met minder code door een pijlfunctie te gebruiken.

let myArray = [1,2,3,4];
myArray.map(element => {
return element + 1;
});
>> [2,3,4,5]

Het is nu veel gemakkelijker te lezen.

Objectliteratuur maken

Pijlfuncties kunnen worden gebruikt om letterlijke objecten in JavaScript te maken. Gewone functies kunnen ze maken, maar ze zijn iets langer.

let createObject = function createName(first,last) {
return {
first: first,
last: last
};
};

U kunt hetzelfde object maken met een pijlfunctie met minder code. Met behulp van pijlnotatie moet u de hoofdtekst van de functie tussen haakjes plaatsen. Hier is de verbeterde syntaxis met pijlfuncties.

let createArrowObject = (first,last) => ({first:first, last:last});

JavaScript-pijlfuncties en meer

U kent nu een aantal verschillende manieren waarop JavaScript-pijlfuncties uw leven als ontwikkelaar gemakkelijker maken. Ze verkorten de syntaxis, geven u meer controle met behulp van

this

, maakt het maken van objecten eenvoudiger en geeft u een nieuwe manier om met arraymethoden te werken.

De introductie van pijlfuncties, samen met vele andere functies, in JavaScript ES6 laat zien hoe belangrijk JavaScript is geworden in webontwikkeling. Er is echter nog zoveel meer dat u kunt doen.

Meer weten over JavaScript? Leer deze JavaScript-frameworks. Plus, onze JavaScript-spiekbriefje biedt waardevolle informatie en leert meer over hoe JavaScript werkt kan je een betere ontwikkelaar maken.

Deel Deel Tweeten E-mail 6 hoorbare alternatieven: de beste gratis of goedkope audioboek-apps

Als je geen zin hebt om voor audioboeken te betalen, zijn hier enkele geweldige apps waarmee je gratis en legaal naar ze kunt luisteren.

Lees volgende Gerelateerde onderwerpen
  • Programmeren
  • JavaScript
Over de auteur Anthony Grant(40 artikelen gepubliceerd)

Anthony Grant is een freelance schrijver over programmering en software. Hij is een major in computerwetenschappen en houdt zich bezig met programmeren, Excel, software en technologie.

Meer van Anthony Grant

Abonneer op onze nieuwsbrief

Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!

Klik hier om je te abonneren