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
constby default. - Use
letif you have to rebind a variable. -
varcan be redeclared and reassigned. -
letcan be reassigned, but not redeclared. -
constcan 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.
References
w3schools
Platzi Curso de ECMAScript: Historia y Versiones de JavaScript
Top comments (1)
Hey, it was a nice read, you got my follow, keep writing!