Skip to content

Commit a05706c

Browse files
committed
Add nullish coalescing to multiple articles, refactor operators, renumber the chapter
0 parents  commit a05706c

File tree

3 files changed

+145
-0
lines changed

3 files changed

+145
-0
lines changed

1-rewrite-arrow/solution.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
2+
```js run
3+
function ask(question, yes, no) {
4+
if (confirm(question)) yes()
5+
else no();
6+
}
7+
8+
ask(
9+
"Do you agree?",
10+
*!*
11+
() => alert("You agreed."),
12+
() => alert("You canceled the execution.")
13+
*/!*
14+
);
15+
```
16+
17+
Looks short and clean, right?

1-rewrite-arrow/task.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
2+
# Rewrite with arrow functions
3+
4+
Replace Function Expressions with arrow functions in the code below:
5+
6+
```js run
7+
function ask(question, yes, no) {
8+
if (confirm(question)) yes()
9+
else no();
10+
}
11+
12+
ask(
13+
"Do you agree?",
14+
function() { alert("You agreed."); },
15+
function() { alert("You canceled the execution."); }
16+
);
17+
```

article.md

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
# Arrow functions, the basics
2+
3+
There's another very simple and concise syntax for creating functions, that's often better than Function Expressions.
4+
5+
It's called "arrow functions", because it looks like this:
6+
7+
```js
8+
let func = (arg1, arg2, ...argN) => expression
9+
```
10+
11+
...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.
12+
13+
In other words, it's the shorter version of:
14+
15+
```js
16+
let func = function(arg1, arg2, ...argN) {
17+
return expression;
18+
};
19+
```
20+
21+
Let's see a concrete example:
22+
23+
```js run
24+
let sum = (a, b) => a + b;
25+
26+
/* This arrow function is a shorter form of:
27+
28+
let sum = function(a, b) {
29+
return a + b;
30+
};
31+
*/
32+
33+
alert( sum(1, 2) ); // 3
34+
```
35+
36+
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.
37+
38+
- If we have only one argument, then parentheses around parameters can be omitted, making that even shorter.
39+
40+
For example:
41+
42+
```js run
43+
*!*
44+
let double = n => n * 2;
45+
// roughly the same as: let double = function(n) { return n * 2 }
46+
*/!*
47+
48+
alert( double(3) ); // 6
49+
```
50+
51+
- If there are no arguments, parentheses will be empty (but they should be present):
52+
53+
```js run
54+
let sayHi = () => alert("Hello!");
55+
56+
sayHi();
57+
```
58+
59+
Arrow functions can be used in the same way as Function Expressions.
60+
61+
For instance, to dynamically create a function:
62+
63+
```js run
64+
let age = prompt("What is your age?", 18);
65+
66+
let welcome = (age < 18) ?
67+
() => alert('Hello') :
68+
() => alert("Greetings!");
69+
70+
welcome();
71+
```
72+
73+
Arrow functions may appear unfamiliar and not very readable at first, but that quickly changes as the eyes get used to the structure.
74+
75+
They are very convenient for simple one-line actions, when we're just too lazy to write many words.
76+
77+
## Multiline arrow functions
78+
79+
The examples above took arguments from the left of `=>` and evaluated the right-side expression with them.
80+
81+
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.
82+
83+
Like this:
84+
85+
```js run
86+
let sum = (a, b) => { // the curly brace opens a multiline function
87+
let result = a + b;
88+
*!*
89+
return result; // if we use curly braces, then we need an explicit "return"
90+
*/!*
91+
};
92+
93+
alert( sum(1, 2) ); // 3
94+
```
95+
96+
```smart header="More to come"
97+
Here we praised arrow functions for brevity. But that's not all!
98+
99+
Arrow functions have other interesting features.
100+
101+
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>.
102+
103+
For now, we can already use arrow functions for one-line actions and callbacks.
104+
```
105+
106+
## Summary
107+
108+
Arrow functions are handy for one-liners. They come in two flavors:
109+
110+
1. Without curly braces: `(...args) => expression` -- the right side is an expression: the function evaluates it and returns the result.
111+
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.

0 commit comments

Comments
 (0)