Javascript 2.0
// ES5
var x = function(y, z) {
return y + z;
};
// ES6
var x = (x, y) => {
return x + y;
};
// ES3
var obj = {
onClick: function() {
console.log(this);
},
init: function() {
var _this = this; // that, raoul, toto, instance, marty, ...
document.addEventListener('click', function() {
_this.onClick();
});
}
};
// ES5
var obj = {
onClick: function() {
console.log(this);
},
init: function() {
document.addEventListener('click', function() {
this.onClick();
}.bind(this));
}
};
obj.init();
// ES6
var obj = {
onClick() {
console.log(this);
},
init() {
document.addEventListener('click', () => {
this.onClick()
});
}
};
obj.init();
var Car = function(color) {
this.color = color;
this.counter = 0;
};
Car.prototype.drive = function(distance) {
this.counter += distance;
};
class Car {
constructor(color) {
this.color = 0;
this.counter = 0;
}
drive(distance) {
this.counter += distance;
}
}
class Delorean extends Car {
drive(distance, time) {
super(distance);
this.time = time;
}
}
class MyComponent extends React.Component {
render() {
return <div>My component</div>;
}
}
myFunction(param = 10) {
console.log(param);
};
myFunction();
function fn({x, y}) {};
fn({y: 10});
function fn(x, y, z) {}
var params = [1, 2, 3];
fn(...params);
function fn2(...params) {}
fn2(1, 3, 4);
var fn = () => {
return {x: 1, y: 3};
};
var {x, y} = fn();
console.log(x); // 1
console.log(y); // 3
Template string
var name = "Mapado";
console.log(`Hello, ${name}!`); // Hello, Mapado
Multiline Strings
var text = "Lorem \
Ipsum";
require('babel/register')
var results = (
for(c of customers)
if (c.city == "Lyon")
{ name: c.name, age: c.age }
)