JavaScript Memory Hoisting

JavaScript memory hoisting

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution

So, The memory hoisting is a feature of javascript and first of all, I want you to focus on the two words Memory Hoisting.

• Hoisting — it means to lift up like a crane or if you wanted to change the engine in your car, you need to hoist the engine out of the car so that you can put the new one in. So hoisting just means to lift up.
• Memory — What we think of when we think of memory while we think of potentially symbol names. Names that refer to values that are stored in memory and these symbol names reference some point to certain values that are in memory

Difference between undefined and ReferanceError

So, what will be the output of this following line?

console.log(name); 
var name = 'Gourav';

1. undefined
2. Gourav
3. Uncaught ReferanceError: name is not defined

The correct answer is => undefined

• In JavaScript, an undeclared variable is assigned the value undefined at execution and is also of type undefined.

console.log(typeof variable); // Output: undefined

• In JavaScript, a ReferenceError is thrown when trying to access a previously undeclared variable.

console.log(variable); // Output: ReferenceError: variable is not defined

Hoisting Variables

The following is the sequence in which variable declaration and initialization occur.

JavaScript variable lifecycle

As we know, JavaScript allows us to both declare and initialize our variables simultaneously, this is the most used pattern:

var a = 100;

Note: Always remember that in the background the Javascript is first declaring the variable and then initializing them. It is also good to know that variable declarations are processed before any code is executed.

Get Gourav More’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

In javaScript, undeclared variables do not exist until code assigning them is executed. Therefore, assigning a value to an undeclared variable implicitly creates it as a global variable when the assignment is executed. This means that all undeclared variables are global variables.

To understand this behavior, have a look at the following code:

function hoist() {
  a = 20;
  var b = 100;
}

hoist();

console.log(a); // output: 20

console.log(b); // Output: ReferenceError: b is not defined

• var a is accessible as a global variable outside hoist() function — so the output is 20
• Since var b was declared, it is confined to the hoist() function scope. We cant print it out outside of the hoist() function. — so the output is — ReferenceError: b is not defined

Strict Mode

Strict Mode is a new feature in ECMAScript 5 that allows you to place a program, or a function, in a “strict” operating context. This strict context prevents certain actions from being taken and throws more exceptions. The statement “use strict”; instructs the browser to use the Strict mode, which is a reduced and safer feature set of JavaScript.

In strict mode, we can be more careful about how we declare our variables. By enabling this, we choose a restricted variant of JavaScript that will not tolerate the usage of variables before they are declared.

How to use strict mode

Strict mode can be used in two ways — used in global scope for the entire script and can be applied to individual functions. Strict mode doesn’t work with block statements enclosed in {} braces.

Using Strict mode for the entire script

To invoke strict mode for a function — put the exact statement “use strict”; (or ‘use strict’;) in the function’s body before any other statements.

Examples of using Strict mode

• In normal JavaScript, mistyping a variable name creates a new global variable. In strict mode, this will throw an error, making it impossible to accidentally create a global variable
• Using strict mode, don’t allow to use a variable without declaring it

‘use strict’;
x = 3.14; // will throw a referance error

The output of this above code is — it will give an error. Using a variable, without declaring it, is not allowed in strict mode.

Conclusion

1. We should make it a habit to declare and initialize JavaScript variables before use.
2. Using strict mode in JavaScript es5 can help expose undeclared variables.