Hvordan til Å Definere Funksjoner i JavaScript

Innledning

En funksjon er en blokk med kode som utfører en handling eller returnerer en verdi. Funksjoner er tilpasset kode definert av programmerere som er gjenbrukbar og kan derfor gjøre programmene mer modulær og effektiv.

I denne opplæringen vil vi lære flere måter å definere en funksjon, må du ringe en funksjon, og bruke funksjonen parametere i JavaScript.

Definere en Funksjon

Funksjoner er definert, eller deklarert, med function søkeord. Nedenfor er syntaksen for funksjonen i JavaScript.,

function nameOfFunction() { // Code to be executed}

erklæringen begynner med function søkeord, etterfulgt av navnet på funksjonen. Funksjon navn følger de samme reglene som variabler — de kan inneholde bokstaver, tall, understreker og dollartegn, og er ofte skrevet i kamel-saken. Navnet er etterfulgt av et sett med parenteser, som kan brukes for valgfrie parametere. Koden for funksjonen finnes i klammeparentes, akkurat som for en uttalelse eller en if-setning.,

I vårt første eksempel, vil vi ta en funksjon erklæring til å skrive en hilsen uttalelse til konsollen.

// Initialize greeting functionfunction greet() { console.log("Hello, World!");}

Her har vi koden for å skrive ut Hello, World! til konsollen som finnes inne i greet() funksjon. Det er imidlertid ingenting vil skje, og ingen kode som skal utføre før vi påberope oss, eller ring funksjonen. Du kan aktivere en funksjon ved å skrive navnet på funksjonen etterfulgt av parenteser.

// Invoke the functiongreet();

Nå vil vi sette dem sammen, definere vår funksjon og viste det.

hilse.,js

// Initialize greeting functionfunction greet() { console.log("Hello, World!");}// Invoke the functiongreet();

Med samtale for greet();, vil funksjonen kjøre, og vi vil motta Hello, World! som programmet er utgang.

Output
Hello, World!

Nå har vi vår greet() – koden finnes i en funksjon, og du kan bruke den så mange ganger som vi ønsker.

ved Hjelp av parametere, kan vi gjøre koden mer dynamisk.

Funksjon Parametere

I vår greet.js fil, laget vi en grunnleggende funksjon som skriver ut Hello, World til konsollen., Ved hjelp av parametere, kan vi legge til ytterligere funksjonalitet som vil gjøre koden mer fleksibel. Parametrene er få innspill som har gått inn funksjoner som navn og oppfører seg som lokale variabler.

Når en bruker logger seg på et program, kan det hende vi vil bruke programmet til å hilse på dem ved navn, i stedet for bare å si «Hei, Verden!».

vil Vi legge til en parameter i vår funksjon, kalt name, for å representere navnet på personen blir møtt.,

// Initialize custom greeting functionfunction greet(name) { console.log(`Hello, ${name}!`);}

navnet på funksjonen er greet, og nå har vi en enkelt parameter i parentes. Navnet på parameteren følger de samme regler som for navngiving av en variabel. Innsiden av funksjon, i stedet for en statisk streng bestående av Hello, World vi har en mal bokstavelig streng som inneholder vår parameter, som nå fungerer som en lokal variabel.

vil Du merke at vi ikke har definert vår name parameter hvor som helst. Vi tilordner en verdi når vi påkaller vår funksjon., Forutsatt at vi bruker er oppkalt Sammy, vil vi kalle funksjonen og sted brukernavnet som argument. Argumentet er den faktiske verdien som blir vedtatt i funksjon, i dette tilfellet er det strengen "Sammy".

// Invoke greet function with "Sammy" as the argumentgreet("Sammy");

verdi "Sammy" blir utdelt i funksjon gjennom name – parameteren. Nå hver gang name er brukt gjennom hele funksjon, det vil representere "Sammy" verdi. Her er hele koden.

greetSammy.,js

Når vi kjører programmet ovenfor, vil vi få følgende resultat.

Output
Hello, Sammy!

Nå har vi et eksempel på hvordan en funksjon kan brukes om igjen. I en virkelig verden eksempel funksjonen ville trekke et brukernavn fra en database i stedet for direkte leveranser navnet som et argument verdi.

I tillegg til parametere, variabler kan bli erklært innsiden av funksjoner. Disse variablene er kjent som lokale variabler, og vil bare eksisterer inne i omfanget av sin egen funksjon blokk., Variabel omfang bestemmer variablene tilgjengelighet; variabler som er definert inne i en funksjon ikke er tilgjengelig fra utsiden av funksjon, men de kan brukes så mange ganger som deres funksjon er brukt gjennom hele programmet.

Returnerer Verdier

Mer enn en parameter som kan brukes i en funksjon. Vi kan passere flere verdier i en funksjon og returnere en verdi. Vi vil lage en funksjon for å finne summen av to verdier, representert ved x og y.

sum.,js

// Initialize add functionfunction add(x, y) { return x + y;}// Invoke function to find the sumadd(9, 7);

I programmet ovenfor, har vi definert en funksjon med parametere x og y, og deretter gikk de verdier 9 og 7 til funksjonen. Når vi kjører programmet, vil vi motta summen av disse tallene som utgang.

Output
16

I dette tilfellet, med 9 og 7 sendt til sum() funksjon, programmet tilbake 16.,

Ved return søkeord som er brukt, funksjon slutter å kjøre, og verdien av uttrykket er returnert. Selv om det i dette tilfellet vil nettleseren vise verdien i konsollen, det er ikke det samme som å bruke console.log() for å skrive ut til konsollen. Ved å ta i bruk funksjonen vil output verdi nøyaktig hvor funksjonen ble tatt i bruk. Denne verdien kan brukes umiddelbart eller plassert i en variabel.

Funksjon Uttrykk

I den siste delen, vi brukte en funksjon erklæring for å få summen av to tall og avkastning som verdi., Vi kan også lage en funksjon uttrykk ved å tilordne en funksjon til en variabel.

ved Hjelp av vår samme add funksjon eksempel, kan vi bruke direkte den returnerte verdien til en variabel, i dette tilfellet sum.

functionExpression.js

// Assign add function to sum constantconst sum = function add(x, y) { return x + y;}// Invoke function to find the sumsum(20, 5);

Output
25

Nå sum konstant er en funksjon. Vi kan gjøre dette til uttrykk mer konsis ved å slå det inn en anonym funksjon, som er en ikke navngitt funksjon., Foreløpig vår funksjon har navnet add, men med funksjonen uttrykk det er ikke nødvendig å nevne funksjon og navn er vanligvis utelatt.

anonymousExpression.js

// Assign function to sum constantconst sum = function(x, y) { return x + y;}// Invoke function to find the sumsum(100, 3);

Output
103

I dette eksempelet har vi fjernet navnet på funksjonen, som var add, og slått den inn i en anonym funksjon. En funksjon som heter uttrykk kan brukes til å hjelpe i debugging, men det er vanligvis utelatt.,

Pil Funksjoner

Så langt, har vi gått gjennom hvordan du angir funksjoner ved hjelp av function søkeord. Det er imidlertid en nyere, mer presis metode for å definere en funksjon kalt pilen funksjon uttrykk som av ECMAScript 6. Pil funksjoner, som de er kjent, er representert ved likhetstegn etterfulgt av en større enn-tegn: =>.

Pil funksjoner er alltid anonyme funksjoner og en type funksjon uttrykk. Vi kan opprette et grunnleggende eksempel for å finne produktet av to tall.

arrowFunction.,js

// Define multiply functionconst multiply = (x, y) => { return x * y;}// Invoke function to find productmultiply(30, 4);

Output
120

i Stedet for å skrive ut søkeord function, bruker vi => pil for å angi en funksjon. Ellers, det fungerer på samme måte som en vanlig funksjon uttrykk, med noen avanserte forskjeller som du kan lese om under Pil Funksjoner på Mozilla Developer Network.

I tilfelle av kun én parameter, er parenteser kan utelukkes. I dette eksemplet, vi er kvadrere x, som bare krever ett nummer for å bli vedtatt som et argument., I parentes har blitt utelatt.

// Define square functionconst square = x => { return x * x;}// Invoke function to find productsquare(8);

Output
64

Merk: I tilfelle av ingen parametre, en tom satt i parentes () er nødvendig i pil-funksjoner.

Med disse spesielle eksempler som bare består av en return statement, pil funksjoner tillate syntaksen til å bli redusert ytterligere. Hvis funksjonen er bare en enkelt linje return, både klammeparentes og return uttalelse kan være utelatt, som vist i eksemplet nedenfor.,

// Define square functionconst square = x => x * x;// Invoke function to find productsquare(10);

Output
100

Alle disse tre typer syntaks resultat i samme effekt. Det er som regel et spørsmål om preferanser eller selskapet koding standarder for å bestemme hvordan du vil strukturere egne funksjoner.

Konklusjon

I denne opplæringen, har vi dekket funksjon erklæringer og funksjon uttrykk, returnerer verdier fra funksjoner, tilordne verdiene til variablene, og ES6 pil funksjoner.

Funksjoner er blokker med kode som returnerer en verdi eller utføre en handling, for å gjøre programmer skalerbare og modular.