New Syntax in Javascript ES6

The new features introduced in ECMAScript 6 represent the foundation upon which JavaScript applications will be built in the future. In this chapter we will take a look at the changes and new additions to the ES6 syntax that help in fixing a lot of things that went wrong with the previous versions of JavaScript. We will discuss in detail about new ways of declaring variables and defining scope. We will also introduce new concepts like arrow functions, default function parameters, spread and rest operators, and object literal extensions

ES-6

var Declarations and Hoisting

Variable declarations using var are treated as if they’re at the top of the function (or in the global scope, if declared outside of a function) regardless of where the actual declaration occurs; this is called hoisting. For a demonstration of what hoisting does, consider the following function definition:

function getValue(condition) {
if (condition) {
var value = "blue";
// other code
return value;
} else {
// value exists here with a value of undefined
return null;
}
// value exists here with a value of undefined
}

If you are unfamiliar with JavaScript, you might expect the variable value to be created only if condition evaluates to true. In fact, the variable value is created regardless. Behind the scenes, the JavaScript engine changes the getValue function to look like this:

function getValue(condition) {
var value;
if (condition) {
value = "blue";
// other code
return value;
} else {
return null;
}
}

let Declarations

The let declaration syntax is the same as the syntax for var. You can basically replace var with let to declare a variable but limit the variable’s scope to only the current code block (there are a few other subtle differences, Because let declarations are not hoisted to the top of the enclosing block, it’s best to place let declarations first in the block so they’re available to the entire block. Here’s an example:

function getValue(condition) {
if (condition) {
let value = "blue";
// other code
return value;
} else {
// value doesn't exist here
return null;
} // value doesn't exist here }

const Declarations

You can also define bindings in ECMAScript 6 with the const declaration syntax. Bindings declared using const are considered constants, meaning their values cannot be changed once set. For this reason, every const binding must be initialized on declaration, as shown in this example:

// valid constant
const maxItems = 30;
// syntax error: missing initialization
const name;

Constants vs. let Declarations

Constants, like let declarations, are block-level declarations. That means constants are no longer accessible once execution flows out of the block in which they were declared, and declarations are not hoisted, as demonstrated in this example:

if (condition) {
const maxItems = 5;
// more code
} // maxItems isn't accessible here

In this code, the constant maxItems is declared within an if statement. After the statement finishes executing, maxItems is not accessible outside that block.

In another similarity to let, a const declaration throws an error when made with an identifier for an already defined variable in the same scope. It doesn’t matter whether that variable was declared using var (for global or function scope) or let (for block scope). For example, consider this code:

Arrow Functions

One of the most interesting new parts of ECMAScript 6 is the arrow function. Arrow functions are, as the name suggests, functions defined with a new syntax that uses an arrow (=>). But arrow functions behave differently than traditional JavaScript functions in a number of important ways:

No this, super, arguments, and new.target bindings The values of this, super, arguments, and new.target inside the function are defined by the closest containing non-arrow function.

Cannot be called with new Arrow functions do not have a [[Construct]] method and therefore cannot be used as constructors. Arrow functions throw an error when used with new.

No prototype Because you can’t use new on an arrow function, there’s no need for a prototype. The prototype property of an arrow function doesn’t exist.

Can’t change this The value of this inside the function can’t be changed. It remains the same throughout the entire life cycle of the function.

No arguments object Because arrow functions have no arguments binding, you must rely on named and rest parameters to access function arguments.

No duplicate named parameters Arrow functions cannot have duplicate named parameters in strict or non-strict mode, as opposed to nonarrow functions, which cannot have duplicate named parameters only in strict mode.

Arrow Function Syntax

The syntax for arrow functions comes in many flavors depending on what you’re trying to accomplish. All variations begin with function arguments, followed by the arrow, followed by the body of the function. The arguments and the body can take different forms depending on usage. For example, the following arrow function takes a single argument and simply returns it:

let reflect = value => value;
// effectively equivalent to:
let reflect = function(value) {
return value; };
ES5 vs. ES6 Functions

ES5

Normal function Method Constructor
function function on prototype function

ES6

function or arrow function method in class constructor in class

Classes

  • Use class keyword
  • Define constructor and methods inside
    one constructor function per class
  • Really just sugar over existing prototypal inheritance mechanism
    creates a constructor function with same name as class adds methods to prototype
  • Code in class definition is always evaluated in strict mode

Some of other changes in ES6 given below:

  • Getters and Setters
  • New Math Functions
  • New Number Functions
  • Numeric Literals
  • New String Methods
  • New Array Functions
  • New Array Methods
  • for-of Loops