[JAVASCRIPT][ECMAScript 6 (ES6) guide].pdf

(437 KB) Pobierz
es6-guide
Table of Contents
1.
Introduction
2.
let + const
3.
arrow functions
4.
default + rest + spread
5.
destructuring
6.
strings
7.
iterators
8.
generators
9.
classes and inheritance
10.
modules
11.
promises
12.
set, map, weak
2
es6-guide
ES6-guide
ECMAScript 6 (ES6) guide
CHECK SUMMARY TO SEE TABLE OF CONTENT
I want to share with you some thoughts, snippets of code and tell you a little about the upcoming ES6. It’s my own road to
know it before it will be a standard.
You might have noticed about ES6 a lot lately. This is because the standard is targeting ratification in June 2015.
See draft - ECMAScript 2015
ECMAScript 2015 is a significant update to the language. Previous (ES5) was standardized in 2009. Frameworks like
AngularJS, Aurelia, ReactJS, Ionic start using it today.
ES6 includes a lot of new features:
arrows
classes
enhanced object literals
template strings
destructuring
default + rest + spread
let + const
iterators + for..of
generators
unicode
modules
module loaders
map + set + weakmap + weakset
proxies
symbols
subclassable built-ins
promises
math + number + string + object APIs
binary and octal literals
reflect api
Introduction
3
es6-guide
tail calls
I will try to describe each of these in the next stories, so stay updated.
Thanks to the use of transpilers (Babel, Traceur and others) we can actually use it right now until browsers fully catch up.
Browser support matrix
ES6 Repl in Chrome Devl Tools - Scratch JS
Future is bright.
People from the community denounced these words. I have only one to add: we can handle it easily!
Introduction
4
es6-guide
let + const
First topic about ECMAScript 2015 is let + const. If you are familiar with JavaScript, you have probably known the term:
scope. If you are not that lucky, don't worry about it. I'll explain that in a few words below.
Why I mentioned something about JavaScript scope? This is because let and const have a very strong connection with
that word. Firstly, imagine and old way (and still valid) to declare a new variable in your JS code using ES5:
// ES5
var a = 1;
if (1 === a) {
var b = 2;
}
for (var c = 0; c < 3; c++) {
// …
}
function letsDeclareAnotherOne() {
var d = 4;
}
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // ReferenceError: d is not defined
// window
console.log(window.a); // 1
console.log(window.b); // 2
console.log(window.c); // 3
console.log(window.d); // undefined
1. We can see that variable a is declared as global. Nothing surprising.
2. Variable b is inside an if block, but in JavaScript it doesn't create a new scope. If you are familiar with other
languages, you can be disappointed, but this is JavaScript and it works as you see.
3. The next statement is a for loop. C variable is declared in this for loop, but also in the global scope.
4. Until variable d is declared in his own scope. It's inside a function and only function creates new scopes.
Variables in JavaScript are hoisted to the top!
Hoisting is JavaScript's default behavior of moving all declarations to the top of the current scope (to the top of the
current script or the current function).
In JavaScript, a variable can be declared after it has been used. In other words - a variable can be used before it has been
declared!
One more rule, more aware: JavaScript only hoists declarations, not initialization.
// scope and variable hoisting
var n = 1;
(function () {
console.log(n);
var n = 2;
let + const
5

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin