Learn ECMAScript 6 from Beginner to advanced 🚀
Tags: javascript, programming, es6
Published: 2022-12-07 04:20:13

What is it ECMAScript?
Is a scripting language specification on which JavaScript is based. [Ecma International](https://www.ecma-international.org/) 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.


![Table comparation const, let and var](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7c3y9e1bm4ng7q1wc3rw.png)


```
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:

1. Import a default export from the file pokemon.js:

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

2. 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.
 
{% embed https://codesandbox.io/embed/recursing-tree-yxsxb1?fontsize=14&hidenavigation=1&theme=dark %}

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](https://www.w3schools.com/js/js_es6.asp)
[Platzi Curso de ECMAScript: Historia y Versiones de JavaScript](https://platzi.com/cursos/ecmascript-6/)