Merge pull request #2114 from MuhammedZakir/old-var-article

Fix javascript-tutorial#2098 - replace let with var in IIFE example
This commit is contained in:
Ilya Kantor 2020-09-12 15:51:38 +03:00 committed by GitHub
commit 593a9204c8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -28,7 +28,7 @@ On the other hand, it's important to understand differences when migrating old s
## "var" has no block scope ## "var" has no block scope
Variables, declared with `var`, are either function-wide or global. They are visible through blocks. Variables, declared with `var`, are either function-scoped or global-scoped. They are visible through blocks.
For instance: For instance:
@ -60,11 +60,13 @@ The same thing for loops: `var` cannot be block- or loop-local:
```js ```js
for (var i = 0; i < 10; i++) { for (var i = 0; i < 10; i++) {
var one = 1;
// ... // ...
} }
*!* *!*
alert(i); // 10, "i" is visible after loop, it's a global variable alert(i); // 10, "i" is visible after loop, it's a global variable
alert(one); // 1, "one" is visible after loop, it's a global variable
*/!* */!*
``` ```
@ -83,7 +85,7 @@ sayHi();
alert(phrase); // Error: phrase is not defined (Check the Developer Console) alert(phrase); // Error: phrase is not defined (Check the Developer Console)
``` ```
As we can see, `var` pierces through `if`, `for` or other code blocks. That's because a long time ago in JavaScript blocks had no Lexical Environments. And `var` is a remnant of that. As we can see, `var` pierces through `if`, `for` or other code blocks. That's because a long time ago in JavaScript, blocks had no Lexical Environments, and `var` is a remnant of that.
## "var" tolerates redeclarations ## "var" tolerates redeclarations
@ -203,11 +205,11 @@ sayHi();
Because all `var` declarations are processed at the function start, we can reference them at any place. But variables are undefined until the assignments. Because all `var` declarations are processed at the function start, we can reference them at any place. But variables are undefined until the assignments.
In both examples above `alert` runs without an error, because the variable `phrase` exists. But its value is not yet assigned, so it shows `undefined`. In both examples above, `alert` runs without an error, because the variable `phrase` exists. But its value is not yet assigned, so it shows `undefined`.
### IIFE ## IIFE
As in the past there was only `var`, and it has no block-level visibility, programmers invented a way to emulate it. What they did was called "immediately-invoked function expressions" (abbreviated as IIFE). In the past, as there was only `var`, and it has no block-level visibility, programmers invented a way to emulate it. What they did was called "immediately-invoked function expressions" (abbreviated as IIFE).
That's not something we should use nowadays, but you can find them in old scripts. That's not something we should use nowadays, but you can find them in old scripts.
@ -216,22 +218,22 @@ An IIFE looks like this:
```js run ```js run
(function() { (function() {
let message = "Hello"; var message = "Hello";
alert(message); // Hello alert(message); // Hello
})(); })();
``` ```
Here a Function Expression is created and immediately called. So the code executes right away and has its own private variables. Here, a Function Expression is created and immediately called. So the code executes right away and has its own private variables.
The Function Expression is wrapped with parenthesis `(function {...})`, because when JavaScript meets `"function"` in the main code flow, it understands it as the start of a Function Declaration. But a Function Declaration must have a name, so this kind of code will give an error: The Function Expression is wrapped with parenthesis `(function {...})`, because when JavaScript engine encounters `"function"` in the main code, it understands it as the start of a Function Declaration. But a Function Declaration must have a name, so this kind of code will give an error:
```js run ```js run
// Try to declare and immediately call a function // Tries to declare and immediately call a function
function() { // <-- Error: Function statements require a function name function() { // <-- Error: Function statements require a function name
let message = "Hello"; var message = "Hello";
alert(message); // Hello alert(message); // Hello
@ -277,7 +279,7 @@ In all the above cases we declare a Function Expression and run it immediately.
There are two main differences of `var` compared to `let/const`: There are two main differences of `var` compared to `let/const`:
1. `var` variables have no block scope, they are visible minimum at the function level. 1. `var` variables have no block scope; their visibility is scoped to current function, or global, if declared outside function.
2. `var` declarations are processed at function start (script start for globals). 2. `var` declarations are processed at function start (script start for globals).
There's one more very minor difference related to the global object, that we'll cover in the next chapter. There's one more very minor difference related to the global object, that we'll cover in the next chapter.