A STATE OF JAVASCRIPT

ECMASCRIPT

VAR vs LET, CONST

BLOCK SCOPING

'use strict';

var apples = 5;

if (true) {
  var apples = 10;
  console.log(apples); // 10 (inside the block)
}

console.log(apples); // 10 (outside the block - the same as inside)

/*-----------------------------------------------------------------------------------*/

let apples = 5;

if (true) {
  let apples = 10;
  console.log(apples); // 10 (inside the block)
}

console.log(apples); // 5 (outside the block - value still remains the same)

DECLARATION

'use strict';

console.log(a); // undefined

var a = 5;


/*-----------------------------------------------------------------------------------*/

console.log(a); // ReferenceError: a is not defined

let a = 5;

CLASSIC

'use strict';

function make() {

  let shooters = [];

  for (let i = 0; i < 10; i++) {
    shooters.push(function() {
      console.log(i); // 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
    });
  }

  return shooters;
}

let army = make();

army[0](); // 0
army[5](); // 5

DESTRUCTURING

ARRAYS

'use strict';

let [name, surname] = ['Roman', 'Stremedlovskyi'];

console.log(name);     // Roman
console.log(surname);  // Stremedlovskyi

/*-----------------------------------------------------------------------------------*/

let [name, surname, ...rest] = 'Roman Stremedlovskyi JavaScript Developer'.split(' ');

console.log(name);     // Roman
console.log(surname);  // Stremedlovskyi
console.log(rest);     // JavaScript,Developer (array with 2 elements)

/*-----------------------------------------------------------------------------------*/

let [name='Guest', surname] = [];

console.log(name);     // Guest
console.log(surname);  // undefined

OBJECTS

'use strict';

let options = {
  title: 'Menu',
  width: 100,
  height: 200
};

let {title, width, height} = options;

console.log(title);  // Menu
console.log(width);  // 100
console.log(height); // 200

FUNCTIONS

DEFAULT PARAMS

'use strict';

function show(title = 'Unknown', width = 100, height = 200) {
  console.log(title + ' ' + width + ' ' + height);
}

show('Menu'); // Menu 100 200

SPREAD OPERATOR

'use strict';

function show(name, surname, ...rest) {
  console.log(name + ' ' + surname + ' - ' + rest);
}

// Roman Stremedlovskyi - JavaScript Developer
show('Roman', 'Stremedlovskyi', 'JavaScript', 'Developer');

/*-----------------------------------------------------------------------------------*/

let numbers = [2, 3, 15];
let max = Math.max(...numbers);

console.log(max); // 15

DESTRUCTURING

'use strict';

let options = {
  title: 'Menu',
  width: 100,
  height: 200
};

function show({title, width, height}) {
  console.log(title + ' ' + width + ' ' + height); 
}

show(options); // Menu 100 200

ARROW FUNCTIONS

'use strict';

let sum = (a,b) => a + b; // var sum = function(a, b) { return a + b; };

console.log(sum(1, 2)); // 3

/*-----------------------------------------------------------------------------------*/

let arr = [5, 8, 3];
let sorted = arr.sort((a,b) => a - b);

console.log(sorted); // 3, 5, 8

STRINGS

SYNTAX

'use strict';

let string = `backquotes`;

/*-----------------------------------------------------------------------------------*/

let string = `my
              multiline      
              string`;

/*-----------------------------------------------------------------------------------*/

let apples = 2;
let oranges = 3;

alert(`${apples} + ${oranges} = ${apples + oranges}`); // 2 + 3 = 5

OBJECTS AND PROTOTYPES

SYNTAX

'use strict';

let name = 'Roman';
let hasIPhone7 = false;

let user = {
  name,
  hasIPhone7
};

console.log(JSON.stringify(user)); // {'name': 'Roman', 'hasIPhone7': false}

/*-----------------------------------------------------------------------------------*/

let prop = 'name';
let user = {
  [prop]: 'Roman'
};

console.log(user.name); // Roman

OBJECT.ASSIGN()

'use strict';

let user = {
    name: 'Roman'
};
let visitor = {
    hasIPhone7: false, 
    visits: true
};
let apple = {
    hasIPhone7: true
};

// user <- visitor <- apple
Object.assign(user, visitor, apple);

// {'name':'Roman', 'visits':true, 'hasIPhone7':true}
console.log(JSON.stringify(user));

SUPER

'use strict';

let animal = {
  walk() {
    console.log('I am walking');
  }
};

let rabbit = {
  __proto__: animal,
  walk() {
    console.log(super.walk); // walk() { … }
    super.walk(); // I am walking
  }
};

rabbit.walk();

CLASSES

SYNTAX

'use strict';

function User(name) {
  this.name = name;
}
User.prototype.sayHi = function() {
  console.log(this.name);
};

/*-----------------------------------------------------------------------------------*/

class User {
  constructor(name) {
    this.name = name;
  }
  sayHi() {
    console.log(this.name);
  }
}
let user = new User('Roman');
user.sayHi(); // Roman

SYMBOL

SYNTAX

'use strict';

let sym = Symbol();

console.log(typeof sym); // symbol

/*-----------------------------------------------------------------------------------*/

let sym = Symbol('name');
console.log(sym.toString()); // Symbol(name)

console.log(sym == Symbol('name')); // false

/*-----------------------------------------------------------------------------------*/

let name = Symbol.for('name');

// symbol is already created, reading from the registry
console.log(Symbol.for('name') == name); // true

ITERATORS

FOR..OF

'use strict';

let arr = [1, 2, 3]; // array

for (let value of arr) {
  console.log(value); // 1, 2, 3
}

/*-----------------------------------------------------------------------------------*/

for (let char of 'JavaScript') {
  console.log(char); // J, a, v, a, S, c, r, i, p, t
}

SET, MAP

MAP

'use strict';

let map = new Map();

map.set('1', 'str1');   // string key
map.set(1, 'num1');     // number key
map.set(true, 'bool1'); // bool key

console.log(map.get(1));   // 'num1'
console.log(map.get('1')); // 'str1'

console.log(map.size);  // 3

SET

'use strict';

let set = new Set();

let roman = {name: 'Roman'};
let andrii = {name: 'Andrii'};
let sergiy = {name: 'Sergiy'};

set.add(roman);
set.add(andrii);
set.add(sergiy);
set.add(roman);
set.add(andrii);

console.log(set.size); // 3

set.forEach(user => console.log(user.name)); // Roman, Andrii, Sergiy

PROMISE

SYNTAX

'use strict';

const promise = new Promise(function(resolve, reject) {
  // This function will be invoked automatically

  // Feel free to do async operations here,
  // after they finish should be chosen:
  // resolve(result) in success case
  // reject(error) in error case
});

promise.then(onFulfilled, onRejected);

GENERATORS

SYNTAX

'use strict';

function* generateSequence() {
  yield 1;
  yield 2;
  return 3;
}

let generator = generateSequence();

let one = generator.next();
console.log(JSON.stringify(one)); // {value: 1, done: false}

let two = generator.next();
console.log(JSON.stringify(two)); // {value: 2, done: false}

let three = generator.next();
console.log(JSON.stringify(three)); // {value: 3, done: true}

MODULES

SYNTAX

import './styles.scss';
import React, { PropTypes } from 'react';
import Switcher from '../Switcher';
import EntriesTable from '../EntriesTable/';

const Entries = ({ states, handler }) => (
    <div className="ht-entries">
        <Switcher view={states.view} />
        <EntriesTable
            {...states}
            handler={handler}
        />
    </div>
);

Entries.propTypes = {
    states: PropTypes.object.isRequired,
    handler: PropTypes.func.isRequired
};

export default Entries;

PROXY

SYNTAX

'use strict';

let proxy = new Proxy(target, handler);

/*-----------------------------------------------------------------------------------*/

let user = {};
let proxy = new Proxy(user, {
  get(target, prop) {
    console.log(`Reading ${prop}`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`Writing ${prop} ${value}`);
    target[prop] = value;
    return true;
  }
});

proxy.name = 'Roman'; // Writing name Roman
proxy.name; // Reading name

A STATE OF JAVASCRIPT

ECMASCRIPT

VAR vs LET, CONST

BLOCK SCOPING

DECLARATION

CLASSIC

DESTRUCTURING

ARRAYS

OBJECTS

FUNCTIONS

DEFAULT PARAMS

SPREAD OPERATOR

DESTRUCTURING

ARROW FUNCTIONS

STRINGS

SYNTAX

OBJECTS AND PROTOTYPES

SYNTAX

OBJECT.ASSIGN()

SUPER

CLASSES

SYNTAX

SYMBOL

SYNTAX

ITERATORS

FOR..OF

SET, MAP

MAP

SET

PROMISE

SYNTAX

GENERATORS

SYNTAX

MODULES

SYNTAX

PROXY

SYNTAX

EAT. CODE. LOVE.