Merge branch 'master' of https://github.com/javascript-tutorial/en.javascript.info

Author: Orkhan Huseynli

1-js/01-getting-started/1-intro/article.md

@@ -38,7 +38,7 @@ Engines are complicated. But the basics are easy.
 2. Then it converts ("compiles") the script to the machine language.
 3. And then the machine code runs, pretty fast.
 
-The engine applies optimizations at each step of the process. It even watches the compiled script as it runs, analyzes the data that flows through it, and applies optimizations to the machine code based on that knowledge. When it's done, scripts run quite fast.
+The engine applies optimizations at each step of the process. It even watches the compiled script as it runs, analyzes the data that flows through it, and further optimizes the machine code based on that knowledge.
 ```
 
 ## What can in-browser JavaScript do?

1-js/02-first-steps/12-while-for/article.md

@@ -212,7 +212,7 @@ But we can force the exit at any time using the special `break` directive.
 
 For example, the loop below asks the user for a series of numbers, "breaking" when no number is entered:
 
-```js
+```js run
 let sum = 0;
 
 while (true) {

…5-function-expressions-arrows/article.md …steps/15-function-expressions/article.md1-js/02-first-steps/15-function-expressions-arrows/article.md renamed to 1-js/02-first-steps/15-function-expressions/article.md 1-js/02-first-steps/15-function-expressions-arrows/article.md renamed to 1-js/02-first-steps/15-function-expressions/article.md

@@ -1,4 +1,4 @@
-# Function expressions and arrows
+# Function expressions
 
 In JavaScript, a function is not a "magical language structure", but a special kind of value.
 
@@ -350,112 +350,11 @@ 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.
 
-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".
+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".
 
 ...But if a Function Declaration does not suit us for some reason, or we need a conditional declaration (we've just seen an example), then Function Expression should be used.
 ```
 
-
-## Arrow functions [#arrow-functions]
-
-There's one more very simple and concise syntax for creating functions, that's often better than Function Expressions. It's called "arrow functions", because it looks like this:
-
-
-```js
-let func = (arg1, arg2, ...argN) => expression
-```
-
-...This creates a function `func` that has arguments `arg1..argN`, evaluates the `expression` on the right side with their use and returns its result.
-
-In other words, it's roughly the same as:
-
-```js
-let func = function(arg1, arg2, ...argN) {
-  return expression;
-};
-```
-
-...But much more concise.
-
-Let's see an example:
-
-```js run
-let sum = (a, b) => a + b;
-
-/* The arrow function is a shorter form of:
-
-let sum = function(a, b) {
-  return a + b;
-};
-*/
-
-alert( sum(1, 2) ); // 3
-
-```
-
-If we have only one argument, then parentheses around parameters can be omitted, making that even shorter:
-
-```js run
-// same as
-// let double = function(n) { return n * 2 }
-*!*
-let double = n => n * 2;
-*/!*
-
-alert( double(3) ); // 6
-```
-
-If there are no arguments, parentheses should be empty (but they should be present):
-
-```js run
-let sayHi = () => alert("Hello!");
-
-sayHi();
-```
-
-Arrow functions can be used in the same way as Function Expressions.
-
-For instance, here's the rewritten example with `welcome()`:
-
-```js run
-let age = prompt("What is your age?", 18);
-
-let welcome = (age < 18) ?
-  () => alert('Hello') :
-  () => alert("Greetings!");
-
-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.
-
-They are very convenient for simple one-line actions, when we're just too lazy to write many words.
-
-```smart header="Multiline arrow functions"
-
-The examples above took arguments from the left of `=>` and evaluated 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.
-
-Like this:
-
-```js run
-let sum = (a, b) => {  // the curly brace opens a multiline function
-  let result = a + b;
-*!*
-  return result; // if we use curly braces, use return to get results
-*/!*
-};
-
-alert( sum(1, 2) ); // 3
-```
-
-```smart header="More to come"
-Here we praised arrow functions for brevity. But that's not all! Arrow functions have other interesting features. We'll return to them later in the chapter <info:arrow-functions>.
-
-For now, we can already use arrow functions for one-line actions and callbacks.
-```
-
 ## Summary
 
 - Functions are values. They can be assigned, copied or declared in any place of the code.
@@ -467,8 +366,3 @@ For now, we can already use arrow functions for one-line actions and callbacks.
 In most cases when we need to declare a function, a Function Declaration is preferable, because it is visible prior to the declaration itself. That gives us more flexibility in code organization, and is usually more readable.
 
 So we should use a Function Expression only when a Function Declaration is not fit for the task. We've seen a couple of examples of that in this chapter, and will see more in the future.
-
-Arrow functions are handy 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.
-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.

…sions-arrows/1-rewrite-arrow/solution.md …tions-basics/1-rewrite-arrow/solution.md1-js/02-first-steps/15-function-expressions-arrows/1-rewrite-arrow/solution.md renamed to 1-js/02-first-steps/16-arrow-functions-basics/1-rewrite-arrow/solution.md 1-js/02-first-steps/15-function-expressions-arrows/1-rewrite-arrow/solution.md renamed to 1-js/02-first-steps/16-arrow-functions-basics/1-rewrite-arrow/solution.md

@@ -1,7 +1,7 @@
 
 # Rewrite with arrow functions
 
-Replace Function Expressions with arrow functions in the code:
+Replace Function Expressions with arrow functions in the code below:
 
 ```js run
 function ask(question, yes, no) {

…pressions-arrows/1-rewrite-arrow/task.md …functions-basics/1-rewrite-arrow/task.md1-js/02-first-steps/15-function-expressions-arrows/1-rewrite-arrow/task.md renamed to 1-js/02-first-steps/16-arrow-functions-basics/1-rewrite-arrow/task.md 1-js/02-first-steps/15-function-expressions-arrows/1-rewrite-arrow/task.md renamed to 1-js/02-first-steps/16-arrow-functions-basics/1-rewrite-arrow/task.md

@@ -0,0 +1,111 @@
+# Arrow functions, the basics
+
+There's another very simple and concise syntax for creating functions, that's often better than Function Expressions.
+
+It's called "arrow functions", because it looks like this:
+
+```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.
+
+In other words, it's the shorter version of:
+
+```js
+let func = function(arg1, arg2, ...argN) {
+  return expression;
+};
+```
+
+Let's see a concrete example:
+
+```js run
+let sum = (a, b) => a + b;
+
+/* This arrow function is a shorter form of:
+
+let sum = function(a, b) {
+  return 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.
+
+- If we have only one argument, then parentheses around parameters can be omitted, making that even shorter.
+
+    For example:
+
+    ```js run
+    *!*
+    let double = n => n * 2;
+    // roughly the same as: 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):
+
+    ```js run
+    let sayHi = () => alert("Hello!");
+
+    sayHi();
+    ```
+
+Arrow functions can be used in the same way as Function Expressions.
+
+For instance, to dynamically create a function:
+
+```js run
+let age = prompt("What is your age?", 18);
+
+let welcome = (age < 18) ?
+  () => alert('Hello') :
+  () => alert("Greetings!");
+
+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.
+
+They are very convenient for simple one-line actions, when we're just too lazy to write many words.
+
+## Multiline arrow functions
+
+The examples above took arguments from the left of `=>` and evaluated 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.
+
+Like this:
+
+```js run
+let sum = (a, b) => {  // the curly brace opens a multiline function
+  let result = a + b;
+*!*
+  return result; // if we use curly braces, then we need an explicit "return" 
+*/!*
+};
+
+alert( sum(1, 2) ); // 3
+```
+
+```smart header="More to come"
+Here we praised arrow functions for brevity. But that's not all!
+
+Arrow functions have other interesting features.
+
+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>.
+
+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:
+
+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-js/02-first-steps/16-arrow-functions-basics/article.md

@@ -272,7 +272,7 @@ We covered three ways to create a function in JavaScript:
 - Parameters can have default values: `function sum(a = 1, b = 2) {...}`.
 - Functions always return something. If there's no `return` statement, then the result is `undefined`.
 
-Details: see <info:function-basics>, <info:function-expressions-arrows>.
+Details: see <info:function-basics>, <info:arrow-functions-basics>.
 
 ## More to come
 

…-steps/16-javascript-specials/article.md …-steps/17-javascript-specials/article.md1-js/02-first-steps/16-javascript-specials/article.md renamed to 1-js/02-first-steps/17-javascript-specials/article.md 1-js/02-first-steps/16-javascript-specials/article.md renamed to 1-js/02-first-steps/17-javascript-specials/article.md

@@ -137,7 +137,7 @@ There are buttons for it at the top of the right panel. Let's engage them.
 <span class="devtools" style="background-position:-62px -192px"></span> -- "Step over": run the next command, but *don't go into a function*, hotkey `key:F10`.
 : Similar to the previous the "Step" command, but behaves differently if the next statement is a function call. That is: not a built-in, like `alert`, but a function of our own.
 
-    The "Step" command goes into it and and pauses the execution at its first line, while "Step over" executes the nested function call invisibly, skipping the function internals.
+    The "Step" command goes into it and pauses the execution at its first line, while "Step over" executes the nested function call invisibly, skipping the function internals.
 
     The execution is then paused immediately after that function.
 

1-js/03-code-quality/01-debugging-chrome/article.md

@@ -19,7 +19,7 @@ Here Babel comes to the rescue.
 
 Actually, there are two parts in Babel:
 
-1. First, the transpiler program, which rewrites the code. The developer runs it on their own computer. It rewrites the code into the older standard. And then the code is delivered to the website for users. Modern project build systems like [webpack](http://webpack.github.io/) provide means to run transpiler automatically on every code change, so that very easy to integrate into development process.
+1. First, the transpiler program, which rewrites the code. The developer runs it on their own computer. It rewrites the code into the older standard. And then the code is delivered to the website for users. Modern project build systems like [webpack](http://webpack.github.io/) provide means to run transpiler automatically on every code change, so that it's very easy to integrate into development process.
 
 2. Second, the polyfill.