funktioner (Svenska)

ganska ofta måste vi utföra en liknande åtgärd på många ställen i skriptet.

till exempel måste vi visa ett snyggt meddelande när en besökare loggar in, loggar ut och kanske någon annanstans.

funktioner är de viktigaste ”byggstenarna” i programmet. De tillåter att koden kallas många gånger utan upprepning.

Vi har redan sett exempel på inbyggda funktioner, somalert(message),prompt(message, default) ochconfirm(question). Men vi kan också skapa egna funktioner.,

Funktionsdeklaration

för att skapa en funktion kan vi använda en funktionsdeklaration.

det ser ut så här:

function showMessage() { alert( 'Hello everyone!' );}

nyckelordet function går först och går sedan namnet på funktionen, sedan en lista över parametrar mellan parenteserna (kommaseparerad, tom i exemplet ovan) och slutligen koden för funktionen, även kallad ”funktionskroppen”., mellan lockiga hängslen.,

function name(parameters) { ...body...}

vår nya funktion kan anropas med namnet:showMessage().

till exempel:

function showMessage() { alert( 'Hello everyone!' );}showMessage();showMessage();

samtaletshowMessage() kör funktionskoden. Här ser vi meddelandet två gånger.

det här exemplet visar tydligt ett av de viktigaste syftena med funktioner: för att undvika dubblering av kod.,

om vi någonsin behöver ändra meddelandet eller hur det visas är det tillräckligt att ändra koden på ett ställe: funktionen som matar ut den.

lokala variabler

en variabel som deklareras inuti en funktion är bara synlig inuti den funktionen.

till exempel:

yttre variabler

en funktion kan också komma åt en yttre variabel, till exempel:

let userName = 'John';function showMessage() { let message = 'Hello, ' + userName; alert(message);}showMessage(); // Hello, John

funktionen har full tillgång till den yttre variabeln. Det kan också ändra det.,

till exempel:

den yttre variabeln används endast om det inte finns någon lokal.

om en variabel med samma namn deklareras inuti funktionen skuggar den den yttre. Till exempel använder funktionen i koden nedan den lokala userName. Den yttre ignoreras:

parametrar

Vi kan skicka godtyckliga data till funktioner med hjälp av parametrar (även kallade Funktionsargument) .

i exemplet nedan har funktionen två parametrar: fromoch text.,

När funktionen anropas i rader (*) och (**) kopieras de angivna värdena till lokala variabler from och text. Då använder funktionen dem.

Här är ytterligare ett exempel: Vi har en variabel from och skickar den till funktionen., Observera: funktionen ändras from, men ändringen ses inte utanför, eftersom en funktion alltid får en kopia av värdet:

standardvärden

om en parameter inte anges blir dess värde undefined.

till exempel kan ovannämnda funktionshowMessage(from, text) anropas med ett enda argument:

showMessage("Ann");

det är inte ett fel. Ett sådant samtal skulle mata ut "*Ann*: undefined"., Det finns ingen text, så det antas att text === undefined.,

om vi vill använda en ”standard” text I det här fallet kan vi ange det efter =:

function showMessage(from, text = "no text given") { alert( from + ": " + text );}showMessage("Ann"); // Ann: no text given

om parametern textinte passeras får den värdet"no text given"

här "no text given" är en sträng, men det kan vara ett mer komplext uttryck, som endast utvärderas och tilldelas om parametern saknas., Så det här är också möjligt:

alternativa standardparametrar

Ibland är det vettigt att ställa in standardvärden för parametrar som inte finns i funktionsdeklarationen, men i ett senare skede, under dess utförande.,parameter, vi kan jämföra det med undefined:

function showMessage(text) { if (text === undefined) { text = 'empty message'; } alert(text);}showMessage(); // empty message

…eller så kan vi använda || operatör:

// if text parameter is omitted or "" is passed, set it to 'empty'function showMessage(text) { text = text || 'empty'; ...}

moderna JavaScript-motorer stöder den nullish coalescing-operatören??, det är bättre när falsy-värden, som0, anses vara vanliga:

returnerar ett värde

en funktion kan returnera en värde tillbaka till anropskoden som resultat.,

det enklaste exemplet skulle vara en funktion som summerar två värden:

function sum(a, b) { return a + b;}let result = sum(1, 2);alert( result ); // 3

direktivetreturn kan vara på vilken plats som helst i funktionen. När utförandet når det stannar funktionen och värdet returneras till anropskoden (tilldelad till result ovan).

det kan finnas många förekomster av return I en enda funktion. Till exempel:

det är möjligt att använda return utan ett värde., That causes the function to exit immediately.

For example:

function showMovie(age) { if ( !checkAge(age) ) { return; } alert( "Showing you the movie" ); // (*) // ...}

In the code above, if checkAge(age) returns false, then showMovie won’t proceed to the alert.,

return (some + long + expression + or + whatever * f(a) + f(b))

return; (some + long + expression + or + whatever * f(a) + f(b))

return ( some + long + expression + or + whatever * f(a) + f(b) )

namnge en funktion

funktioner är åtgärder. Så deras namn är vanligtvis ett verb. Det ska vara kort, så exakt som möjligt och beskriva vad funktionen gör, så att någon som läser koden får en indikation på vad funktionen gör.,

det är en utbredd praxis att starta en funktion med ett verbalt prefix som vagt beskriver åtgärden. Det måste finnas ett avtal inom laget om prefixernas mening.

till exempel visar funktioner som börjar med"show" vanligtvis något.

funktion som börjar med…

exempel på sådana namn:

med prefix på plats ger en blick på ett funktionsnamn en förståelse för vilken typ av arbete det gör och vilken typ av värde det returnerar.,

Functions == Comments

funktionerna ska vara korta och göra exakt en sak., Om den saken är stor är det kanske värt att dela upp funktionen i några mindre funktioner. Ibland kan det inte vara så lätt att följa denna regel, men det är definitivt en bra sak.

en separat funktion är inte bara lättare att testa och felsöka – dess existens är en bra kommentar!

jämför till exempel de två funktionernashowPrimes(n) nedan. Var och en matar ut primtal upp till n.,

den första varianten använder en etikett:

function showPrimes(n) { nextPrime: for (let i = 2; i < n; i++) { for (let j = 2; j < i; j++) { if (i % j == 0) continue nextPrime; } alert( i ); // a prime }}

den andra varianten använder en extra funktion isPrime(n) för att testa för primalitet:

den andra varianten är lättare att förstå, eller hur? Istället för kodstycket ser vi ett namn på åtgärden (isPrime). Ibland hänvisar människor till sådan kod som självbeskrivande.

så kan funktioner skapas även om vi inte har för avsikt att återanvända dem. De strukturerar koden och gör den läsbar.,

sammanfattning

en funktionsdeklaration ser ut så här:

function name(parameters, delimited, by, comma) { /* code */}

• värden som skickas till en funktion som parametrar kopieras till dess lokala variabler.
• en funktion kan komma åt yttre variabler. Men det fungerar bara inifrån och Ut. Koden utanför funktionen ser inte dess lokala variabler.
• en funktion kan returnera ett värde. Om det inte gör det är resultatet undefined.,

för att göra koden ren och lätt att förstå, rekommenderas att använda främst lokala variabler och parametrar i funktionen, inte yttre variabler.

det är alltid lättare att förstå en funktion som får parametrar, arbetar med dem och returnerar ett resultat än en funktion som inte får några parametrar, men ändrar yttre variabler som en bieffekt.

funktionsnamn:

• ett namn ska tydligt beskriva vad funktionen gör. När vi ser ett funktionssamtal i koden ger ett bra namn oss omedelbart en förståelse för vad det gör och returnerar.,
• en funktion är en åtgärd, så funktionsnamn är vanligtvis verbala.
• Det finns många välkända funktionsprefix somcreate…,show…,get…,check… och så vidare. Använd dem för att antyda vad en funktion gör.

funktioner är de viktigaste byggstenarna i skript. Nu har vi täckt grunderna, så vi faktiskt kan börja skapa och använda dem. Men det är bara början på vägen. Vi kommer att återvända till dem många gånger, gå djupare in i deras avancerade funktioner.