JavaScript-funktioner


Innehållsförteckning

    Visa innehållsförteckning

En JavaScript-funktion är ett kodblock utformat för att utföra en särskild uppgift.

En JavaScript-funktion körs när "något" åberopar det (kallar det).

Exempel

//  Function to compute the product of p1 and p2
function myFunction(p1, p2) {
    return p1 * p2;
}

Prova själv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>

<p>Call a function which performs a calculation and returns the result:</p>

<p id="demo"></p>

<script>
function myFunction(p1, p2) {
  return p1 * p2;
}

let result = myFunction(4, 3);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

JavaScript-funktionssyntax

En JavaScript-funktion definieras med nyckelordet function, följt av ett namn, följt av parenteser ().

Funktionsnamn kan innehålla bokstäver, siffror, understreck och dollartecken (samma regler som variabler).

Parentesen kan innehålla parameternamn separerade med kommatecken:
(parameter1, parameter2, ...)

Koden som ska exekveras, av funktionen, placeras inom parentes: {}

function
name(parameter1, parameter2, parameter3) {
    // code to be executed
}

Funktions parametrar listas inom parentesen() i funktionsdefinitionen.

Funktions argument är värdena tas emot av funktionen när den anropas.

Inuti funktionen beter sig argumenten (parametrarna) som lokala variabler.


Funktionsanrop

Koden inuti funktionen kommer att köras när "något" anropar (anropar) fungera:

  • När en händelse inträffar (när en användare klickar på en knapp)

  • När den anropas (anropas) från JavaScript-kod

  • Automatiskt (självanropat)

Du kommer att lära dig mycket mer om funktionsanrop längre fram i detta handledning.



Funktion Return

När JavaScript når en retur-sats, funktionen kommer att sluta köras.

Om funktionen anropades från ett uttalande kommer JavaScript "return" för att exekvera koden efter anropssatsen.

Funktioner beräknar ofta ett returvärde. Returvärdet är "återvände" tillbaka till uppringaren":

Exempel

Beräkna produkten av två tal och returnera resultatet:

// Function is called, the return value will end up in x
let x = myFunction(4, 3);

function myFunction(a, b) {
// Function returns the product of a and b
    return a * b;
}

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>

<p>Call a function which performs a calculation and returns the result:</p>

<p id="demo"></p>

<script>
let x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;

function myFunction(a, b) {
  return a * b;
}
</script>

</body>
</html>

Varför funktioner?

Med funktioner kan du återanvända kod

Du kan skriva kod som kan användas många gånger.

Du kan använda samma kod med olika argument för att få olika resultat.


Operatören

Operatören() anropar (anropar) funktionen:

Exempel

Konvertera Fahrenheit till Celsius:

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

let value = toCelsius(77);

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>

<p>Invoke (call) a function that converts from Fahrenheit to Celsius:</p>
<p id="demo"></p>

<script>
function toCelsius(f) {
  return (5/9) * (f-32);
}

let value = toCelsius(77);
document.getElementById("demo").innerHTML = value;
</script>

</body>
</html>

Att komma åt en funktion med felaktiga parametrar kan returnera ett felaktigt svar:

Exempel

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

let value = toCelsius();

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>

<p>Invoke (call) a function to convert from Fahrenheit to Celsius:</p>
<p id="demo"></p>

<script>
function toCelsius(f) {
  return (5/9) * (f-32);
}

let value = toCelsius();
document.getElementById("demo").innerHTML = value;
</script>

</body>
</html>

Att komma åt en funktion utan() returnerar funktionen och inte funktionsresultatet:

Exempel

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

let value = toCelsius;

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>

<p>Accessing a function without () returns the function and not the function result:</p>
<p id="demo"></p>

<script>
function toCelsius(f) {
  return (5/9) * (f-32);
}

let value = toCelsius;
document.getElementById("demo").innerHTML = value;
</script>

</body>
</html>

Notera

Som du ser från exemplen ovan hänvisar toCelsius till funktionsobjektet, och toCelsius() hänvisar till funktionsresultatet.


Funktioner som används som variabelvärden

Funktioner kan användas på samma sätt som du använder variabler, i alla typer av formler, tilldelningar och beräkningar.

Exempel

Istället för att använda en variabel för att lagra returvärdet för en funktion:

let x = toCelsius(77);
let text = "The temperature is " + x + " Celsius";

Du kan använda funktionen direkt, som ett variabelvärde:

let text = "The temperature is " + toCelsius(77) + " Celsius";

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<p>Using a function as a variable:</p>

<p id="demo"></p>

<script>
let text = "The temperature is " + toCelsius(77) + " Celsius.";
document.getElementById("demo").innerHTML = text;

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
} 
</script>

</body>
</html>


Du kommer att lära dig mycket mer om funktioner senare i denna handledning.


Lokala variabler

Variabler som deklareras i en JavaScript-funktion blir LOKAL till funktionen.

Lokala variabler kan endast nås inifrån funktionen.

Exempel

// code here can NOT use carName

function myFunction() {
  let carName = "Volvo";
  // code here CAN use carName
}

// code here can NOT use carName

Prova själv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>

<p>Outside myFunction() carName is undefined.</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
let text = "Outside: " + typeof carName;
document.getElementById("demo1").innerHTML = text;

function myFunction() {
  let carName = "Volvo";
  let text = "Inside: " + typeof carName + " " + carName; 
  document.getElementById("demo2").innerHTML = text;
}

myFunction();
</script>

</body>
</html>

Eftersom lokala variabler bara känns igen i deras funktioner, kan variabler med samma namn användas i olika funktioner.

Lokala variabler skapas när en funktion startar och raderas när funktionen är klar.