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

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

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

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

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();

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

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

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
}

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

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);

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}

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;

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