Some ES6 Features you
can test today
Dienstag, 16. April 13
Slide 2
Slide 2 text
Robert Kowalski
Jimdo GmbH
@robinson_k
http://github.com/robertkowalski
http://kowalski.gd
Dienstag, 16. April 13
Slide 3
Slide 3 text
JavaScript Usergroup Hamburg - 2013-04-15
Dienstag, 16. April 13
Slide 4
Slide 4 text
JavaScript Usergroup Hamburg - 2013-04-15
ECMAScript
• Standardized by TC39 committee
• JavaScript is an implementation of the
ECMAScript Specification
• These implementations are called
„Dialects“
Dienstag, 16. April 13
Slide 5
Slide 5 text
JavaScript Usergroup Hamburg - 2013-04-15
node:
$ node --harmony
Chrome / Chrome Canary:
chrome://flags -> Enable Experimental JavaScript
Firefox:
Just use it (I used Firefox 19 and Nightly)
Try it out
Dienstag, 16. April 13
Slide 6
Slide 6 text
JavaScript Usergroup Hamburg - 2013-04-15
String.contains
A good alternative to indexOf()
Dienstag, 16. April 13
JavaScript Usergroup Hamburg - 2013-04-15
And the global isFinite?
Convenience methods
for Numbers
Dienstag, 16. April 13
Slide 13
Slide 13 text
JavaScript Usergroup Hamburg - 2013-04-15
window.isFinite(true); // true
Number.isFinite(true); // false
Convenience methods
for Numbers
Dienstag, 16. April 13
Slide 14
Slide 14 text
JavaScript Usergroup Hamburg - 2013-04-15
Default parameter
values
Well known from many languages
Dienstag, 16. April 13
Slide 15
Slide 15 text
JavaScript Usergroup Hamburg - 2013-04-15
Default parameter
values
Example in Ruby
def myFunction(value = 'example')
puts value
end
myFunction() # example
Dienstag, 16. April 13
Slide 16
Slide 16 text
JavaScript Usergroup Hamburg - 2013-04-15
Default parameter
values
Example in JavaScript
function myFunction(value = 'example') {
console.log(value);
}
myFunction(); // example
Dienstag, 16. April 13
Slide 17
Slide 17 text
JavaScript Usergroup Hamburg - 2013-04-15
function logWithRest(a, ...r) {
var b = a.concat(r);
console.log(b);
}
logWithRest([1], 2, 3, 4, 5); // [1, 2, 3, 4, 5]
...
(Rest)
Dienstag, 16. April 13
Slide 18
Slide 18 text
JavaScript Usergroup Hamburg - 2013-04-15
Did you notice?
...
(Rest)
Dienstag, 16. April 13
Slide 19
Slide 19 text
JavaScript Usergroup Hamburg - 2013-04-15
r is a real Array - Say Goodbye to this „friend“:
var args = Array.prototype.slice.call(arguments);
...
(Rest)
Dienstag, 16. April 13
Slide 20
Slide 20 text
JavaScript Usergroup Hamburg - 2013-04-15
var clothes = ['hat', 'jeans'];
var thingsToBuy = ['beer', ...clothes, 'food'];
console.log(thingsToBuy);
// ["beer", "hat", "jeans", "food"]
...
(Spread)
Dienstag, 16. April 13
Slide 21
Slide 21 text
JavaScript Usergroup Hamburg - 2013-04-15
let
Function-Scope: var
Scope inside a Block: let
Dienstag, 16. April 13
Slide 22
Slide 22 text
JavaScript Usergroup Hamburg - 2013-04-15
let
Example Block Scope in Ruby
['egg', 'bacon', 'salt'].each do |x|
puts x # egg, bacon, salt
end
puts x # NameError: undefined local variable or method
`x' for #
Dienstag, 16. April 13
Slide 23
Slide 23 text
JavaScript Usergroup Hamburg - 2013-04-15
let
for (let i = 0; i < 5; i++) {
console.log(i); // 1, 2, 3, 4
}
console.log(i); // ReferenceError: i is not defined
Dienstag, 16. April 13
Slide 24
Slide 24 text
JavaScript Usergroup Hamburg - 2013-04-15
let
let (a = 6) {
console.log(a); // 6
}
console.log(a); // ReferenceError: a is not defined
Dienstag, 16. April 13
Slide 25
Slide 25 text
JavaScript Usergroup Hamburg - 2013-04-15
let
{ let foo = 'bar'; }
console.log(foo);
// ReferenceError: foo is not defined
Dienstag, 16. April 13
Slide 26
Slide 26 text
JavaScript Usergroup Hamburg - 2013-04-15
Fat arrow functions
Known from CoffeeScript or C#
„Like functions“
Dienstag, 16. April 13
Slide 27
Slide 27 text
JavaScript Usergroup Hamburg - 2013-04-15
Fat arrow functions
Can‘t use new (no Constructor)
No .prototype
Trying to access arguments will result in a
ReferenceError
No dynamic this (call, apply) - lexical scope
Dienstag, 16. April 13
Slide 28
Slide 28 text
JavaScript Usergroup Hamburg - 2013-04-15
Fat arrow functions
// no argument:
var sayHi = () => { console.log('hi!'); };
sayHi(); // hi!
// one argument
var square = x => x * x;
square(3); // 9
// more than one argument:
var calcRectangle = (a, b) => a * b;
calcRectangle(2, 4); // 8
Dienstag, 16. April 13
Slide 29
Slide 29 text
JavaScript Usergroup Hamburg - 2013-04-15
Fat arrow functions
var odds = [1, 3, 5];
var evens = odds.map(x => x + 1);
console.log(evens); // [2, 4, 6]
Dienstag, 16. April 13