DEV Community

Cover image for A Comprehensive Guide to JavaScript - Part 1 - ES6
Prajwal
Prajwal

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • JavaScript Classes: ES6 introduced a more formal class definition and intuitive object oriented concepts in javascript.
class Student {
    constructor(name) {
    this.StudentName = name;
    }
}
Enter fullscreen mode Exit fullscreen mode
  • 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"
Enter fullscreen mode Exit fullscreen mode

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

Thank You!

Top comments (6)

Collapse
 
zxcodes profile image
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.

Collapse
 
kgprajwal profile image
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.

Collapse
 
zxcodes profile image
Mohammed Farmaan. • Edited

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?

Thread Thread
 
kgprajwal profile image
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

Thread Thread
 
zxcodes profile image
Mohammed Farmaan.

Thanks. I got it.😁

Thread Thread
 
kgprajwal profile image
Prajwal

Your welcome!😊