Intro to ES6
Brief History of JS
Some JS Facts
- Created in ten days by Brendan Eich
- September of 1995
- Netscape
- Mocha, Livescript
-
Submitted to ECMA in 1996
What the heck is Ecma?
European Computer Manufactures Association- Ecma International
- International, private non-profit standards organization for information and communication systems
So What do they do?
- Over 400 standards
- 9 different floppy disk standards!
- C# programming language
- Dart programming language
- JSON data interchange format
- ECMAscript!
TC39
(Technical Committee 39)
- Brendan Eich
- David Herman
- Alex Russell
- Yehuda Katz
- Doug Crockford
- Rick Waldron
- Erik Arvidsson
- Allen Wirfs-Brock
EcmaScript
- ECMAScript is the name of the official standard
- JavaScript is the most well known implementation of the spec
Still don't get it
Implementaion
- V8
- SpiderMonkey
- Rhino
- Chakra
Edition
Publish Date
Editors
1
2
3
4
5
5.1
6
7
June 1997
June 1998
December 1999
Abandoned
December 2009
June 2011
June 2015
TBD
Pratap Lakshman, Allen Wirfs-Brock
Pratap Lakshman, Allen Wirfs-Brock
Allen Wirfs-Brock
Releases
What Am I using?
- IE 6,7,8 => ES3 (Enterprise constraints)
- Most people are using ES5
- Some of the cool kids are using ES6 now!
I want to be a cool kid!
Transpiler/Compiler
-
6to5Babel - https://babeljs.io/ - traceur - https://github.com/google/traceur-compiler
Polyfills
- Feature by feature basis
- Fallbacks
- es6-promise - github.com/jakearchibald/es6-promise
- es6-module-loader github.com/ModuleLoader/es6-module-loader
ES6 Features!
Finally
Default Function Params
Default Function Params
- Declare default values for optional parameters
function multiply(a, b) {
b = typeof b !== 'undefined' ? b : 1;
return a * b;
}
function multiply(a, b = 1) {
return a * b;
}
Arrow Functions
Arrow Functions
var reflect = function(value) {
return value;
};
// same as
var reflect = value => value;
Benefits:
- Shorter functions
Arrow Functions
var a = [
"Hydrogen",
"Helium",
"Lithium",
"Beryllium"
];
var a2 = a.map(function(s){ return s.length });
var a3 = a.map( s => s.length );
Benefits:
- Shorter functions
Arrow Functions
function Person() {
var self = this; // Some choose `that` instead of `self`.
self.age = 0;
setInterval(function growUp() {
self.age++;
}, 1000);
}
Benefits:
- Lexical This
function Person(){
this.age = 0;
setInterval(() => {
this.age++;
}, 1000);
}
var p = new Person();
Template Strings
Template Strings
Benefits:
- multiline strings
"This string is so long that
it wouldn't fit on one line"
// SyntaxError
`There is no poetry
without line breaks`
// Art
Template Strings
Benefits:
- String Interpolation
var difficult = "fun";
var boring = "exciting!";
`Learning es6 is ${difficult} and ${boring}?`;
Shorthands
Property Definition
var a = "foo",
b = 42,
c = {};
var o = {
a: a,
b: b,
c: c
};
var a = "foo",
b = 42,
c = {};
// Shorthand property names (ES6)
var o = { a, b, c };
Shorthand:
Method Definition
var obj = {
myMethod: function () {
···
}
};
let obj = {
myMethod () {
···
}
};
Shorthand:
Computed Properties
var property = 'foo';
var object = {};
object[property] = true;
var property = 'foo';
var object = {
[property]: true
};
Shorthand:
let
let Statements
- similar to `var` keyword
- used for declaration
- lexical scoping (scoped to the blocks in which they occur in)
- Because scoping is important
var foo = "bar"
console.log(foo) // "bar"
let baz = "qux"
console.log(baz) // "qux"
// If they are in the same scope they can act similarly
let Statements
- Lexical scoping
for (var i = 0; i <= 2; i += 1) {
i;
}
console.log(i); // 3 (I was not supposed to stick around)
for (let i = 0; i <= 2; i += 1) {
i;
}
console.log(i); // ReferenceError (Good. i is gone)
let Statements
- let is not hoisted
- var is hoisted
function kickRocks() {
console.log(rock_type); // undefined
var rock_type = "granite";
console.log(shoe_type); // ReferenceError
let shoe_type = "Nike";
}
const
const
- similar to `var` and `let` keyword
- used for declaration
- read only
const color = 'red';
var color = 'blue'; // can't do it
color = blue; // nope
let color = blue; // still no
console.log(color + 'is my favorite color') // okay
Spread Operator (...[1,2,3])
Spread Operator (...)
function Account(username, domain) {
this.username = username;
this.domain = domain;
}
var bad_account = new Account(..."bogus.user@notmail.com".split('@'));
console.log(bad_account);
// Object { username: "bogus.user", domain: "notmail.com" }
Rest Parameters (...params)
Rest Params (...params)
function validatePresenceOf(object, ...properties) {
properties.forEach(function (property) {
if (!object.property) {
alert(`${property} cannot be blank for ${object.name}!`);
}
});
}
var contact_info = {
name: "Cat Stevens",
phone: "409-528-1766",
email: ""
};
validatePresenceOf(contact_info, 'phone', 'email');
// alert: email can't be blank for Cat Stevens!
for...of
for...of vs for...in
- for...in iterates over property names
- for...of iterates over property values
var fishes = {
one : 'fish', two : 'fish',
red : 'fish', blue : 'fish'
};
for (fish of fishes) { console.log(fish); }
// logs ['one','two','red','blue']
for (fish in fishes) { console.log(fish); }
// logs ['fish','fish','fish','fish']
New Methods: Array
New Methods: Array
var people = [
{ name: 'Fred', age: 40 },
{ name: 'Barney', age: 36 },
{ name: 'Pebbles', age: 1 }
];
people.find( function (person) {
return person.age < 40;
});
// { name: 'Barney', age: 36 }
people.find( function (person) {
return person.age > 40;
});
// undefined
Array.prototype.find()
New Methods: Array
var people = [
{ name: 'Fred', age: 40 },
{ name: 'Barney', age: 36 },
{ name: 'Pebbles', age: 1 }
];
people.findIndex( function (person) {
return person.age < 40;
});
// 1
people.findIndex( function (person) {
return person.age > 40;
});
// -1
Array.prototype.findIndex()
New Methods: String
New Methods: String
var quote = 'To be, or not to be';
quote.includes('bee'); // false
quote.includes('be'); // true
quote.includes('be', 1); // false
quote.includes('to'); // false
quote.includes('To'); // true
String.prototype.includes()
Compatibility/Support
SacJS Intro to ES6
By Thomas Hopkins
SacJS Intro to ES6
An Intro to ES6 for the Sacramento JavaScript Meetup
- 1,295