JavaScript-funktioner er defineret med funktion søgeord.
Du kan bruge en funktion erklæring eller en funktion udtryk.
Tidligere i denne vejledning lærte du, at funktioner erklæres med følgende syntaks:
function functionName(parameters) {
// code to be executed
}Deklarerede funktioner udføres ikke med det samme. De er "gemt til senere brug", og vil blive udført senere, når de påkaldes (kaldes).
function myFunction(a, b) {
return a * b;
}Prøv det selv →
<!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>
Semikoloner bruges til at adskille eksekverbare JavaScript-sætninger.
Da en funktion erklæring ikke er en eksekverbar sætning, er den det ikke almindeligt at afslutte det med semikolon.
En JavaScript-funktion kan også defineres ved hjælp af et udtryk.
Et funktionsudtryk kan gemmes i en variabel:
const x = function (a, b) {return a * b};Prøv det selv →
<!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 et funktionsudtryk er blevet gemt i en variabel, kan variablen bruges som en funktion:
const x = function (a, b) {return a * b};
let z = x(4, 3);Prøv det selv →
<!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 ovenfor er faktisk en anonym funktion (en funktion uden en navn).
Funktioner gemt i variable behøver ikke funktionsnavne. Det er de altid påkaldes (kaldes) ved hjælp af variabelnavnet.
Funktionen ovenfor slutter med semikolon, fordi den er en del af en eksekverbar sætning.
Som du har set i de foregående eksempler, er JavaScript-funktioner defineret med søgeordet funktion.
Funktioner kan også defineres med en indbygget JavaScript-funktionskonstruktør kaldet Function().
const myFunction = new Function("a", "b", "return a * b");
let x = myFunction(4, 3);Prøv det selv →
<!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 faktisk ikke bruge funktionskonstruktøren. Eksemplet ovenfor er det samme som at skrive:
const myFunction = function (a, b) {return a * b};
let x = myFunction(4, 3);Prøv det selv →
<!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>
Det meste af tiden kan du undgå at bruge det nye søgeord i JavaScript.
Tidligere i denne tutorial lærte du om "hejsning" (JavaScript-hejsning).
Hoisting er JavaScripts standardadfærd med at flytte erklæringer til toppen af nuværende omfang.
Hejsning gælder for variable deklarationer og for funktionsdeklarationer.
På grund af dette kan JavaScript-funktioner kaldes, før de erklæres:
myFunction(5);
function myFunction(y) {
return y * y;
}Funktioner defineret ved hjælp af et udtryk løftes ikke.
Funktionsudtryk kan gøres "selvpåkaldende".
Et selvpåkaldende udtryk påkaldes (startes) automatisk uden at blive kaldt.
Funktionsudtryk udføres automatisk, hvis udtrykket følges ved().
Du kan ikke selv påberåbe en funktionserklæring.
Du skal tilføje parentes omkring funktionen for at angive, at det er et funktionsudtryk:
(function () {
let x = "Hello!!"; // I will invoke myself
})();Prøv det selv →
<!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>
Ovenstående funktion er faktisk en anonym selvpåkaldende funktion (funktion uden navn).
JavaScript-funktioner kan bruges som værdier:
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3);Prøv det selv →
<!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 bruges i udtryk:
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3) * 2;Prøv det selv →
<!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>
Operatoren typeof i JavaScript returnerer "funktion" for funktioner.
Men JavaScript-funktioner kan bedst beskrives som objekter.
JavaScript-funktioner har både egenskaber og metoder.
Egenskaben arguments.length returnerer antallet af argumenter, der modtages, når funktionen blev aktiveret:
function myFunction(a, b) {
return arguments.length;
}Prøv det selv →
<!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() returnerer funktionen som en streng:
function myFunction(a, b) {
return a * b;
}
let text = myFunction.toString();Prøv det selv →
<!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 defineret som egenskaben af et objekt, kaldes en metode til objektet.
En funktion designet til at skabe nye objekter kaldes en objektkonstruktør.
Pilefunktioner tillader en kort syntaks til at skrive funktionsudtryk.
Du behøver ikke funktion søgeordet, retur søgeordet og krøllede parenteser.
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => x * y;
Prøv det selv →
<!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) => x * y;
document.getElementById("demo").innerHTML = x(5, 5);
</script>
</body>
</html>
Pilefunktioner har ikke deres eget dette. De er ikke velegnede til at definere objektmetoder.
Pilefunktioner er ikke hejst. De skal defineres før de bruges.
Brug af const er sikrere end at bruge var, fordi et funktionsudtryk er altid konstant værdi.
Du kan kun udelade nøgleordet retur og de krøllede parenteser, hvis funktionen er en enkelt sætning. På grund af dette kan det være en god vane altid at beholde dem:
const x = (x, y) => { return x * y };
Prøv det selv →
<!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) => { return x * y };
document.getElementById("demo").innerHTML = x(5, 5);
</script>
</body>
</html>
Pilefunktioner understøttes ikke i IE11 eller tidligere.