DEV Community

Cover image for Learn ECMAScript 6 from Beginner to advanced πŸš€
Ernesto Herrera
Ernesto Herrera

Posted on • Updated on

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`
}
Enter fullscreen mode Exit fullscreen mode

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.

Table comparation const, let and var

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

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 };
Enter fullscreen mode Exit fullscreen mode

Modules

Modules are imported in two different ways:

  1. Import a default export from the file pokemon.js:
export default class Pokemon {
  constructor(name, type) {
    this.name = name;
    this.type = type;
  }
}
Enter fullscreen mode Exit fullscreen mode
  1. 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 };
Enter fullscreen mode Exit fullscreen mode
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);


Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

References

w3schools
Platzi Curso de ECMAScript: Historia y Versiones de JavaScript

Top comments (1)

Collapse
 
naucode profile image
Al - Naucode

Hey, it was a nice read, you got my follow, keep writing!