SCOPE IT IN JAVASCRIPT
Have you heard about Scope in Javascript
If you are experienced JS Developer you probably had and this blog might not be for you, but you are welcome to read it.
Javascript has this awesome feature called Scope, now don't get scared it's as easy as eating a scope of icecream. I will try to explain scope as best as i can.
Get the defination out of the way
Scope is the accessibility of variables, functions, and objects in some particular part of your code during runtime. In other words, scope determines the visibility of variables and other resources in areas of your code.
why care about scope at all?
- it improves efficiency
- helps in tracking bugs and reduce them
- solves naming problems
Scope in Javascript
There are two types of scope in JS.
- Global Scope
- Local Scope
Global Scope
If you have atleast written a simple program in vanilla JS, you have already used a variable of global scope, the one provided by the browser itself.
YES, you guessed it right -> document variable
the document variable is already provided by the browser and your program can use it directly.
Lets declare our own global variable
// the scope is by default global
let language = "javascript";
There you go, as easy as that. Now the variable language is visible throught the code in this file. variables of the global state can be accessed and modified in any other scope
let language = "javascript";
console.log(language);
function changeFunction(otherLanguage) {
console.log(language);
// language is a global variable which can be accessed from within this function
language = otherLanguage;
// global variables can be modified from any other scope
}
changeFunction("c");
Local Scope
Variables defined inside a function are in the local scope. A new different scope is provided for every function call.
function sayHello() {
var name = "rohit";
console.log(name);
}
sayHello();
console.log(name)
// error name is not visible outside the function sayHello.
Block Statements
what are block statements?
block statements are statements like if, switch, for, while and these don't create a new scope. Variables defined inside a block scope will remain in the scope they were already in.
if(true) {
var language = "javascript";
}
console.log(language);
// prints 'javascript'
// there is no error
Wait! theres a catch
in the new javascript (ES6)
let and const were introduced which are block scoped.
you can declare variables like
const name = "rohit";
let age = "20";
Keep in mind let and const are bock scoped while var is function scoped
if (true) {
var language1 = "js";
// language1 is of global scope.
let language2 = "c";
// language2 is local to this block
const language3 = 'c++';
// language3 is local to this block
}
console.log(language1);
// prints js
console.log(language2);
// error because language2 is not visible outside the if block
console.log(language3);
// error because language3 is not visible outside the if block
Global scope lives as long as the application is running. Local Scope lives as long as the function in which it is declared in being executed.
Context
If you are somewhat experienced in JS, The question difference between scope and context might have crossed your mind
To clear out the wind Scope and Context are different things
We discussed scope in the above section, and Context is used to refer to the value of this in some particular part of your code.
There are functions you can call to change the value of this, we will take about it later
ever tried console logging this outside any function.
outside any function (in global scope) this is always the Window Object
console.log(this);
function someFunction() {
console.log(this);
}
someFunction()
the value of this changes according to the context from where it is reffered.
class Car {
logBrand() {
console.log(this);
}
}
let bmw = new Car;
bmw.logBrand();
// prints Car { }
If the scope from where this is called is in the method of an object, then context will be the object the method is part of.