Learn ECMAScript 6 from Beginner to advanced 🚀

What is it ECMAScript?
Is a scripting language specification on which JavaScript is based. Ecma International is in charge of standardizing ECMAScript.

There is a lot of new function added to JavaScript, in this post we are going to see the most value feature.

Default parameters and concatenation using template literals

Function parameter with default values are initialized with default values if they not contain value or are undefined.

Template literals provide an easy way to interpolate variables and expressions into strings.

function printMessage(message = 'default'){
  if (message !== 'default'){
    return `Custom message with this value: ${message}`
  }

  return `Hello, this is ${message} message`
}

Let and const

ES6 Conventions:

Use const by default.
Use let if you have to rebind a variable.
var can be redeclared and reassigned.
let can be reassigned, but not redeclared.
const can not be redeclared and reassigned.

var a = 10;
console.log(a); //10
{
  let a = 2;
  console.log(a); //2
}
console.log(a); //10

var b = 10;
console.log(b)// Here b is 10
{
  const b = 2;
  console.log(b)// Here b is 2
}
console.log(b)// Here b is 10

Arrow Functions

Arrow functions are not hoisted. They must be defined before they are used.
It is recommended to use const for arrow functions, because a function expression is always a constant value.

const sumData = (a,b) => a + b;

console.log(sumData(23,4)); // 27

The Spread (...) Operator

It allows us to quickly copy all or part of an existing array or object into another array or object.

const pokemonKanto = ['pikachu','zubat'];
const pokemonHoenn = ['torchid','latios'];

const listPokemonAllRegion = [...pokemonKanto,...pokemonHoenn]

console.log(listPokemonAllRegion); // ["pikachu", "zubat", "torchid", "latios"]

Destructuring

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

const [a, b] = ["hello", "Jose"];
console.log(a); // "hello"
console.log(b); // "jose"

const obj = { nombre: "Jose", apellido: "Silva" };
const { nombre, apellido } = obj;
console.log(nombre,apellido); // "Jose Silva"

const getYearAndMonth = function () {
  return ["2022", "December"];
};
const [year, month] = getYearAndMonth();
console.log(year); //2022
console.log(month); //December

const getPokemon = function () {
  return {
    name:'pikachu',
    trainner:'Ash',
  };
};
const {name,trainner} = getPokemon();
console.log(name); //pikachu
console.log(trainner); //Ash

The For/Of Loop

This is a new way for iterable array

function printAllNames(...names) {
  let listOfName = 'list of name: ';
  for (let name of names){
   listOfName += name + " ";
  } 
  return listOfName;

}

let result = printAllNames('pablo','jose','ernesto','');

console.log(result); //list of name: pablo jose ernesto

Rest Parameter

The rest parameter syntax allows a function to accept an indefinite number of arguments as an array.

function multiply(...values) {
  let operation = 1;
  for (let value of values){
    operation *= value;
  } 
  return operation;

}

let result = multiply(1,2,3,4,5,6);

console.log(result); //720

Classes

JavaScript Classes are templates for JavaScript Objects.
Use the keyword class to create a class.
Always add a method named constructor():

class PlayerSoccer {
  constructor(name, selection) {
    this.name = name;
    this.selection = selection;
  }
}

const playerOne = new PlayerSoccer('messi','argentina');
const playerTwo = new PlayerSoccer('ronaldo', 'portugal');

console.log(playerOne); //PlayerSoccer {name: "messi", selection: "argentina", constructor: Object}
console.log(playerTwo); //PlayerSoccer {name: "ronaldo", selection: "portugal", constructor: Object}
export { PlayerSoccer };

Modules

Modules are imported in two different ways:

Import a default export from the file pokemon.js:

export default class Pokemon {
  constructor(name, type) {
    this.name = name;
    this.type = type;
  }
}

Import named exports from the file vehicle.js

class Car {
  constructor(brand, model, year) {
    this.brand = brand;
    this.model = model;
    this.year = year;
  }
}

class Bike {
  constructor(brand, model, year) {
    this.brand = brand;
    this.model = model;
    this.year = year;
  }
}
export { Car, Bike };

import Pokemon from "./pokemon";
import { Car, Bike } from "./vehicle";

const firstPokemon = new Pokemon("pikachu", "electric");
console.log(firstPokemon);

const firstCar = new Car("Toyota", "yaris", 2020);
console.log(firstCar);

const firstBike = new Bike("Suzuki", "gixxer", 2021);
console.log(firstBike);

Sets

A JavaScript Set is a collection of unique values.
Each value can only occur once in a Set.
A Set can hold any value of any data type.

const words = new Set();

words.add('a');
words.add('b');
words.add('a');
console.log(words); //a,b

Promises

Promise is the easiest way to work with asynchronous programming in JavaScript.

const myPromise = () => {
  return new Promise((resolve, reject) => {
      if(true) {
          resolve( "success" )
      }
      else{
          reject( "error" )
      }
    });
}

myPromise()
.then( response => console.log(response) ) // case success
.catch( error => console.log(error) ) //case error

Time to practice 💪🏻

This is the end of the post and the most exciting part, now it's your turn to put top practice es6 into practice, here I leave you a codesandbox ready for you to write your code. Remember to fork the codesandbox to save your practice.

Any questions you have, do so in the comments and I will gladly answer all of them. I also share some links where we can delve deeper into the ECMAScript 6.