Definice funkcí JavaScriptu

Obsah

    Zobrazit obsah

Funkce JavaScriptu jsou definovány pomocí klíčové slovo funkce.

Můžete použít funkci deklarace nebo a funkce výraz.

Prohlášení o funkci

Dříve v tomto tutoriálu jste se dozvěděli, že funkce jsou deklarovány pomocí následující syntaxe:

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

Deklarované funkce se neprovedou okamžitě. Jsou „uloženy pro pozdější použití“, a budou provedeny později, když jsou vyvolány (vyvolány).

Příklad

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

Zkuste to sami →

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

Středníky se používají k oddělení spustitelných příkazů JavaScriptu.
Protože deklarace funkce není spustitelný příkaz, je není obvyklé končit středníkem.

Funkční výrazy

Funkci JavaScriptu lze také definovat pomocí výrazu.

Výraz funkce lze uložit do proměnné:

Příklad

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

Zkuste to sami →

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

Po uložení výrazu funkce do proměnné může proměnná použít jako funkci:

Příklad

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

Zkuste to sami →

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

Výše uvedená funkce je ve skutečnosti anonymní funkce (funkce bez a název).

Funkce uložené v proměnných nepotřebují názvy funkcí. Jsou vždy vyvoláno (voláno) pomocí názvu proměnné.

Výše uvedená funkce končí středníkem, protože je součástí spustitelného příkazu.

Konstruktor Function().

Jak jste viděli v předchozích příkladech, funkce JavaScriptu jsou definovány s klíčovým slovem function.

Funkce lze také definovat pomocí vestavěného konstruktoru funkcí JavaScriptu s názvem Function().

Příklad

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

let x = myFunction(4, 3);

Zkuste to sami →

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

Ve skutečnosti nemusíte používat konstruktor funkcí. Výše uvedený příklad je stejný jako při psaní:

Příklad

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

let x = myFunction(4, 3);

Zkuste to sami →

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

Většinu času se můžete vyhnout použití klíčového slova new v JavaScriptu.

Funkce zdvihání

Dříve v tomto tutoriálu jste se dozvěděli o "zvedání" (JavaScript Hoisting).

Zvednutí je výchozí chování JavaScriptu při přesouvání deklarací na začátek aktuální rozsah.

Zvednutí se týká deklarací proměnných a deklarací funkcí.

Z tohoto důvodu lze funkce JavaScriptu volat dříve, než jsou deklarovány:

myFunction(5);

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

Funkce definované pomocí výrazu nejsou zvednuty.

Samovolné funkce

Funkční výrazy lze provést „samovolně“.

Samovolný výraz je vyvolán (spuštěn) automaticky, aniž by byl volán.

Funkční výrazy se spustí automaticky, pokud je výraz dodržen od().

Nemůžete sami vyvolat deklaraci funkce.

Musíte přidat závorky kolem funkce označující, že se jedná o výraz funkce:

Příklad

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

Zkuste to sami →

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

Výše uvedená funkce je ve skutečnosti anonymní samovolná funkce (funkce beze jména).

Funkce lze použít jako hodnoty

Funkce JavaScriptu lze použít jako hodnoty:

Příklad

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

let x = myFunction(4, 3);

Zkuste to sami →

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

Funkce JavaScriptu lze použít ve výrazech:

Příklad

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

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

Zkuste to sami →

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

Funkce jsou objekty

Operátor typeof v JavaScriptu vrací "funkci" pro funkcí.

Funkce JavaScriptu však lze nejlépe popsat jako objekty.

Funkce JavaScriptu mají jak vlastnosti, tak metody.

Vlastnost arguments.length vrací počet argumentů přijatých při funkce byla vyvolána:

Příklad

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

Zkuste to sami →

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

Metoda toString() vrací funkci jako řetězec:

Příklad

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

Zkuste to sami →

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

Funkce definovaná jako vlastnost objektu se nazývá metoda objektu.
Funkce navržená k vytváření nových objektů se nazývá konstruktor objektů.

Funkce šipek

Šipkové funkce umožňují krátkou syntaxi pro zápis funkčních výrazů.

Nepotřebujete klíčové slovo function, klíčové slovo return a složené závorky.

Příklad

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

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

Zkuste to sami →

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

Funkce šipek nemají vlastní toto. Nejsou příliš vhodné pro definování objektových metod.

Funkce šipek nejsou zvednuté. Musí být definovány před použitím.

Pomocí const je bezpečnější než použití var, protože výraz funkce ano vždy konstantní hodnotu.

Klíčové slovo return a složené závorky můžete vynechat pouze v případě, že se jedná o jeden příkaz. Z tohoto důvodu může být dobrým zvykem je vždy uchovávat:

Příklad

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

Zkuste to sami →

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

Funkce šipek nejsou podporovány v IE11 nebo dřívějších verzích.