JavaScript ES6 brings new syntax and amazing features to make the users code more up-to-date and readable. It allows the user to write less code and do more. ES6 introduces the user to many great features like arrow functions, template strings, class destruction, Modules, and much more. So, let’s dive deep in and study the new features on JavaScript ES6.

CONST & LET

Const is a new keyword in ES6 for declaring variables. const is more influential than var. Once it is used, the variable cannot be reassigned. In other words, it is an immutable variable except when it used with objects. This is really useful for targeting the selectors.

const a = 50;
a = 60; // shows error. You cannot change the value of const.
const b = “Constant variable”;
b = “Assigning new value”; // shows error.

LET

Let is similar to var but let has scope. Let is only accessible in the block level it is defined.

if (true) {
let a = 40;
console.log(a); //40
}
console.log(a); // undefined
In the above example variable ‘a’ is defined inside If statement and so it’s not accessible outside the function.

ARROW FUNCTIONS

The arrow function makes the users code more readable, more structured, and look like modern code.

// Old Syntax
function oldOne() {
console.log(“Hello World..!”);
}
// New Syntax
var newOne = () => {
console.log(“Hello World..!”);
}
The new syntax may be confusing a bit.
There are two parts of the syntax.
var newOne = ()
=> {}

The first part is declaring a variable and assigning the function () to it.
The second part is declaring the body part of the function. The arrow part with the curly braces defines the body part.

DEFAULT PARAMETERS

If you are familiar with other programming languages such as Ruby, Python then default parameters is not new to you.

Default parameters are parameters which are given by default while declaring a function. But the value can be changed when calling the function.

let Func = (a, b = 10) => {
return a + b;
}
Func(20); // 20 + 10 = 30

In the above example, we are passing only one parameter. The function makes use of the default parameter and executes the function.

MAPS

Map holds key-value pairs, it is similar to an array but we can define our own index and indexes are unique in maps. In maps, all indexes are unique and we can use any value as key or value.

var NewMap = new Map();
NewMap.set(‘name’, ‘John’);
NewMap.set(‘id’, 2345796);
NewMap.set(‘interest’, [‘js’, ‘ruby’, ‘python’]);
NewMap.get(‘name’); // John
NewMap.get(‘id’); // 2345796
NewMap.get(‘interest’); // [‘js’, ‘ruby’, ‘python’]

GETTERS AND SETTERS

Getters and setters are one of the useful feature introduced in ES6. It will come in handy if you are using classes in JS.

class People {
constructor(name) {
this.name = name;
}
getName() {
return this.name;
}
setName(name) {
this.name = name;
}
}
let person = new People(“Jon Snow”);
console.log(person.getName());
person.setName(“Dany”);
console.log(person.getName());
Output:
Jon Snow
Dany

The post JAVASCRIPT ES6 appeared first on Pro-Tek Blog.

Pros

ES5:

You have a lot of browser support.

ES6:

You have tail call optimization.
You have import statements.
Lamba’s are pretty amazing.
Immutable and block scoping objects with “const” and “let”.
Classes and OO Inheritance.
Functors, and all that functional goodness.
String templates that handle interpolation for you.

Cons

ES5:

It doesn’t have everything that ES6 has.

ES6:

It doesn’t have all the support that ES5 has, but you can always transpile your ES6 code.

The post WHAT ARE THE PROS AND CONS OF USING JAVASCRIPT ES5 VERSUS ES6? appeared first on Pro-Tek Blog.