A Comprehensive Guide to JavaScript - Part 1 - ES6

JavaScript is an amazing programming language for the Web. JavaScript can execute on the browser, the server, or any device for that purpose which has a javascript engine(Chrome - V8 Engine, Firefox - SpiderMonkey). This engine parses the script, compiles it and runs the machine code really fast. JavaScript has many characteristics such as being dynamic, single-threaded, prototype-based, lightweight, interpreted, object-oriented and both imperative as well as declarative.
ECMAScript is the scripting language that forms the foundations of JavaScript. ES6 or ES2015 or JavaScript 6 was the major advancement to this language which adds many features and adds significantly new syntax for writing complex applications to make development easier.

Features of ES6

If you are new to javascript it is essential to learn these features to enhance your productivity. Features of ES6 include:

• let and const variables: These introduced a new scope feature to javascript called Block Scope in addition to Global and Function Scopes. The main difference between the var and let is that var can't have block scope whereas let can have block scope.

var a = 5; // a is 5
{
    let a = 10; // a is 10
}
// a is 5 again

const helps in declaring a value only once per scope.

var a = 5; // a is 5
{
    const a = 10; // a is 10
}
// a is 5

• Arrow Functions: These are probably the most important feature of javascript introduced by ES6. They are similar to regular functions but have simpler syntax.

var increment = inc => inc+1; // increment is the function name which takes one parameter called inc and returns inc+1
increment(3); // returns 4

• Default Parameter Values: ES6 introduced the concept of declaring the function parameters with default values.

var x = (a, b=2) => a+b; // b has default value of 2
x(3); // returns 5

• JavaScript Classes: ES6 introduced a more formal class definition and intuitive object oriented concepts in javascript.

class Student {
    constructor(name) {
    this.StudentName = name;
    }
}

• String Templating: This feature allows to involve variables and expressions among string. The syntax is provided below:

const name= "Prajwal";
const hi = `Hi ${name}`; // returns "Hi Prajwal"

These are some of the most important features of ES6 that one must understand before deep diving into javascript.

Thank You!

Comments

[Mohammed Farmaan.]

Great post. Can you tell how can I get colored the colored syntax? I've tried using codeblock but it's like plain text.

[Prajwal]

Thank You! Try using VS Code and install an extension called 'Babel JavaScript' or 'ES7 React/Redux/GraphQL/React-Native snippets'. This must give you the coloured syntax.

[Mohammed Farmaan.]

I mean here, while writing a post on dev.to, after including code in here, it shows uncolored syntax. But how did you get colored one? Which tags did you use to include the code?

[Prajwal]

Oh sorry about that. Just before your code starts use triple backticks and then mention the language of the code being used. Finally when the code ends, again use triple backticks.

To get complete details check out: github.com/adam-p/markdown-here

[Mohammed Farmaan.]

Thanks. I got it.😁

[Prajwal]

Your welcome!😊