Javascript

ES6

Contents

  • Block-scoped declarations  
  • Spread/rest
  • Default parameters
  • Destructuring
  • Object literals
  • Template literals
  • arrow functions
  • for...of
  • Symbol
  • Modules
  • Class
  • Collections

Block-Scoped Declaratıons

  • Not function but block scope
  • let & const keywords
  • no hoisting
if(condition) {
  let a = 5;
  // ...
}

const numbers = [1,2,3,4];

Spread/Rest

  • takes out array values out of array (spread)
  • combines values as an array (rest)
console.log([1,2,3]) // [1,2,3]
console.log(...[1,2,3]) // 1 2 3

function resting (first, ...rest) {
  console.log(first, rest);
}

resting(1,2,3,4);  // 1, [2,3,4]

Default parameters

  • don't check values validity and assign default at the top of functions
  • specify defaults with parameters
function oldStyle (a, b) {
  a = a == undefined ? 3 : a;
  b = b == undefined ? 4 : b;
  console.log(a, b);
}

function newStyle (a = 3, b = 4) {
  console.log(a, b);
}

Destructurıng

  • Takes out desired values from array or object
const [first, second] = [1, 2];

const obj = {
  x: 4,
  y: 5
};

const {x, y} = obj;

Object lıterals

  • You can avoid naming keys of objects
  • Property is name of variable
  • Value of property is that variable's value
const x= 5;
const y=6;

const obj = {
  x,
  y
};

// old way
const obj2 = {
  x: x,
  y: y
};

template lıterals

  • No need to concat strings with +
  • Multiline string support
  • Variables inside string more readable
const myNumber = 1;

const lyric = `You're the one
my number ${myNumber}`;

Arrow functıons

  • Simplify writing anonymous functions
  • For simple methods, write less
  • !! inherits upper scope's this !! 
const doublify = x => x * 2;

setTimeout(() => {
  console.log('Time is over');
}, 100)

for...of

  • Gives values rather than index
  • Makes iteration easy
  • Not only for array, every Iterable object supports
let iterable = [10, 20, 30];

for (const value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

Symbol

  • new primitive
  • "special, almost hidden, meta-like property"
var sym = Symbol( "some optional description" );

sym instanceof Symbol;		// false

var symObj = Object( sym );
symObj instanceof Symbol;	// true

symObj.valueOf() === sym;	// true

MODULES

  • CommonJS modules
  • ES6 modules
// CommonJs
var dependency = require('./dependency');

// ...

module.exports = {
  something: 42
}
// Es6 modules
import Dependency from './dependency';

// ...

export default { something: 42 };

Class

  • syntatic sugar for prototypical inheritance
  • new keywords: constructor, super, static, extends 
class Parent {
  constructor(x, y){
    this.x = x;
    this.y = y;
  }
}

class Child extends Parent {
  constructor(x,y,z) {
    super(x,y);
    this.z = z;
  }
 
  static getNameOfClass () {
    return 'Child';
  }
}

Collectıons

  • Set, WeakSet
  • Map, WeakMap

ASYNC FLOW CONTROL

  • Promise
  • Generator

Many more apı addıtıons...

Javascript - ES6

By Özgün Bal

Javascript - ES6

  • 127

More from Özgün Bal