Get started with Next-Gen Javascript

Get started with Next-Gen Javascript

In this post, I will wrap up the main features of ES6 that you can start using today, while you’re sure it’s supported by all modern* browsers ( notice the * on browsers)

In this post, I will wrap up the main features of ES6 that you can start using today, while you’re sure it’s supported by all modern* browsers ( notice the * on browsers)

Maybe you’re here to have a general idea about what’s going on with JavaScript, or you are a JS developer and you’re moving on smoothly with ES6.

First things first, forget “var” start using “let” and “const”

let keyword allows you to define variables considering the block scope.

const myFunction = () => {
    let myLet = 10
    if(true) {
        let  myLet = 20
        console.log(myLet)
    }
    console.log(myLet)
}
myFunction()
// 20
// 10

const keyword acts like final keyword in Java. It means that the variable that is defined as const will not and cannot (an error will be thrown) be changed again in the entire code.

const myConst = 'I\'m not gonna change'

But listen, you still can use ‘var’ to declare global variables

Arrow Functions

Arrow functions are usually used in anonymous functions where you don’t really care about ‘this’ or you want to use the upper context’s one

Arrow functions don’t have their own *this* Single line arrow function ( You should return one statement)

const myFunc = () => console.log('My Function')

Multiline arrow function:

const myFunc = () => { //Your Function body }

Single argument arrow function

const myFunc = arg => { // your func body}

and you may use the () if you have more than one:

const add = (n1, n2) => n1 + n2

Export and Import

When you write code in multiple files, you’ll have to import the function/functions written in one file to another. That’s where you need this.

Export

If you want to expose a single function from your file you can use the default export as given below

export default myfunc

But when you have multiple functions you may use the below syntax. We call this as a named export

export const func1
export const func2

Import

if you are using the default export as given above, you may use the below syntax

import myfunc from './somefile'
import person from './somefile'

If you are importing multiple functions you can use the below syntax

import { func1 } from './somefile'
import { func1, func2 } from './somefile'
import { func1 as f1, func2 as f2 } from './somefile'

Or you can import all at one and use them as below

import * as myFunctionPool from './somefile'
// call seperate functions as 
myFunctionPool.func1()
myFunctionPool.func2()

Classes

Classes are blueprints for objects. They can have both properties and methods.

class Planet {
    constructor(){
        this.name = 'Earth'
        this.age = 2300
    }
    getName() { console.log(this.name) }
}
const earth = new Planet()
earth.getName()Spread and Rest Operators

Classes support inheritance ( I know prototype inheritance is a pain in the a**)

class SolarSystem {
    constructor(){
        this.galaxy = 'Milky way'
    }
    getGalaxy() { console.log(this.galaxy)}
}
class Planet extends SolarSystem{
    constructor(){
        super() // Have to call the super class in derived class    which executes the parent constructor
        this.name = 'Earth'
        this.age = 2300
    }
    getName() { console.log(this.name) }
}
const earth = new Planet()
earth.getName()
earth.getGalaxy()

In ES7 you can skip the constructor function call and directly devrieve the properties within the class. Also you dont have to call the constructor of the superclass using super().

class Water {
    ph = 6.97
    o2 = 22
}

Rest and Spread operators

Rest and spread are denoted only by using 3 consecutive dots (…)

... // This is basically the spread and rest operator
  • Spread — Used to split up array or object properties to make new arrays or objects
  • Rest — Used to aggregate multiple arguments of a function to an array

    Spread operator uses

let myArr = [1,2,3]
let myNewArray = [...myArr, 4, 5]
console.log(myNewArray) // [ 1, 2, 3, 4, 5 ]

The spread operator also can be used with objects

const leaf = {
    color:'green',
}
const tree = {
    ...leaf,
    leaves: 23,
}
console.log(tree)

Rest operator uses

function arguments(...args) {
    for(let arg of args){
        console.log(arg)
    }
}
arguments(1,2,3,4,5,6)

Here the arguments we pass to the function will be a push to an array which can be accessed using the index

Destructuring

Used to extract properties or elements from objects and arrays respectively.

In arrays, the order of the elements define the object we extract and in objects, the property name defines what we extract

const { name, age } = { name: 'me', age:22 }
console.log(name) // me

You can also rename your variables after destructuring if you don’t like the old ones from your destructed object:

const { name: nominativo } = { name: 'me', age:22 }
console.log(nominativo) // me

For arrays

[x,,z] = [1, 2, 3]
console.log(x) // 1
console.log(z) //3

Stay tuned for more on the new features of ES6.

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

JavaScript ES6 Classes

An exciting new construct that was introduced in the ES6 specification is the ES6 classes. If you're a Javascript developer, you will be aware that Javascript follows prototypal inheritance and sometimes it can get a little messy. However, with ES6 classes the syntax is simpler and much more intuitive.

Linked Lists in JavaScript With ES6

Linked Lists in JavaScript with ES6.This series is about data structure implementation in JavaScript using the ES6 specification.. Let's see how to make a singly linked list in Javascript… ... list in Javascript. We'll be using ES6 syntax throughout.

An Introduction to JavaScript ES6 Proxies

Proxy is one of the most overlooked concepts introduced in ES6 version of JavaScript, but ES6 proxies bound to come in handy at some point in your future.