diff --git a/1-js/02-first-steps/16-function-expressions/article.md b/1-js/02-first-steps/16-function-expressions/article.md index bca23ae51..b952d5943 100644 --- a/1-js/02-first-steps/16-function-expressions/article.md +++ b/1-js/02-first-steps/16-function-expressions/article.md @@ -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() { @@ -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) { @@ -186,7 +186,7 @@ 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 @@ -194,7 +194,7 @@ First, the syntax: how to differentiate between them in the code. 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 @@ -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 // | @@ -301,7 +301,7 @@ if (age < 18) { } else { - function welcome() { + function welcome() { alert("Greetings!"); } } @@ -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". diff --git a/1-js/02-first-steps/17-arrow-functions-basics/article.md b/1-js/02-first-steps/17-arrow-functions-basics/article.md index c28b56c56..50c0d475d 100644 --- a/1-js/02-first-steps/17-arrow-functions-basics/article.md +++ b/1-js/02-first-steps/17-arrow-functions-basics/article.md @@ -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!"); @@ -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(); @@ -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: @@ -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. diff --git a/1-js/02-first-steps/18-javascript-specials/article.md b/1-js/02-first-steps/18-javascript-specials/article.md index d0ed0ef08..016214e3b 100644 --- a/1-js/02-first-steps/18-javascript-specials/article.md +++ b/1-js/02-first-steps/18-javascript-specials/article.md @@ -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. @@ -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`. @@ -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: