Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
49405e7
german translation
me1104 Mar 31, 2020
37f98a2
small change
me1104 Mar 31, 2020
5bca2ca
translation fix
me1104 Mar 31, 2020
697544a
fixes
me1104 Apr 5, 2020
9fbbed9
Update 1-js/02-first-steps/16-arrow-functions-basics/article.md
me1104 Apr 5, 2020
6e1615d
Update 1-js/02-first-steps/16-arrow-functions-basics/article.md
me1104 Apr 5, 2020
a1aeb76
Update 1-js/02-first-steps/16-arrow-functions-basics/article.md
me1104 Apr 5, 2020
e7267ce
Update 1-js/02-first-steps/16-arrow-functions-basics/article.md
me1104 Apr 5, 2020
206d656
Update 1-js/02-first-steps/16-arrow-functions-basics/article.md
me1104 Apr 5, 2020
3ca06b9
Merge branch 'master' of https://github.com/me1104/de.javascript.info
me1104 Apr 5, 2020
f396af1
Update 1-js/02-first-steps/16-arrow-functions-basics/article.md
christianhegedues Apr 22, 2020
af725b0
Update 1-js/02-first-steps/16-arrow-functions-basics/article.md
christianhegedues Apr 22, 2020
fb7a139
Update 1-js/02-first-steps/16-arrow-functions-basics/article.md
christianhegedues Apr 22, 2020
59e7b20
Update 1-js/02-first-steps/16-arrow-functions-basics/article.md
christianhegedues Apr 22, 2020
c795b00
Update 1-js/02-first-steps/16-arrow-functions-basics/article.md
christianhegedues Apr 22, 2020
c4227ee
Update 1-js/02-first-steps/16-arrow-functions-basics/article.md
christianhegedues Apr 22, 2020
821267e
Update 1-js/02-first-steps/16-arrow-functions-basics/article.md
christianhegedues Apr 22, 2020
4524145
Update 1-js/02-first-steps/16-arrow-functions-basics/article.md
christianhegedues Apr 22, 2020
a3973b6
Update 1-js/02-first-steps/16-arrow-functions-basics/1-rewrite-arrow/…
christianhegedues Apr 22, 2020
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@ function ask(question, yes, no) {
}

ask(
"Do you agree?",
"Stimmst Du zu ?",
*!*
() => alert("You agreed."),
() => alert("You canceled the execution.")
() => alert("Du hast zugestimmt."),
() => alert("Du hast den Vorgang abgebrochen.")
*/!*
);
```

Looks short and clean, right?
Sieht kurz und sauber aus, oder ?
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@

# Rewrite with arrow functions
# Umschreiben mit Pfeilfunktionen

Replace Function Expressions with arrow functions in the code below:
Ersetze im folgenden Code Funktionen innerhalb eines Ausdrucks durch Pfeilfunktionen:

```js run
function ask(question, yes, no) {
Expand All @@ -10,8 +10,8 @@ function ask(question, yes, no) {
}

ask(
"Do you agree?",
function() { alert("You agreed."); },
function() { alert("You canceled the execution."); }
"Stimmst Du zu?",
function() { alert("Du hast zugestimmt."); },
function() { alert("Du hast den Vorgang abgebrochen."); }
);
```
70 changes: 35 additions & 35 deletions 1-js/02-first-steps/16-arrow-functions-basics/article.md
Original file line number Diff line number Diff line change
@@ -1,29 +1,29 @@
# Arrow functions, the basics
# Pfeilfunktionen, die Grundlagen

There's another very simple and concise syntax for creating functions, that's often better than Function Expressions.
Es gibt eine weitere sehr einfache und prägnante Syntax für die Erstellung von Funktionen, die oft besser ist als der Funktionsausdruck.

It's called "arrow functions", because it looks like this:
Sie werden Pfeilfunktionen genannt, weil sie so aussehen:

```js
let func = (arg1, arg2, ...argN) => expression
```

...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.
...Dies erzeugt eine Funktion `func`, welche die Argumente `arg1..argN` akzeptiert, dann den Ausdruck `expression` auf der rechten Seite auswertet und ihr Ergebnis zurückgibt.

In other words, it's the shorter version of:
In anderen Worten, es ist die verkürzte Version von:

```js
let func = function(arg1, arg2, ...argN) {
return expression;
};
```

Let's see a concrete example:
Sehen wir uns ein konkretes Beispiel an:

```js run
let sum = (a, b) => a + b;

/* This arrow function is a shorter form of:
/* Diese Pfeilfunktion ist eine kürzere Form von:

let sum = function(a, b) {
return a + b;
Expand All @@ -33,79 +33,79 @@ let sum = function(a, b) {
alert( sum(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.
Wie man sehen kann, hat `(a, b) => a + b` die Bedeutung einer Funktion, die zwei Argumente `a` and `b` akzeptiert. Bei der Ausführung wird der Wert `a + b` ausgewertet und das Ergebnis zurückgegegeben.

- If we have only one argument, then parentheses around parameters can be omitted, making that even shorter.
- Wenn nur ein Argument vorhanden ist, können die Klammern um den Parameter wegelassen werden, was den Ausdruck noch weiter verkürzt.

For example:
Zum Beispiel:

```js run
*!*
let double = n => n * 2;
// roughly the same as: let double = function(n) { return n * 2 }
// ungefähr dasselbe wie: let double = function(n) { return n * 2 }
*/!*

alert( double(3) ); // 6
```

- If there are no arguments, parentheses will be empty (but they should be present):
- Wenn es keine Argument gibt, sind die Klammern leer (aber sie sollte vorhanden sein):

```js run
let sayHi = () => alert("Hello!");
let sayHi = () => alert("Hallo!");

sayHi();
```

Arrow functions can be used in the same way as Function Expressions.
Pfeilfunktionen können auf die gleiche Weise wie Funktionsausdrücke verwendet werden.

For instance, to dynamically create a function:
Zum Beispiel, um eine Funktion dynamisch zu erstellen:

```js run
let age = prompt("What is your age?", 18);
let age = prompt("Wie alt bist Du?", 18);

let welcome = (age < 18) ?
() => alert('Hello') :
() => alert("Greetings!");
() => alert('Hallo') :
() => alert("Grüße!");

welcome(); // ok now
```

Arrow functions may appear unfamiliar and not very readable at first, but that quickly changes as the eyes get used to the structure.
Pfeilfunktion mögen auf den ersten Blick ungewohnt und nicht sehr lesbar erscheinen, aber das ändert sich schnell, wenn sich die Augen an die Struktur gewöhnen.

They are very convenient for simple one-line actions, when we're just too lazy to write many words.
Sie sind sehr praktisch für einfache einzeilige Aktionen, wenn wir einfach zu faul sind, viele Worte zu schreiben.

## Multiline arrow functions
## Mehrzeilige Pfeilfunktionen

The examples above took arguments from the left of `=>` and evaluated the right-side expression with them.
Die Beispiele oben nahmen Argumente von der linken Seite `=>` und bewerteten damit den Ausdruck auf der rechten Seite.

Sometimes we need something a little bit more complex, like multiple expressions or statements. It is also possible, but we should enclose them in curly braces. Then use a normal `return` within them.
Manchmal brauchen wir etwas Komplexeres, wie mehrfache Ausdrücke oder Anweisungen. Das ist auch möglich, aber wir sollten sie in geschweifte Klammern einschließen. Dann verwende ein normales `return` innerhalb dieser Klammern.

Like this:
Etwa so:

```js run
let sum = (a, b) => { // the curly brace opens a multiline function
let sum = (a, b) => { // die geschweifte Klammer öffnet eine mehrzeilige Funktion
let result = a + b;
*!*
return result; // if we use curly braces, then we need an explicit "return"
return result; // wenn wir geschweifte Klammern verwenden, dann brauchen wir ein explizites "return"
*/!*
};

alert( sum(1, 2) ); // 3
```

```smart header="More to come"
Here we praised arrow functions for brevity. But that's not all!
```smart header="Noch mehr später"
Wir haben Pfeilfunktionen für ihre Kürze gelobt. Aber das ist nicht alles!

Arrow functions have other interesting features.
Pfeilfunktionen haben weitere interessante Eigenschaften.

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>.
Um diese zu verstehen, müssen wir erst einige weitere Aspekte von JavaScript kennenlernen. Wir werden im Kapitel <info:arrow-functions> zu Pfeilfunktion zurückkehren.

For now, we can already use arrow functions for one-line actions and callbacks.
Für den Moment können wir Pfeilfunktionen für einzeilige Aktionen und Callback-Funktionen verwenden.
```

## Summary
## Zusammenfassung

Arrow functions are handy for one-liners. They come in two flavors:
Pfeilfunktionen sind praktische Einzeiler. Es gibt sie in zwei Varianten:

1. Without curly braces: `(...args) => expression` -- the right side is an expression: the function evaluates it and returns the result.
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. Ohne geschweifte Klammern: `(...args) => expression` -- die rechte Seite ist ein Ausdruck: die Funktion wertet diesen aus und gibt das Ergebnis zurück.
2. Mit geschweiften Klammern: `(...args) => { body }` -- Klammern erlauben es mehrere Anweisungen zu schreiben, aber es braucht ein explizites `return` um etwas zurückzugeben.