ECMAScript 6 (Harmony)
Aziz Arslan
@azizarsl
front-end developer @metglobal
ECMAScript
Nedir???
ES5
var fn = function(x) {
return x + 1;
}
var fn = (x) => {
return x + 1;
}
Arrow Function Expression
var fn = (x) => x + 1;
ES6
Arrow Function Expression
ES5
var fn = function(label, name) {
return {
label: label,
name: name
};
}
var fn = (label, name) =>
({
label: label,
name: name
})
ES6
Arrow Function Expression
ES5
var mapFn = function(hotels) {
return hotels.map(function(item) {
return item;
});
}
var mapFn = (hotels) =>
hotels.map((item) => item.length);
ES6
var vs let
var x = 10;
if (true) {
let x = 20;
console.log(x); // 20
}
console.log(x); // 10
if (true) {
let x = "value";
}
console.log(x); // ERROR
const
(function() {
const X;
X = "#owtg2014"; // ERROR
}());
(function() {
const X = "#owtg2014";
X = "#owtg2015"; // ERROR
}());
Destructing Array & Object
var [x, y] = ["foo", "bar"];
console.log(x); // "foo"
console.log(y); // "bar"
var twitterInfo = {username: "ozgurwebgunleri", hashtag: "#owtg2014"};
var {username, hashtag} = twitterInfo;
console.log(username); //"ozgurwebgunleri"
console.log(hashtag); // "#owtg2014"
Multiple Return Value
var fn = (username, hashtag) => [username, hashtag];
var [username, hashtag] = fn("ozgurwebgunleri", "#owtg2014");
console.log(username); // "ozgurwebgunleri"
console.log(hashtag); // "#owtg2014"
var fn = (username, hashtag) => [username, hashtag];
var twitterInfo = fn("ozgurwebgunleri", "#owtg2014");
console.log(twitterInfo); // ["ozgurwebgunleri", "#owtg2014"]
Parameter Default Values
var fn = (x, y=3) => [x, y];
console.log(fn(1, 2)); // [1, 2]
console.log(fn(1)); // [1, 3]
console.log(fn()); // [undefined, 3]
Rest Parameters
var fn = (...args) =>
console.log(args.length);
fn("a", "b"); // 2
Named Parameters
var fn = ({id, name}) =>
console.log(name);
fn({name: "foo"}); // "foo"
Template Strings
console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"
Multi Line String
var name = "Aziz",
surname = "Arslan",
fullName = `Merhaba ${name} ${surname}`;
String Format
var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`);
// "Fifteen is 15 and not 20."
for-of
var arr = ["foo", "bar", "baz", "quz"];
for (let e of arr) {
console.log(e);
}
// "foo"
// "bar"
// "baz"
// "quz"
Set
var items = new Set();
items.add(1);
items.add(2);
items.add(2);
console.log(items.size); // 2
var items = new Set();
items.add(1);
items.add(2);
items.add("2");
console.log(items.size); // 3
var items = new Set();
items.add(1);
console.log(items.has(1)); // true
console.log(items.has(2)); // false
Set
var items = new Set();
items.add("foo");
items.add("bar");
for (let word of items) {
console.log(word);
}
// "foo"
// "bar"
var items = new Set();
items.add("foo");
items.add("bar");
items.delete("foo");
for (let word of items) {
console.log(word);
}
// "bar"
Map
var myMap = Map();
myMap.set("foo", "bar");
myMap.get("foo"); // "bar"
myMap.has("foo"); // true
myMap.has("buzz"); // false
var owtgMap = Map();
owtgMap.set("key1", "value1");
owtgMap.set("key2", "value2");
owtgMap.set("key3", "value3");
for (var [key, value] of owtgMap) {
console.log(`${key}: ${value}`);
}
// key1: value1
// key2: value2
// key3: value3
Class
class Animal {
constructor(name) {
this.name = name;
}
toString() {
return `This is: ${this.name}`;
}
}
var Karabas = new Animal("Karabas");
console.log(Karabas.toString()); // This is: Karabas
Subclass
class Animal {
constructor(name) {
this.name = name;
}
toString() {
return `This is: ${this.name}`;
}
}
class Cat extends Animal {
constructor(name, ownerName) {
super(name);
this.ownerName = ownerName;
}
toString() {
return `${super()} owned by ${this.ownerName}`;
}
}
var Minnos = new Cat("Minnos", "Aziz");
console.log(Minnos.toString()); // This is: Minnos owned by Aziz
String Methods
.repeat()
var x = "abc".repeat(3);
console.log(x); // "abcabcabc"
.startsWith()
var x = "abc".startsWith("ab");
console.log(x); // true
.endsWith()
var x = "abc".endsWith("bc");
console.log(x); // true
.contains()
var x = "foo".contains("oo");
console.log(x); // true
Array Methods
var arr = [1, 3, 6].find(x => x % 2 === 0);
console.log(arr); // 6
var arr = [1, 3, 5].find(x => x % 2 === 0);
console.log(arr); // undefined
.find()
var arr = ["a", "b", "c"];
for (let [index, e] of arr.entries()) {
console.log(index, e);
}
// 0 "a"
// 1 "b"
// 2 "c"
.entries()
Array Methods
var arr = ["a", "b", "c"];
for (let index of arr.keys()) {
console.log(index);
}
// 0
// 1
// 2
.keys()
var arr = ["a", "b", "c"];
for (let e of arr.values()) {
console.log(e);
}
// "a"
// "b"
// "c"
.values()
Number Methods
console.log(Number.isInteger(2)); // true
.isInteger()
console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN(0/0)); // true
console.log(Number.isNaN(1)); // false
.isNan()
Math Methods
console.log(Math.log2(3)); // 1.584962500721156
console.log(Math.log2(2)); // 1
.log2()
console.log(Math.log10(2)); // 0.3010299956639812
console.log(Math.log10(1)); // 0
.log10()
ES6 ile Bugün
- Traceur Compiler (Google)
- es6-transpiler
- es6-shim
Kaynaklar
- https://github.com/lukehoban/es6features
- https://developer.mozilla.org
- http://people.mozilla.org/~jorendorff/es6-draft.html
http://kangax.github.io/compat-table/es6/
Teşekkürler!
ECMAScript 6 (Harmony)
By Aziz Arslan
ECMAScript 6 (Harmony)
- 2,485