You may have asked yourself: "How can I recognize
ES6 code quickly"?
The most frequent difference to
JS possibly is the occurrence of
const
constants and let
variables.
JS had var
variables, and no constants. So if you see something like this ...
const yesWeCan = true; // yesWeCan = false; /* causes error! */
... you know that it is an EcmaScript constant definition,
the name of the constant being yesWeCan
.
A constant can be assigned a value just once, directly where it is defined.
You can not change its value afterwards, like you can do it on variables.
let noICant = true; noICant = false;
This was an EcmaScript variable definition, the name of the variable being noICant
.
Assigning another value causes no error.
{ Block Scope }
For Variables and Constants
The difference to JS var
variables is that the ES6 let
variables,
and also const
constants, are block-scoped.
{ const iDontWant = false; let maybeICan = true; { alert(iDontWant); alert(maybeICan); } } alert(iDontWant); /* error, constant not known in this scope! */ alert(maybeICan); /* error, variable not known in this scope! */
This code opens a block (looks like an object declaration, but isn't). Inside the block, a variable and a constant are defined. Then another block opens, and they are used inside. So they are visible indefinitely inside nested blocks. Then both blocks are closed, and neither variable nor constant are visible any more. Both alerts would cause a runtime error.
So the ES6 block is actually the replacement for JS IIFE ("Immediately Invoked Function Expression"):
(function () { var jsVariableNotVisibleOutside = true; })();
Mind that following JS code still would work, because JS variables are "hoisted" to the next enclosing function declaration, or to global scope when none exists:
{ var jsVariableVisibleOutside = true; } alert(jsVariableVisibleOutside); /* not an error! */
What to learn here?
Don't usevar
any more when you write ES6 code, useconst
andlet
.
Preferconst
, this will make your code really resistant (remember that functional languages do not allow variables!).
For Functions
Also functions are block-scoped in ES6.
{ function foobar () { return 1; } if (foobar() !== 1) throw "Outer foobar failed!"; { function foobar() { return 2 } if (foobar() !== 2) throw "Inner foobar failed!"; } if (foobar() !== 1) throw "Outer foobar was overwritten by inner!"; }
This opens a block and defines a function foobar
inside.
It calls that function to asserts its return.
Then it opens another block and again defines a function foobar
there.
This inner function "shadows" the outer one, as we can see on its return assertion.
Then the inner block closes, and the outer foobar
gets visible again.
Mind that the outer foobar
would be available
in the inner block if there wouldn't be another foobar
!
Summary
ES6 comes closer to what is usual in programming languages than JS. Allowing to keep variables in block-scopes makes writing reusable code easier. Providing constants helps to avoid code corruption. The biggest difficulty for our eyes may become the similarity between object declarations and code blocks.
Keine Kommentare:
Kommentar veröffentlichen