List of some ES6 Features

es6-features.md

Let and Const

Scoped

function foo() {
  let number = 10;
  
  console.log(number); // --> 10
}

foo();

console.log(number); // --> a is not defined

"Immutable" const

const animal = 'dog';
animal = 'cat';

console.log(animal); // --> Assignment to constant variable

You can't rewrite the value of a const, but you can change a const going into it's inside values

const animal = {
  name: 'Billy',
  age: 4
}

animal.age = 10

console.log(animal.age) // ---> 10

Arrow function

let cities = ['Curitiba', 'São Paulo', 'Rio'];

const cities = cities.map((name) => { 
  name 
});

console.log(cities); // --> 'Curitiba', 'São Paulo', 'Rio'

const cities = cities.map(name => name);

console.log(cities); // --> 'Curitiba', 'São Paulo', 'Rio'

const filteredCity = cities.map(name => name).filter(city => city === 'Curitiba');

console.log(filteredCity); // --> 'Curitiba'

Arrow function and Lexical This

Using arrow function, this gets the context of where it is, for example, window.

"Normal" function:

button.addEventListener('click', function() {
  console.log(this);
});

// console --> Each click gets the context of this function, that is, it's console the target button

With arrow function:

button.addEventListener('click', () => console.log(this));

// console --> Each click gets the context outside(or block) of this function, as example, window.

New string methods

'string'.startsWith('str'); // => true

'string'.startsWith('ring'); // => false

'string'.startsWith('ring', 2); // => true

'string'.endsWith('ing'); // => true

'string'.includes('tri'); // => true

'string'.repeat(20); // => stringstringstringstringstringstringstringstringstringstringstringstringstringstringstringstringstringstringstringstring

Array

Transform in array with Array.from()

 const name = 'Bruno';
 
 Array.from(name); // => ["B", "r", "u", "n", "o"]

Transform in array any type with Array.of()

 const array = Array.of(1, 2, 3, { name: 'Bruno' }, 'Curitiba', 'Web Animation'); 
 
 console.log(array) // => [1, 2, 3, {…}, "Curitiba", "Web Animation"]

Find something:

const obj = [
  {
    name: 'Bruno',
    age: 23,
    city: 'Curitiba'
  },
  {
    name: 'Alan',
    age: 21,
    city: 'São Paulo'
  }
]

const findArray = obj.find(person => person.name === 'Bruno'); // => {name: "Bruno", age: 23, city: "Curitiba"}

// Find index
const findArray = obj.findIndex(person => person.name === 'Alan'); // => index 1

Objects

Destructuring

let data = {
  name: 'Bruno',
  surname: 'Almeida',
  age: 23,
  city: 'Curitiba',
  social: {
    twitter: 'brunosheet',
    github: 'brunob182',
    codepen: 'brunob182',
    instagram: 'bruno.end'
  }
}

const { name, surname, city } = data;

console.log(name); // => Bruno
console.log(surname); // => Almeida
console.log(city); // => Curitiba

const { twitter, github, instagram } = data.social;

console.log(twitter); // => brunosheet
console.log(github); // => brunob182
console.log(instagram); // => bruno.end

// Default values if there's no attribute on data
const { height } = data;

console.log(height); // => undefined

const { height = 1.86 } = data;

console.log(height); // => 1.86

Destructuring Arrays

let arr = ['Bruno', 'Almeida', 23, 'Curitiba'];

const [ name, surname, age, city ] = arr;

console.log(name); // => Bruno
console.log(surname); // => Almeida
console.log(age); // => 23
console.log(city); // => Curitiba

Variable swapping

let a = 1
let b = 2

console.log(a); // => 1
console.log(b); // => 2

// Destructuring
[ a, b ] = [ b, a ]

console.log(a); // => 2
console.log(b); // => 1

Spread Operator

let front = ['vue', 'vuex', 'eslint', 'react']
let back = ['java', 'python', 'SQL']

// Get array values
console.log( ...front ); // => vue vuex eslint react

// concat
let stacks = [...front, ...back];
console.log(stacks) // => ["vue", "vuex", "eslint", "react", "java", "python", "SQL"]

// or only values

console.log(...stacks) // => vue vuex eslint react java python SQL

Rest params

Don't pass many params, just use ...args and receive as many params you want!

function multiply(mult, ...args) {
  return args.map(arg => mult * arg);
}

console.log( multiply(2, 1, 2, 3, 4, 5) ); // => [2, 4, 6, 8, 10]

Promises

• Promises explained

Prototype Inheritance

To know more: MDN Link

function Fruit(name, size) {
  this.name = name
  this.size = size
}

// Inserting new method on Fruit prototype
Fruit.prototype.info = function() {
  return `I'm a ${ this.size } ${ this.name } with nice price at grocery stores! :D`;
}

const orange = new Fruit('orange', 'big');           // => Fruit {name: "orange", size: "big"}
const strawberry = new Fruit('strawberry', 'small'); // => Fruit {name: "strawberry", size: "small"}

orange.info();    // => "I'm a big orange with nice price at grocery stores! :D"
strawberry.info() // => "I'm a small strawberry with nice price at grocery stores! :D"

With classes

class Fruit {
  constructor(name, size) {
    this.name = name
    this.size = size
  }
  
  info() {
    return `I'm a(n) ${ this.size } ${ this.name } with nice price at grocery stores! :D`;
  }
  
  // static methods
  static info() {
    return `I'm a(n) ${ this.name }`
  }
  
  get who() {
    return `I'm a(n) fruit called ${ this.name }`
  }
  
  set quality(arg) {
    this.fruitState = arg;
  }
}

const melon = new Fruit('melon', 'small');

// Get
melon.who // => "I'm a fruit called melon"

// Set
melon.quality = 'Good'
melon.fruitState // => 'Good'

Extends

class GroceryItem extends Fruit {
  constructor(name, productId) {
    super(name) // Needed to refer class Fruit, attr name
    this.productId = productId
  }
  
  productInfo() {
    return `Prodct: ${ this.name } / id: ${ this.productId }`
  }
}

const product = new GroceryItem('Orange', '1'); // => GroceryItem {name: "Orange", size: undefined, productId: "1"}

// Now I can use Fruit class methods
product.who // => "I'm a(n) fruit called Orange"

product.info() // => "I'm a(n) undefined Orange with nice price at grocery stores! :D"
// undefined because i didn't pass size attr