DEV Community: Kunal Tiwari

JavaScript hoisting

Kunal Tiwari — Tue, 09 Mar 2021 15:20:47 +0000

Consider the below simple code snippet:

console.log(i);  // undefined
var i = 0;

The above code on execution gives undefined as the answer.
Now observe the snippet again, i variable is called before it is initialized. In a normal case, it should give a Reference error (The variable cannot be called before initialization).

But it does not in JavaScript. Why Is it so? If you are confused with the above snippet, then this blog is for you

What is actually happening?

In the above code, var keyword is pushed above the code and initialized automatically by JavaScript (only i variable is pushed above, not the value 0). So at the time of execution of code, it becomes something like this:

var i; // automatically inserted by JS Engine at run time
console.log(i);
var i = 0;

i has been pushed above and initialized by the JS engine, that's why we get undefined at the console line instead of an Error.

When we execute a code in JavaScript, the JS engine moves the variables & functions declarations to the top of the code. This feature or behavior of JavaScript is known as Hoisting in JavaScript.

What about let and const?

As written above, JS moves all the variables and functions at the top of the code, but in the case of var, it initializes it.
This is not the case with let & const.
Consider the below code with let keyword-based variable declaration

console.log(i);
let i = 0;

When the above code is executed, we get something like this:

So in the case of let and const keyword, the JS engine hoists the variable declarations but doesn't initialize them. JS engine is aware of the variable, but it cant be used until it is declared or initialized. Hence the variable comes in the temporal dead zone until it is declared and we get Reference Error.

Hoisting a Function

As written above, functions are also hoisted in JavaScript.

Consider the below code:

let x = 20,
    y = 30;
let total = add(x, y);
console.log(total);  // 50, because of hoisting
function add(a, b) {
  return a + b;
}

In the above code, the output will be 50 as the regular function is also hoisted (moves to the top of the script) in JS.

What if it's a function expression?

Consider the below code:

let x = 20,
    y = 30;
let total = sum(x, y);
console.log(total); // Error
var sum = function (a, b) {
  return a + b;
};

In the above code, we get the following output:

As the function is stored in the variable sum (declared by var keyword), it is hoisted and initialized above (not the function expression, as only variable is pushed above, not the value), and the value of sum gets undefined. Therefore we get sum is not a function as it is undefined.
At the time of execution, the code will be like this:

let x = 20,
  y = 30;
var sum // Automatically inserted by JS engine
let total = sum(x, y);
console.log(total);
var sum = function (a, b) {
  return a + b;
};

Conclusion

JavaScript hoisting occurs in every variable and a function
In hoisting, the variable and functions are pushed above the script or the scope
let and const are hoisted but not initialized, hence they remain in the Temporal dead zone until they are declared
When it is let/const, one should always move the variables declarations to the top of the scope (to avoid temporal dead zone)
Function expressions arent hoisted

var, let & const in JavaScript

Kunal Tiwari — Sat, 27 Feb 2021 06:26:35 +0000

ES2015(ES6) was released long back and one of the features that came with ES6 is the addition of let and const, another way for variable declaration. If you are still not clear about this concept, then this article is for you. We will discuss let, const and var in this blog with respect to their scope and use.

Var

var is a reserved keyword and helps to declare the variables in javascript. Assigning a value using var keyword happens as per the below code (using = operator)

// Setting name to some value 
var name = 'John Doe';

// Initalizing the name variable and set to undefined
var name;

Scope

The scope of the var keyword is limited to the function within which it is defined. If it is defined outside any function, the scope of the var becomes global.

Have a look at the below code:

// This var keyword has a global scope, available globally 
var name = "John Doe";

function dispName() {

  //This var keyword is defined has local/functional scope, avaialble locally 
  var name = "Johny";
  console.log(name); // Johny
}
console.log(name); // John Doe
dispName();

The above code provides a situation where the keyword 'name', is called inside and outside the function. Therefore we can conclude that var is function scoped

Let

let keyword was introduced in JavaScript ES6(ES2015). Nowadays developers prefer let keyword over var keyword, as it's an improvement over the var keyword. It helps us to assign the value or store it to some variable. Consider the below code for the same:

//Assigning value
let name = 'John Doe';
//Initializing b and set it to undefined
let name;

Scope

Anything or any code within a {} braces is a block. Hence let is limited to the block defined by curly braces

var x = 4;
let y = 5;

if (true) {
  var x = 1;
  let y = 2;
  console.log("Block Scope", x, y); // Block Scope 1 2
}
console.log("Global Scope", x, y); // Global Scope 1 5

In the above code, x acts as a global scope, hence its value gets re-assigned to 1 inside block scope and that's why it prints 1 in both console statements.
y acts as a block-scoped variable (defined by let keyword), therefore its value is preserved. Its value is 2 inside the block and 5 outside the block. Because of this reason, developers prefer let over var. Therefore, we can conclude that let is block scoped

Const

ES6 also introduced one more keyword known as const. Variables defined with const variable behaves like the let variables, except they cannot be reassigned

const name = "John Doe";
name = "Johny";
console.log(name);

The above code will throw an error, something similar to this, Hence const cannot be reassigned

NOTE: const doesn't make the variables constant. It defines the constant reference to the value. Therefore we cannot change constant primitive values. But we can change the properties of Objects or values inside an Array. (But it cannot be reassigned to the new Object or Array)

Consider the below code:

const fullDetails = { firstName: "John", lastName: "Doe" };
fullDetails.age = 22;
console.log(fullDetails); // { firstName: 'John', lastName: 'Doe', age: 22 }

// This code will throw error, as const varaibles cannot be reassigned 
fullDetails = { firstName: "Tony", lastName: "Doe" };
console.log(fullDetails); // TypeError here

Scope

Scope of const is same as let i.e. Block scoped (limited to the blocks defined by curly braces {}).

const name = "John";
if (true) {
  console.log(name); // John
  // Scope of age is limited to this block only
  const age = 25;
  console.log(age) // 25
}

// name will be John, but age will be not defined as it is block-scoped variable (Reference Error will occur)
console.log(name, age);

Therefore we can conclude that const is block-scoped and const variable cannot be reassigned to a new value. But it can be mutated

Conclusion

var is functional scope
let & const are BLOCK scope
const is mutable but cannot be reassigned

Copy Objects in JavaScript

Kunal Tiwari — Mon, 01 Feb 2021 18:05:41 +0000

JavaScript is all about Objects. However, working with Objects or using the OOPs approach to your application is still difficult for many. Through this blog, together we are going to learn something useful regarding Copying the Objects in JavaScript

Why to Copy Objects?

JavaScript has two types of data types, Primitive Data type & Reference Data type. Objects are under the reference Data type which means they are accessed by reference (They don't have value, they hold a pointer pointing towards allocated memory). Other reference data type are Array, Functions, Date, etc.

Consider the below JS code, where we have empObj and whose value is assigned to newObj:

const empObj = { Name: 'John Doe', empId: 123, location: 'NewYork' };
const newObj = empObj;

Now suppose we try to change the location for the newObj and print both the objects in terminal, then the modified code will be:

newObj.location = 'Chicago';
console.log(empObj, newObj);

Output will be :

{ Name: 'John Doe', empId: 123, location: 'Chicago' } { Name: 'John Doe', empId: 123, location: 'Chicago' }

So Objects being the reference data type, if we change newObj, empObj also gets changed. Therefore old(original) object is also affected.

What can be done?

To ensure that the original object, in our case empObj is not changed we have to copy an object in javascript instead of assigning it to a new variable.

How to Copy objects in javascript?

For that, we have two widely-used options available for us:

Using spread operator
Using Object.assign()

Spread Operator(...)

ES6 in JavaScript provides a spread operator that lets us create copies of JS objects. Not only objects, but you can even create copies of the array also with the spread operator.

Syntax

Using ... (three dots) inside an object, array, or function call they work as a spread operator.

const newObject = {...oldObject}

This copies the value of oldObject into newObject. Therefore it makes newObject & oldObject points at different locations

Application in our code:

Consider the below-modifed code:

const empObj = { Name: 'John Doe', empId: 123, location: 'NewYork' };
const newObj = { ...empObj };
newObj.location = 'Chicago';
console.log(empObj, newObj);

If we run the above script, we will get the output as

{ Name: 'John Doe', empId: 123, location: 'NewYork' } { Name: 'John Doe', empId: 123, location: 'Chicago' }

Objects.assign()

This assign() method in JavaScript copies all the properties from old object into new object. It returns the newly created object

Syntax

Object.assign(newObject,oldObject)
This copies the value of oldObject into newObject. Therefore it makes newObject & oldObject points at different locations.

Application in our code:

Consider the below-modifed code:

const empObj = { Name: 'John Doe', empId: 123, location: 'NewYork' };
const newObj = Object.assign({}, empObj);
newObj.location = 'Chicago';
console.log(empObj, newObj);

If we run the above script, we will get the output as

{ Name: 'John Doe', empId: 123, location: 'NewYork' } { Name: 'John Doe', empId: 123, location: 'Chicago' }

There is one more way of copying Object (Not discussed in the blog) is using JSON.stringify() and JSON.parse().

These are quite useful techniques for copying the objects in JavaScript. I hope that this blog would be quite helpful to you and solve your queries.