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,299