JS Internship 1.3

ES6/ES2015

ES5

ECMA

TC39

Variable Declarations

let text = 'Hello World!';

const secret = 'my_secret!@#';

Template literals

let num = 55;
`This is value of num variable: ${num}.`;

`This string uses backticks.`;
`Current time ${Date.now()}.`;
// "Current time Fri Apr 20 2018 22:54:48 GMT+0400 (+04)."

Iterator

const arr = [1, 2, 3];
const iterator = arr[Symbol.iterator]();

iterator.next(); // {value: 1, done: false}

iterator.next(); // {value: 2, done: false}

iterator.next(); // {value: 3, done: false}

iterator.next(); // {value: undefined, done: true}

for-of

const arr = [4, 5, 6];

for (let v of arr) {
    console.log(v);
}

// 4, 5, 6

Functions

// just function
function getDate() {
    return new Date();
}
// arrow function
const multiply = n => n**2;

setTimeout(() => {
    console.log('Hello');
}, 1000);

// *Arrow Functions lexically bind their context
// so this actually refers to the originating context. 

Function Generator

// generator function*

function* gen() {
    let n = yield 123;

    return n + 2;
}
// push value into generator function*

function* gen() {
    console.log(11);

    let n = yield 1;

    console.log(n);

    return 2;
}

Callback

function asyncFun(cb) {
    // ...
    cb();
}

asyncFun((err) => {
    if (err) {
        console.error(err);
        return;
    }
    console.log('cb called after 1000 ms');
});

Not ES6

Promise

const promise = new Promise((resolve, reject) => {
    asyncFun((err) => {
        if (err) {
            reject(err);
            return;
        }
        resolve();
    }, 2000);
});
promise()
    .then(() => {
        console.log('promise resolved');
    })
    .catch(err => {
        console.error(err);
    });

How works Promise

resolve()

reject()

states

Rejected

Pending

Fulfilled

methods

Why Promise?

Promise advantages

  • Chaining
  • Error handling
  • Encapsulation
  • Promise.all
  • Calls only once

Class

class Rectangle extends Sprite {
  constructor(height, width) {
    super(height, width);

    this.height = height;
    this.width = width;
  }

  getSize() {
    const { width, height } = this;
    return {
      width,
      height
    };
  }

  static getType() {
    return 'Rectangle type';
  }
}

Let's play a interesting game

Thank you!

nairi.harutyunyan@optym.com

nairihar99@gmail.com

@nairihar

Made with Slides.com