Deeper look into ES6 new syntax and their behaviors

08 May 2021 2 mins

Here are few behaviors of ES6 syntax that might be useful.

Redeclaring the same variable within the block scope raise a Syntax Error in the case of let variable.

  if(true){
    let x = 10;
    let x = 20;
    console.log(x)'
  }

Syntax Error: Identifer 'X' has already been declared.


Variables declared with var starts with the value of undefined while let variables are not initialized until their definition is evaluated, and accessing the variable before initialization results in a ReferenceError.

function someUsefulFunction(){
  console.log(x);  // logs undefined
  console.log(y);
  var x = 1;
  let y =2;
}

someUsefulFunction();

// ReferenceError: y is not define.

Arrow function do not have their own this and the value of this depends on the lexical scope on which the function was define.

'use strict';

var x = {
 a: function(){ console.log(this)},
 b:()=>{console.log(this)}
}

x.a();  // logs window object
x.b(); // logs object x


Arrow function do not have its own binding to the this, arguments super or new.target keywords.

As arrow function do not have their own this, the methods call() or apply() can only pass in parameters and thisArg is ignored,

var x = {
  a:1,
  b: (y)=>{console.log(y+this.x)}
}

var a = 4;
a.b.call({a:2}, 1) //logs 5

Prints 5 as this is not bound via call instead the arrow function gets the this from the lexical scope.


Some important one-liner also :

  • typeof NaN is number

  • typeof null is ‘object’

  • typeof [] is ‘object’

  • typeof typeof NaN is string

  • ~~ is a double NOT bitwise operator and it is used as a faster substitute for Math.floor()

  • Javascript for...in is designed to iterate over the properties of an object . for..in loop should be used to iterate arrays because for..in usually slower than a standard for implementation for arrays.