The Next Gen JavaScript

VpsOP — Thu, 14 Jan 2021 17:56:59 +0000

The next gen javascript simply refers to ES6 and later versions of javascript. Most common question developers ask before using ES6 is the compatibility of the language with modern browsers. If you take a look at the compatibility chart you'll find that we are totally safe to use ES6 syntax in our code.

Well if you take a closer look to the chart you may find some unsupported/partially supported features but the most popular features of ES6 are supported by all the modern browsers like Chrome, Firefox and Safari.

If you are targeting old browser like IE11 you can still use ES6 syntax with the amazing babel compiler. Babel is called a compiler because it compiles ES6 code to the ES5 so that as long as the browser support ES5 you can use ES6 code without running into any problems.

Why ES6?

The full list of ES6 features can be found here but lets take a look at its most popular features.

The `let` and `const` keywords

These are two new ways of creating variables. Variables created with let keyword are usable only within the scope of the block in which they are created while const keyword can be used to create constant (value which never changes).


function letAndConst() {
    let fruit = "apple";
    if (true) {
        let fruit = "orange";
        console.log(fruit);
    }
    console.log(fruit);
}
letAndConst();

// Output:
// orange
// apple

Arrow functions

The feature which I love the most. It solves the problem of "this keyword" by keeping its context. It also provides us a shorter and cleaner way of defining our functions.

// Single line arrow function
const es6Function = () => console.log("Single line arrow function");

// Multi line arrow function
const es6Function = () => {
    console.log("Multi line");
    console.log("Arrow function");
}

// If there's only single arguement you can omit parantheses

const es6Function = arg1 => {
    console.log(arg1);
}

Classes

ES6 introduces the class keyword so that no need to use prototype inheritance when creating a class.

// ES6
class Animal {
    constructor() { }
    sound() { console.log("Animal Sound"); }
}

class Dog extends Animal {
    sound() {
        super.sound();
    }
}

// ES5

var Animal = function () { };
Animal.prototype.sound = function () { };

Array/Object destructuring

Another lovely syntax which makes life so much easier

//ES5
var firstName = person.firstName;
var lastName = person.lastName;
var age = person.age;

console.log(firstName, lastName, age);

//Output:
// John Doe 27


// ES6

var { firstName, lastName, age } = person;
console.log(firstName, lastName, age);
//Output:
// John Doe 27

The Spread Opreator (`...`)

Another syntax to help you write less and fast code


const numbers = [1, 2, 3, 4]
const newNumbers = [...numbers, 5, 6, 7]

console.log(newNumbers);

//Output:
// [1, 2, 3, 4, 5, 6, 7]

Exports

This feature helps us write modular code. Modular code means javascript files which can be accessed by other javascript files. We get two types of exports here.

The default export
The targeted export

The default exports the whole javascript file as default

const roundNumber = num => Math.round(num);

export default roundNumber;

// In another file we can say that 

import anything from "./relativePathToTheFile";

The targeted export exports the specific functions or variables from a javascript file.

// Targeted Export
const roundNumber = num => Math.round(num);
var name = "John"
const double = (number) => {
    return number * 2;
}

export const language = "JavaScript";

// In another file we can say 

import language from "./relativePathToTheFile";
// Remember to use the same name 
//you used while exporting the constant

Conclusion

I will strongly recommend the use of ES6 syntax in personal and professional projects because:

Less Code to write
Easily readable and maintainable
Faster

The features mentioned above are some of most popular features. You should visit ES6 Features and you can find all the awesome features of ES6.

This is first time in my life writing a post so sorry for any mistakes.
Suggestion are always welcome ❤.

DEV Community: VpsOP