The Next Gen JavaScript
Tags: javascript, webdev
Published: 2021-01-14 17:56:59

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](https://kangax.github.io/compat-table/es6/) 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](https://babeljs.io) 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](http://es6-features.org/#Constants) 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).

```javascript

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.

```javascript
// 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.

```javascript
// 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

```javascript
//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

```javascript

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 

```javascript 
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.

```javascript
// 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](http://es6-features.org/#Constants) 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 ❤.