Curious about scope of variables? Wanna understand how actually JS variables work? You must read this blog.
Variable Scope
A variable’s scope is the context in which the variable exists. The scope specifies from where you can access a variable and whether you have access to the variable in that context.
Instead of block-level scope, JS has the function-level scope. What does this mean exactly? let’s go through an example of No block-level scope
1 2 3 4 5 |
var codeWrittenBy = "Shubham"; if (codeWrittenBy) { codeWrittenBy = "Mehrotra"; } console.log(codeWrittenBy); // Mehrotra |
as ( if
statement ) has block-level scope so it has access to the global variable and will override codeWrittenBy
variable.
function-level scope
1 2 3 4 5 6 |
var codeWrittenBy = "Shubham"; (function changeName() { var codeWrittenBy = "Mehrotra"; // local variable; only accessible in this changeName function console.log(codeWrittenBy); // Mehrotra })() console.log(codeWrittenBy); // Shubham |
Here, the function changeName
has its own scope and you can create a local variable with the same name. Moreover, if you are not making this variable local then this variable will access to the global variable. see below:-
Note:- As function
is a self-invoking function, so we don’t need to call it. Get more knowledge about the self-invoking functions here.changeName
1 2 3 4 5 6 |
var codeWrittenBy = "Shubham"; (function changeName() { codeWrittenBy = "Mehrotra"; // global variable; accessible in this changeName function console.log(codeWrittenBy); // Mehrotra })() console.log(codeWrittenBy); // Mehrotra |
We should always define the scope of the variables and try to access the local ones. We must try to write functions that may not affect the value of global variables.
Variable Hoisting
All the variables in javascript are hoisted to the top of the function, let’s understand with the help of an example.
1 2 3 4 5 |
(function() { console.log(`company:- ${company}`); // name:- undefined var company = "WEBKUL"; console.log(`company:- ${company}`); // name:- WEBKUL })() |
This is because the declaration of the variable name
was done on the top of the function and assigned to the value undefined therefore we are getting undefined as the result of the first console.log
NOTE:- The syntax I have used for string concatenation inside the console.log
is known as template literal. Explore more on template literals here.
functions in JS are hoisted too but there is a difference, functions have their definition but variable have the default value (undefined). That’s why we are able to call any function before their declaration.
1 2 3 4 5 |
showName(); function showName () { console.log(`Shubham Mehrotra`); } // Shubham Mehrotra |
NOTE:- You should try to use anonymous functions most of the time instead of the named functions.
As a result, you will call the function’s definition into the memory when it is actually needed.
1 2 3 4 5 6 7 8 9 10 11 |
// Anonymous function anonFunc(); // Exception:- showName is not a function var anonFunc = function () { console.log("anon. function"); } // Named function namedFunc(); // named function function namedFunc() { console.log("named function"); } |
Thanks for reading me. I hope this blog would help you with a better understanding of the JS variable’s scope and hoisting. Please share your reviews on this, which will support me to write more.
Until next time. 👋
Be the first to comment.