Mastering ES6 - Introduction

Introduction

ECMAScript 6 (also known as ES2015) is an standard which is JavaScript is based of. It has many features that changed JavaScript forever. Today, in this blog post we are going to start a blog series on Mastering ES6 Features in JavaScript. Now, we are covering through let and const keyword.

What are let and const?
let and const are keywords that are used to declare variables. If you are familiar with JavaScript, then you may think that how is let and const different form var?

The main difference is that var is function scoped, whereas let and const are block scoped. Let us dive into some major differences between var, let and const:

Scope:

var: Variables declared with var are function-scoped. This means they are accessible throughout the function in which they are declared, regardless of block boundaries. If declared outside of any function, they become global variables.

let and const: Variables declared with let and const are block-scoped. They are only accessible within the block (enclosed by curly braces) in which they are declared. This helps prevent variable leakage and unintended behaviour.

if (true) {
    var varVariable = 1; // Function-scoped
    let letVariable = 2; // Block-scoped
  }
  console.log(varVariable); // 1 (accessible)
  console.log(letVariable); // Error: letVariable is not defined (block-scoped)

Hoisting:

var: Variables declared with var are hoisted to the top of their containing function or global scope. While the variable declaration is moved to the top, the initialization remains in place. This can lead to unexpected behaviour.

let and const: Variables declared with let and const are also hoisted but remain in the "temporal dead zone" (TDZ) until their declaration is reached in the code. Accessing them before declaration results in a ReferenceError.

console.log(varVariable); // undefined (hoisted)
  console.log(letVariable); // Error: Cannot access 'letVariable' before initialization (TDZ)
  var varVariable = 1;
  let letVariable = 2;

Reassignment:

var: Variables declared with var can be reassigned any number of times within their scope.

let and const: Variables declared with let can be reassigned, while variables declared with const cannot be reassigned after their initial value is set.

varVar = 1; // Valid (reassignment)
  letVar = 2; // Valid (reassignment)
  constVar = 3; // Error: Assignment to constant variable
Declaration Without Initialization:

var: You can declare a var variable without initializing it, and it will be undefined until assigned a value.

let and const: Both let and const require initialization at the time of declaration. You cannot declare them without assigning a value.

var varVar; // undefined
  let letVar; // Error: Missing initializer in const declaration
  const constVar; // Error: Missing initializer in const declaration
Global Object Property:

var: Variables declared with var at the global scope become properties of the global object (e.g., window in browsers).

let and const: Variables declared with let and const at the global scope do not become properties of the global object. They remain within the global scope but do not clutter the global object.

var globalVar = 1; // Added as window.globalVar
  let globalLet = 2; // Not added to the global object
  const globalConst = 3; /* Not added to the global object
In summary, let and const provide block scope, better control over variable declaration and initialization, and prevent accidental global scope pollution. var, on the other hand, has function scope, is prone to hoisting-related issues, and can lead to unexpected behaviour. It's generally recommended to use let and const over var in modern JavaScript for more predictable and maintainable code.*/

Conclusion

In this blog post, we have learnt:

• What is ES6?
• A Short Introduction of let and const.
• In-depth Comparison between var, let and const.