ES6 features in JavaScript

Es6 or also known as EcamScript2015 brings a variety of exciting and promising features to good old JavaScript. FYI: ECMAScript is a specification of a language. JavaScript is an implementation of that language.

Es6 brings many promising features like arrow function, template string, const, let and many more. Let’s start with easy to understand features and then move on to more complex features.

const and let

const (Constants) are block scoped ( only available in local scope). You can’t reassign value of const variable but properties of const can be mutated for example

>> const a = {

namv : "Jhon Doe"

}

>> a = {  // this not allowed

name : "Jen Doe"

}

>> a.name = "Jen Doe" // this allowed

let are also block scoped but you can reassign value of let variable and also you can mutate their value.

Template Strings

Template String or Template literals are enclosed with ` (back-tick) . You can embed variables in Template string just by surrounding variable by ${}, Multi-line strings and many more features but to keep this guide simple for beginners I am not going go over every single feature of Template Strings instead let’s understand most of the features by comparing normal string with template strings.

let a = 2
let b = 3

String old = "two plus three is : \n" + (a+b)
>> two plus three is :
>> 5
String new = `two plus three is :
              $(a+b)`
>>two plus three is :
>>5

For more info on template strings take a look at this link.

Arrow Functions

Arrow functions are quicker and simpler way to write some of the regular function.

for example for anonymous function

function(e){ 
console.log(e)
return 1
}           
(e) => { // same as above
console.log(e)
return 1
}

named function

const fun1 = function(name){
console.log(`Hello ${name}`)
}
const fun2 = (name) {
console.log(`Hello ${name}`)
}
>>fun1("Jhon")
>>Jhon
>>fun2("Jhon")
>>Jhon

Default argument

Es6 provides default arguments for function. You can set default value of argument and if you pass value of that argument it will be overridden and if you don’t pass default value of that argument, default value will be taken for that argument. Let’s take an example for better understanding.

const add = (a, b=5) =>{
      console.log(a+b);
}
>>add(3,4)
>>7
>>add(3)
>>8

Import and export

Import export are more important where modularity is essential. Usual syntax for import is import module from 'path/to/module' . Similarly, you can also export any module. let’s take an example for more clarification. Suppose there is two files one is sum.js containing method that return sum of two numbers and other is index.js where we want to sum two numbers.

---------------------------sum.js-----------------------------------export default function sum(a,b){
 return a+b
}

---------------------------index.js---------------------------------import sum from './sum' // no need to provide format of file
console.log(sum(4,5))

---------------------------console----------------------------------
>>9

There is lots of things that I have not covered here you can look up here and here for more information on import export.

Class

Classes in JavaScript are nothing but “special functions”. It does not introduce a new object-oriented inheritance model to JavaScript. To quote MDN blog “ classes are primarily syntactical sugar over JavaScript’s existing prototype-based inheritance.” Class gives your code nice structure and keep things neat.

-------------------------Class Declaration-------------------------
class Person{
   constructor(name,age){ 
    this.name = name
    this.gender = gender 
    this.age = age
   }
}

const Jhon = new Person("Jhon Doe", "Male", 30)
console.log(Jhon.age) // 30
Jhon.age = 25
console.log(Jhon.age) // 25

Extend keyword is used for inheritance.

class Animal{
....
}
class Dog extends Animal{
....
}

Promises

Promises are JavaScript ways to execute asynchronous code. Promise takes two arguments resolve and reject to handle scenarios.

const myFirstPromise = new Promise((resolve, reject) => {
  // do something asynchronous which eventually calls either:
  //
  //   resolve(someValue); // fulfilled
  // or
  //   reject("failure reason"); // rejected
});

function myAsyncFunction(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.onload = () => resolve(xhr.responseText);
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send();
  });
}

Here is code-pan example of wait Promise. It waits for 5 second to excute asynchronous code.

That’s All Folks. We have not covered many of the features of ES6 to keep this simple. You can always look up more features of ES6 on MDN blogs.

As usual here is a some random programming humor to cheer up your day.