JavaScript-funktion määritelmät


Sisällysluettelo

    Näytä sisällysluettelo


JavaScript-funktiot määritetään funktion avainsana.

Voit käyttää funktiota ilmoitus tai a funktion lauseke.


Toimintoilmoitukset

Aiemmin tässä opetusohjelmassa opit, että funktiot ilmoitetaan kanssa seuraava syntaksi:

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

Ilmoitettuja toimintoja ei suoriteta välittömästi. Ne on "tallennettu myöhempää käyttöä varten", ja ne suoritetaan myöhemmin, kun niitä kutsutaan (kutsutaan).

Esimerkki

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

Kokeile itse →

<!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>

Puolipisteitä käytetään suoritettavien JavaScript-lauseiden erottamiseen.
Koska funktio ilmoitus ei ole suoritettava lauseke, se on ei ole yleistä lopettaa se puolipisteeseen.


Funktiolausekkeet

JavaScript-funktio voidaan määrittää myös käyttämällä lauseketta.

Funktiolauseke voidaan tallentaa muuttujaan:

Esimerkki

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

Kokeile itse →

<!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>


Kun funktiolauseke on tallennettu muuttujaan, muuttuja voi käyttää funktiona:

Esimerkki

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

Kokeile itse →

<!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>


Yllä oleva funktio on itse asiassa anonyymi funktio (funktio ilman a nimi).

Muuttujiin tallennetut funktiot eivät tarvitse funktioiden nimiä. Ne ovat aina kutsutaan (kutsutaan) käyttämällä muuttujan nimeä.

Yllä oleva funktio päättyy puolipisteeseen, koska se on osa suoritettavaa käskyä.



Function()-konstruktori

Kuten olet nähnyt edellisissä esimerkeissä, JavaScript-funktiot on määritelty avainsanalla funktio.

Funktiot voidaan määrittää myös sisäänrakennetulla JavaScript-funktiokonstruktorilla nimeltä Funktio().

Esimerkki

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

let x = myFunction(4, 3);

Kokeile itse →

<!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>

Sinun ei itse asiassa tarvitse käyttää funktiokonstruktoria. Yllä oleva esimerkki on sama kuin kirjoittaminen:

Esimerkki

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

let x = myFunction(4, 3);

Kokeile itse →

<!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>

Useimmiten voit välttää new-avainsanan käyttämisen JavaScriptissä.


Toiminto nosto

Aiemmin tässä opetusohjelmassa opit "nostamisesta" (JavaScript Hoisting).

Nosto on JavaScriptin oletustoiminto siirtää ilmoitukset tiedoston yläosaan nykyinen laajuus.

Nosto koskee muuttujamäärityksiä ja funktiomäärittelyjä.

Tämän vuoksi JavaScript-funktioita voidaan kutsua ennen kuin ne on ilmoitettu:

myFunction(5);

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

Lausekkeella määritettyjä toimintoja ei nosteta.


Itsekutsuvat toiminnot

Funktiolausekkeista voidaan tehdä "itse kutsuvia".

Itsekutsuva lauseke kutsutaan (käynnistetään) automaattisesti ilman kutsua.

Funktiolausekkeet suoritetaan automaattisesti, jos lauseketta seurataan kirjoittaja().

Et voi itse kutsua funktion määritystä.

Sinun on lisättävä sulut funktion ympärillä osoittamaan, että se on funktiolauseke:

Esimerkki

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

Kokeile itse →

<!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>


Yllä oleva toiminto on itse asiassa anonyymi itse kutsuva toiminto (funktio ilman nimeä).


Toimintoja voidaan käyttää arvoina

JavaScript-funktioita voidaan käyttää arvoina:

Esimerkki

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

let x = myFunction(4, 3);

Kokeile itse →

<!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-funktioita voidaan käyttää lausekkeissa:

Esimerkki

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

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

Kokeile itse →

<!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>

Funktiot ovat esineitä

JavaScriptin typeof-operaattori palauttaa "funktion" for toimintoja.

Mutta JavaScript-funktiot voidaan parhaiten kuvata objekteina.

JavaScript-funktioilla on sekä ominaisuudet että menetelmät.

Ominaisuus arguments.length palauttaa vastaanotettujen argumenttien määrän, kun funktio kutsuttiin:

Esimerkki

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

Kokeile itse →

<!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>

Metodi toString() palauttaa funktion merkkijonona:

Esimerkki

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

Kokeile itse →

<!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>

Objektin ominaisuudeksi määriteltyä funktiota kutsutaan objektin metodiksi.
Funktiota, joka on suunniteltu luomaan uusia objekteja, kutsutaan objektikonstruktoriksi.


Nuolitoiminnot

Nuolifunktiot mahdollistavat lyhyen syntaksin funktiolausekkeiden kirjoittamiseen.

Et tarvitse avainsanaa funktio, return-avainsanaa ja kiharat hakasulkeet.

Esimerkki

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

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

Kokeile itse →

<!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>

Nuolifunktioilla ei ole omaa tätä. Ne eivät sovellu hyvin objektimenetelmien määrittämiseen.

Nuolitoimintoja ei nosteta. Ne on määritettävä ennen niiden käyttöä.

Käytetään const on turvallisempaa kuin var, koska funktiolauseke on aina vakioarvo.

Voit jättää pois avainsanan return ja hakasulkeet vain, jos funktio on yksi lause. Tästä syystä saattaa olla hyvä tapa pitää ne aina:

Esimerkki

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

Kokeile itse →

<!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>

Nuolitoimintoja ei tueta IE11:ssä tai aiemmissa versioissa.