{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/understanding-hoisting-in-javascript/", "result": {"data":{"markdownRemark":{"html":"
\n\n
\n

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of the code.

\n
\n

Note that variable and function declarations are not moved physically to the top of the code. They stay exactly where you typed them in your code. It's the compiler that allocates memory for variable and function declarations prior to the execution of the code.

\n
\n

Also note that only declarations are hoisted. Initializations are not hoisted.

\n

Initialization

\n

Initialization is when we assign a value to a variable.

\n

var hoisting

\n

Note that declarations made using the var keyword are initialized with a default value of undefined.

\n

Below, we are able to access the profession variable (on line 1) before its declaration (on line 4) because of hoisting.

\n
console.log(profession)\n// undefined\n\nvar profession // variable declaration\n\nvar profession = "developer" // variable initialization
\n

In the example below, we have not declared the profession variable. We have directly initialized it with the value developer. Because initializations are not hoisted, console.log(profession) results in ReferenceError: profession is not defined

\n
console.log(profession)\n// ReferenceError: profession is not defined\n\nprofession = "developer"
\n

let & const hoisting

\n

Variables declared using let and const keywords are not initialized with a default value of undefined. Therefore, in the example below, console.log(profession) throws a reference error.

\n
console.log(profession)\n// ReferenceError: cannot access'profession' before initialization\n\nlet profession\n\nprofession = "developer"
\n

Function hoisting

\n

As already discussed, JavaScript puts function declarations into memory before it executes any code segment. This allows us to call a function before we have declared it.

\n

Let’s see this in action using an example:

\n
greeting("World")\n// Hello World\n\nfunction greeting(name) {\n  console.log(`Hello ${name}`)\n}
\n

Function expression hoisting

\n

Function expressions in JavaScript are not hoisted. We can't use function expressions before we create them.

\n
greeting("World")\n// ReferenceError: Cannot access 'greeting' before initialization\n\nconst greeting = name => {\n  console.log(`Hello ${name}`)\n}
\n

The same is true for arrow function expressions. (Arrow function expressions are compact alternatives to traditional function expressions.)

\n","frontmatter":{"title":"Understanding Hoisting in JavaScript","date":"2021-07-28"}}},"pageContext":{"slug":"/understanding-hoisting-in-javascript/","prev":{"fields":{"slug":"/implementing-binary-search-tree-in-javascript/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/backwards-and-forwards-compatibility-in-javascript/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}