Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
16 changes: 8 additions & 8 deletions 1-js/02-first-steps/16-function-expressions/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ Everything would work the same.


````smart header="Why is there a semicolon at the end?"
You might wonder, why does Function Expression have a semicolon `;` at the end, but Function Declaration does not:
You might wonder, why do Function Expressions have a semicolon `;` at the end, but Function Declarations do not:

```js
function sayHi() {
Expand Down Expand Up @@ -144,13 +144,13 @@ function showCancel() {
ask("Do you agree?", showOk, showCancel);
```

In practice, such functions are quite useful. The major difference between a real-life `ask` and the example above is that real-life functions use more complex ways to interact with the user than a simple `confirm`. In the browser, such function usually draws a nice-looking question window. But that's another story.
In practice, such functions are quite useful. The major difference between a real-life `ask` and the example above is that real-life functions use more complex ways to interact with the user than a simple `confirm`. In the browser, such functions usually draw a nice-looking question window. But that's another story.

**The arguments `showOk` and `showCancel` of `ask` are called *callback functions* or just *callbacks*.**

The idea is that we pass a function and expect it to be "called back" later if necessary. In our case, `showOk` becomes the callback for "yes" answer, and `showCancel` for "no" answer.

We can use Function Expressions to write the same function much shorter:
We can use Function Expressions to write an equivalent, shorter function:

```js run no-beautify
function ask(question, yes, no) {
Expand Down Expand Up @@ -186,15 +186,15 @@ Let's formulate the key differences between Function Declarations and Expression

First, the syntax: how to differentiate between them in the code.

- *Function Declaration:* a function, declared as a separate statement, in the main code flow.
- *Function Declaration:* a function, declared as a separate statement, in the main code flow:

```js
// Function Declaration
function sum(a, b) {
return a + b;
}
```
- *Function Expression:* a function, created inside an expression or inside another syntax construct. Here, the function is created at the right side of the "assignment expression" `=`:
- *Function Expression:* a function, created inside an expression or inside another syntax construct. Here, the function is created on the right side of the "assignment expression" `=`:

```js
// Function Expression
Expand Down Expand Up @@ -291,7 +291,7 @@ if (age < 18) {
welcome(); // \ (runs)
*/!*
// |
function welcome() { // |
function welcome() { // |
alert("Hello!"); // | Function Declaration is available
} // | everywhere in the block where it's declared
// |
Expand All @@ -301,7 +301,7 @@ if (age < 18) {

} else {

function welcome() {
function welcome() {
alert("Greetings!");
}
}
Expand Down Expand Up @@ -360,7 +360,7 @@ welcome(); // ok now


```smart header="When to choose Function Declaration versus Function Expression?"
As a rule of thumb, when we need to declare a function, the first to consider is Function Declaration syntax. It gives more freedom in how to organize our code, because we can call such functions before they are declared.
As a rule of thumb, when we need to declare a function, the first thing to consider is Function Declaration syntax. It gives more freedom in how to organize our code, because we can call such functions before they are declared.

That's also better for readability, as it's easier to look up `function f(…) {…}` in the code than `let f = function(…) {…};`. Function Declarations are more "eye-catching".

Expand Down
12 changes: 6 additions & 6 deletions 1-js/02-first-steps/17-arrow-functions-basics/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ As you can see, `(a, b) => a + b` means a function that accepts two arguments na
alert( double(3) ); // 6
```

- If there are no arguments, parentheses will be empty (but they should be present):
- If there are no arguments, parentheses are empty, but they must be present:

```js run
let sayHi = () => alert("Hello!");
Expand All @@ -64,7 +64,7 @@ For instance, to dynamically create a function:
let age = prompt("What is your age?", 18);

let welcome = (age < 18) ?
() => alert('Hello') :
() => alert('Hello!') :
() => alert("Greetings!");

welcome();
Expand All @@ -76,9 +76,9 @@ They are very convenient for simple one-line actions, when we're just too lazy t

## Multiline arrow functions

The examples above took arguments from the left of `=>` and evaluated the right-side expression with them.
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.

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.
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).

Like this:

Expand All @@ -105,7 +105,7 @@ For now, we can already use arrow functions for one-line actions and callbacks.

## Summary

Arrow functions are handy for one-liners. They come in two flavors:
Arrow functions are handy for simple actions, especially for one-liners. They come in two flavors:

1. Without curly braces: `(...args) => expression` -- the right side is an expression: the function evaluates it and returns the result.
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.
6 changes: 3 additions & 3 deletions 1-js/02-first-steps/18-javascript-specials/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ To fully enable all features of modern JavaScript, we should start scripts with

The directive must be at the top of a script or at the beginning of a function body.

Without `"use strict"`, everything still works, but some features behave in the old-fashion, "compatible" way. We'd generally prefer the modern behavior.
Without `"use strict"`, everything still works, but some features behave in the old-fashioned, "compatible" way. We'd generally prefer the modern behavior.

Some modern features of the language (like classes that we'll study in the future) enable strict mode implicitly.

Expand Down Expand Up @@ -144,7 +144,7 @@ Assignments
: There is a simple assignment: `a = b` and combined ones like `a *= 2`.

Bitwise
: Bitwise operators work with 32-bit integers at the lowest, bit-level: see the [docs](mdn:/JavaScript/Guide/Expressions_and_Operators#Bitwise) when they are needed.
: Bitwise operators work with 32-bit integers at the lowest, bit-level: see the [docs](mdn:/JavaScript/Guide/Expressions_and_Operators#bitwise_operators) when they are needed.

Conditional
: The only operator with three parameters: `cond ? resultA : resultB`. If `cond` is truthy, returns `resultA`, otherwise `resultB`.
Expand Down Expand Up @@ -256,7 +256,7 @@ We covered three ways to create a function in JavaScript:
3. Arrow functions:

```js
// expression at the right side
// expression on the right side
let sum = (a, b) => a + b;

// or multi-line syntax with { ... }, need return here:
Expand Down