-
-
Notifications
You must be signed in to change notification settings - Fork 3
Arrow functions, the basics #83
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit
Hold shift + click to select a range
3685325
1.2.17
otmon76 d715ca5
Update article.md
otmon76 fabde09
Update 1-js/02-first-steps/17-arrow-functions-basics/article.md
otmon76 f55e75b
Update 1-js/02-first-steps/17-arrow-functions-basics/article.md
otmon76 039be9a
Update 1-js/02-first-steps/17-arrow-functions-basics/article.md
otmon76 db6d3c5
Update 1-js/02-first-steps/17-arrow-functions-basics/article.md
otmon76 fe68184
Update 1-js/02-first-steps/17-arrow-functions-basics/article.md
otmon76 ce535ff
Update 1-js/02-first-steps/17-arrow-functions-basics/article.md
otmon76 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
16 changes: 8 additions & 8 deletions
16
1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/solution.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,17 +1,17 @@ | ||
|
||
```js run | ||
function ask(question, yes, no) { | ||
if (confirm(question)) yes(); | ||
else no(); | ||
function zeptejSe(otázka, ano, ne) { | ||
if (confirm(otázka)) ano(); | ||
else ne(); | ||
} | ||
|
||
ask( | ||
"Do you agree?", | ||
zeptejSe( | ||
"Souhlasíte?", | ||
*!* | ||
() => alert("You agreed."), | ||
() => alert("You canceled the execution.") | ||
() => alert("Souhlasil jste."), | ||
() => alert("Zrušil jste provádění.") | ||
*/!* | ||
); | ||
``` | ||
|
||
Looks short and clean, right? | ||
Vypadá to stručně a čistě, že? |
18 changes: 9 additions & 9 deletions
18
1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/task.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,17 +1,17 @@ | ||
|
||
# Rewrite with arrow functions | ||
# Přepište na šipkové funkce | ||
|
||
Replace Function Expressions with arrow functions in the code below: | ||
Přepište funkční výrazy v následujícím kódu na šipkové funkce: | ||
|
||
```js run | ||
function ask(question, yes, no) { | ||
if (confirm(question)) yes(); | ||
else no(); | ||
function zeptejSe(otázka, ano, ne) { | ||
if (confirm(otázka)) ano(); | ||
else ne(); | ||
} | ||
|
||
ask( | ||
"Do you agree?", | ||
function() { alert("You agreed."); }, | ||
function() { alert("You canceled the execution."); } | ||
zeptejSe( | ||
"Souhlasíte?", | ||
function() { alert("Souhlasil jste."); }, | ||
function() { alert("Zrušil jste provádění."); } | ||
); | ||
``` |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,111 +1,111 @@ | ||
# Arrow functions, the basics | ||
# Šipkové funkce – základy | ||
|
||
There's another very simple and concise syntax for creating functions, that's often better than Function Expressions. | ||
Existuje ještě jedna velice jednoduchá a výstižná syntaxe vytváření funkcí, která často bývá lepší než funkční výrazy. | ||
|
||
It's called "arrow functions", because it looks like this: | ||
Nazývá se „šipková funkce“, jelikož vypadá takto: | ||
|
||
```js | ||
let func = (arg1, arg2, ..., argN) => expression; | ||
let funkce = (arg1, arg2, ..., argN) => výraz; | ||
``` | ||
|
||
This creates a function `func` that accepts arguments `arg1..argN`, then evaluates the `expression` on the right side with their use and returns its result. | ||
Tím se vytvoří funkce `funkce`, která přijímá argumenty `arg1..argN`, pak s jejich použitím vyhodnotí `výraz` na pravé straně a vrátí jeho výsledek. | ||
|
||
In other words, it's the shorter version of: | ||
Jinými slovy, je to kratší verze tohoto: | ||
|
||
```js | ||
let func = function(arg1, arg2, ..., argN) { | ||
return expression; | ||
let funkce = function(arg1, arg2, ..., argN) { | ||
return výraz; | ||
}; | ||
``` | ||
|
||
Let's see a concrete example: | ||
Podívejme se na konkrétní příklad: | ||
|
||
```js run | ||
let sum = (a, b) => a + b; | ||
let součet = (a, b) => a + b; | ||
|
||
/* This arrow function is a shorter form of: | ||
/* Tato šipková funkce je zkrácenou formou této funkce: | ||
|
||
let sum = function(a, b) { | ||
let součet = function(a, b) { | ||
return a + b; | ||
}; | ||
*/ | ||
|
||
alert( sum(1, 2) ); // 3 | ||
alert( součet(1, 2) ); // 3 | ||
``` | ||
|
||
As you can see, `(a, b) => a + b` means a function that accepts two arguments named `a` and `b`. Upon the execution, it evaluates the expression `a + b` and returns the result. | ||
Jak vidíte, `(a, b) => a + b` znamená funkci, která přijímá dva argumenty pojmenované `a` a `b`. Když je vykonána, vyhodnotí výraz `a + b` a vrátí jeho výsledek. | ||
otmon76 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
- If we have only one argument, then parentheses around parameters can be omitted, making that even shorter. | ||
- Máme-li pouze jeden argument, můžeme závorky kolem něj vynechat, čímž se zápis ještě zkrátí. | ||
otmon76 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
For example: | ||
Příklad: | ||
|
||
```js run | ||
*!* | ||
let double = n => n * 2; | ||
// roughly the same as: let double = function(n) { return n * 2 } | ||
let dvojnásobek = n => n * 2; | ||
// zhruba totéž jako: let dvojnásobek = function(n) { return n * 2 } | ||
*/!* | ||
|
||
alert( double(3) ); // 6 | ||
alert( dvojnásobek(3) ); // 6 | ||
``` | ||
|
||
- If there are no arguments, parentheses are empty, but they must be present: | ||
- Nejsou-li žádné argumenty, závorky budou prázdné, ale musejí být uvedeny: | ||
otmon76 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
```js run | ||
let sayHi = () => alert("Hello!"); | ||
let řekniAhoj = () => alert("Ahoj!"); | ||
|
||
sayHi(); | ||
řekniAhoj(); | ||
``` | ||
|
||
Arrow functions can be used in the same way as Function Expressions. | ||
Šipkové funkce můžeme používat stejným způsobem jako funkční výrazy. | ||
|
||
For instance, to dynamically create a function: | ||
Například k dynamickému vytvoření funkce: | ||
|
||
```js run | ||
let age = prompt("What is your age?", 18); | ||
let věk = prompt("Kolik je vám let?", 18); | ||
|
||
let welcome = (age < 18) ? | ||
() => alert('Hello!') : | ||
() => alert("Greetings!"); | ||
let uvítání = (věk < 18) ? | ||
() => alert('Ahoj!') : | ||
() => alert("Zdravíme vás!"); | ||
otmon76 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
welcome(); | ||
uvítání(); | ||
``` | ||
|
||
Arrow functions may appear unfamiliar and not very readable at first, but that quickly changes as the eyes get used to the structure. | ||
Šipkové funkce mohou na první pohled vypadat podivně a nepříliš čitelně, ale to se rychle změní, jakmile si oči na tuto strukturu zvyknou. | ||
|
||
They are very convenient for simple one-line actions, when we're just too lazy to write many words. | ||
Jsou velmi vhodné pro jednoduché jednořádkové akce, kdy se nám prostě nechce psát příliš mnoho slov. | ||
|
||
## Multiline arrow functions | ||
## Víceřádkové šipkové funkce | ||
|
||
The arrow functions that we've seen so far were very simple. They took arguments from the left of `=>`, evaluated and returned the right-side expression with them. | ||
Šipkové funkce, které jsme doposud viděli, byly velmi jednoduché. Přebíraly argumenty z levé strany `=>`, vyhodnotily s nimi výraz na pravé straně a vrátily jeho hodnotu. | ||
|
||
Sometimes we need a more complex function, with multiple expressions and statements. In that case, we can enclose them in curly braces. The major difference is that curly braces require a `return` within them to return a value (just like a regular function does). | ||
Někdy potřebujeme složitější funkci s více výrazy a příkazy. V takovém případě je můžeme uzavřít do složených závorek. Hlavní rozdíl je v tom, že složené závorky vyžadují uvnitř `return`, aby mohly vrátit hodnotu (stejně jako běžná funkce). | ||
|
||
Like this: | ||
Například takto: | ||
|
||
```js run | ||
let sum = (a, b) => { // the curly brace opens a multiline function | ||
let result = a + b; | ||
let součet = (a, b) => { // složená závorka uvozuje víceřádkovou funkci | ||
let výsledek = a + b; | ||
*!* | ||
return result; // if we use curly braces, then we need an explicit "return" | ||
return výsledek; // když používáme složené závorky, musíme výslovně uvést „return“ | ||
*/!* | ||
}; | ||
|
||
alert( sum(1, 2) ); // 3 | ||
alert( součet(1, 2) ); // 3 | ||
``` | ||
|
||
```smart header="More to come" | ||
Here we praised arrow functions for brevity. But that's not all! | ||
```smart header="Bude toho víc" | ||
Zde jsme chválili šipkové funkce pro jejich stručnost, ale to ještě není všechno! | ||
|
||
Arrow functions have other interesting features. | ||
Šipkové funkce mají i jiné zajímavé vlastnosti. | ||
|
||
To study them in-depth, we first need to get to know some other aspects of JavaScript, so we'll return to arrow functions later in the chapter <info:arrow-functions>. | ||
Abychom je mohli prostudovat do hloubky, musíme napřed poznat některé další prvky JavaScriptu. K šipkovým funkcím se tedy vrátíme později v kapitole <info:arrow-functions>. | ||
|
||
For now, we can already use arrow functions for one-line actions and callbacks. | ||
Prozatím už můžeme používat šipkové funkce pro jednořádkové akce a callbacky. | ||
``` | ||
|
||
## Summary | ||
## Shrnutí | ||
|
||
Arrow functions are handy for simple actions, especially for one-liners. They come in two flavors: | ||
Šipkové funkce se hodí pro jednoduché akce, zvláště pro jednořádkové funkce. Dají se napsat dvěma způsoby: | ||
|
||
1. Without curly braces: `(...args) => expression` -- the right side is an expression: the function evaluates it and returns the result. Parentheses can be omitted, if there's only a single argument, e.g. `n => n*2`. | ||
2. With curly braces: `(...args) => { body }` -- brackets allow us to write multiple statements inside the function, but we need an explicit `return` to return something. | ||
1. Bez složených závorek: `(...args) => výraz` -- na pravé straně je výraz: funkce jej vyhodnotí a vrátí jeho výsledek. Závorky můžeme vynechat, má-li funkce pouze jeden argument, např. `n => n*2`. | ||
otmon76 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
2. Se složenými závorkami: `(...args) => { tělo }` -- složené závorky nám umožňují uvést ve funkci více příkazů, ale aby funkce něco vrátila, musíme výslovně uvést `return`. |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.