JavaScript-funktionsdefinitioner


Innehållsförteckning

    Visa innehållsförteckning


JavaScript-funktioner är definierade med funktion nyckelord.

Du kan använda en funktion deklaration eller en funktion uttryck.


Funktionsdeklarationer

Tidigare i den här handledningen lärde du dig att funktioner deklareras med följande syntax:

function functionName(parameters) {
  // code to be executed
}

Deklarerade funktioner exekveras inte omedelbart. De är "sparade för senare användning", och kommer att utföras senare, när de åberopas (påkallas).

Exempel

function myFunction(a, 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>

Semikolon används för att separera körbara JavaScript-satser.
Eftersom en funktion deklaration inte är en körbar sats så är den det inte vanligt att avsluta det med semikolon.


Funktionsuttryck

En JavaScript-funktion kan också definieras med ett uttryck.

Ett funktionsuttryck kan lagras i en variabel:

Exempel

const x = function (a, b) {return a * b};

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>A function can be stored in a variable:</p>
<p id="demo"></p>

<script>
const x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>


Efter att ett funktionsuttryck har lagrats i en variabel kan variabeln användas som en funktion:

Exempel

const x = function (a, b) {return a * b};
let z = x(4, 3);

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>After a function has been stored in a variable,
the variable can be used as a function:</p>

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

<script>
const x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x(4, 3);
</script>

</body>
</html>


Funktionen ovan är faktiskt en anonym funktion (en funktion utan a namn).

Funktioner lagrade i variabler behöver inte funktionsnamn. Det är de alltid anropas (anropas) med variabelnamnet.

Funktionen ovan slutar med semikolon eftersom den är en del av en körbar sats.



Function() Constructor

Som du har sett i de tidigare exemplen är JavaScript-funktioner definierade med nyckelordet function.

Funktioner kan också definieras med en inbyggd JavaScript-funktionskonstruktor som kallas Function().

Exempel

const myFunction = new Function("a", "b", "return a * b");

let x = myFunction(4, 3);

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>JavaScript has an built-in function constructor.</p>
<p id="demo"></p>

<script>
const myFunction = new Function("a", "b", "return a * b");
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>

</body>
</html>

Du behöver faktiskt inte använda funktionskonstruktorn. Exemplet ovan är detsamma som att skriva:

Exempel

const myFunction = function (a, b) {return a * b};

let x = myFunction(4, 3);

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p id="demo"></p>

<script>
const myFunction = function (a, b) {return a * b}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>

</body>
</html>

För det mesta kan du undvika att använda nyckelordet nya i JavaScript.


Funktion Hissning

Tidigare i den här handledningen lärde du dig om "hissning" (JavaScript-hissning).

Hissning är JavaScripts standardbeteende för att flytta deklarationer till toppen av nuvarande omfattning.

Hissning gäller för variabeldeklarationer och för funktionsdeklarationer.

På grund av detta kan JavaScript-funktioner anropas innan de deklareras:

myFunction(5);

function myFunction(y) {
  return y * y;
}

Funktioner som definieras med ett uttryck hissas inte upp.


Självanropande funktioner

Funktionsuttryck kan göras "självanropande".

Ett självanropande uttryck anropas (startas) automatiskt, utan att anropas.

Funktionsuttryck körs automatiskt om uttrycket följs förbi().

Du kan inte själv anropa en funktionsdeklaration.

Du måste lägga till parentes runt funktionen för att indikera att det är ett funktionsuttryck:

Exempel

(function () {
  let x = "Hello!!";  // I will invoke myself
})();

Prova själv →

<!DOCTYPE html>
<html>
<body>

<p>Functions can be invoked automatically without being called:</p>

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

<script>
(function () {
  document.getElementById("demo").innerHTML = "Hello! I called myself";
})();
</script>

</body>
</html>


Funktionen ovan är faktiskt en anonym självanropande funktion (funktion utan namn).


Funktioner kan användas som värden

JavaScript-funktioner kan användas som värden:

Exempel

function myFunction(a, b) {
  return a * b;
}

let x = myFunction(4, 3);

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>Functions can be treated as values:</p>
<p>x = myFunction(4,3) or x = 12</p>
<p>In both cases, x becomes a number with the value of 12.</p>
<p id="demo"></p>

<script>
function myFunction(a, b) {
  return a * b;
}
let x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

JavaScript-funktioner kan användas i uttryck:

Exempel

function myFunction(a, b) {
  return a * b;
}

let x = myFunction(4, 3) * 2;

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>Functions can be used in expressions.</p>
<p id="demo"></p>

<script>
function myFunction(a, b) {
  return a * b;
}
let x = myFunction(4, 3) * 2;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Funktioner är objekt

Operatorn typeof i JavaScript returnerar "funktion" för funktioner.

Men JavaScript-funktioner kan bäst beskrivas som objekt.

JavaScript-funktioner har både egenskaper och metoder.

Egenskapen arguments.length returnerar antalet argument som tas emot när funktionen anropades:

Exempel

function myFunction(a, b) {
  return arguments.length;
}

Prova själv →

<!DOCTYPE html>
<html>
<body>

<p>The arguments.length property returns the number of arguments received by the function:</p>

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

<script>
function myFunction(a, b) {
  return arguments.length;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>

</body>
</html>

Metoden toString() returnerar funktionen som en sträng:

Exempel

function myFunction(a, b) {
  return a * b;
}
let text = myFunction.toString();

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>The toString() Method</h2>

<p>The toString() method returns the function as a string:</p>

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

<script>
function myFunction(a, b) {
  return a * b;
}
document.getElementById("demo").innerHTML = myFunction.toString();
</script>

</body>
</html>

En funktion som definieras som egenskapen för ett objekt kallas en metod för objektet.
En funktion utformad för att skapa nya objekt kallas en objektkonstruktor.


Pilfunktioner

Pilfunktioner tillåter en kort syntax för att skriva funktionsuttryck.

Du behöver inte nyckelordet function, nyckelordet retur och lockiga parenteser.

Exempel

// ES5
var x = function(x, y) {
    
   return x * y;
}

// ES6
const x = (x, y) => x * y;
 

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrow Functions</h2>

<p>With arrow functions, you don't have to type the function keyword, the return keyword, and the curly brackets.</p>

<p>Arrow functions are not supported in IE11 or earlier.</p>

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

<script>
const x = (x, y) =&gt; x * y;
document.getElementById("demo").innerHTML = x(5, 5);
</script>

</body>
</html>

Pilfunktioner har inte sin egen detta. De är inte väl lämpade för att definiera objektmetoder.

Pilfunktionerna är inte upplyfta. De måste definieras innan de används.

Använder const är säkrare än att använda var, eftersom ett funktionsuttryck är alltid konstant värde.

Du kan bara utelämna nyckelordet return och hakparenteserna om funktionen är en enskild sats. På grund av detta kan det vara en god vana att alltid behålla dem:

Exempel

const x = (x, y) => { return x * y };
 

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrow Functions</h2>

<p>Arrow functions are not supported in IE11 or earlier.</p>

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

<script>
const x = (x, y) =&gt; { return x * y };
document.getElementById("demo").innerHTML = x(5, 5);
</script>

</body>
</html>

Pilfunktioner stöds inte i IE11 eller tidigare.