This content originally appeared on DEV Community and was authored by Lawanu Borthakur
Scope is one of the fundamental concept that every JavaScript developer should know to become a better JavaScript Developer.
So, in the article I will explain about it and how it work in JavaScript.
What is Scope?
Scope determines where a variable is visible in JavaScript .In JavaScript functions and objects are also variable.
How many types of scopes are there?
- Local Scope
- Global Scope
- Block Scope
Three main points to keep in mind
- A variable is said to be in local scope when it is defined inside a function.
- A variable is said to be in global scope when it is defined outside a function.
- A new scope is created each time a function is invoked.
Global Scope
When we first write JavaScript on a JavaScript file, you are already in Global scope. There is only one global scope in the entire JavaScript document. Variables are in the Global scope when defined outside of a function.
var name = 'Mike';
The value of the variables within the Global scope can be accessed and changed in any other scopes.
var name = 'Mike';
function Teacher(){
console.log("Inside Function before change -> name:", name);
name = 'Harry';
console.log("Inside Function after change-> name: ", name);
}
Teacher();
console.log("Outside function-> ", language);
Output:
Inside Function before change -> name: Mike
Inside Function after change-> name: Harry
Local Scope
Local Scope is also known as Function scope. Variables defined within a function is in local scope. This means that variables with the same name can be used for different functions. This is because those variables are bound to their respective functions, each with different scope, and is not accessible to the other functions.
var name = 'Mike';
function Teacher() {
var name = 'John'
console.log("Inside Function Teacher()-> name:", name); //Output: John
function Student() {
var name = 'Harry'
console.log("Inside Function Student()-> name:", name); // Output: Harry
}
Student();
}
Teacher();
console.log("Outside Function-> name:", name); //Output: Mike
Output:
Inside Function Teacher()-> name: John
Inside Function Student()-> name: Harry
Outside Function-> name: Mike
Block Scope
Block Scope determines the visibility of variables in a block of code. If a variable is declared inside a block can only be accessed inside the block and not outside the block then that variable is said to be block scope.
Think of the "block" of code as if statement, loop, while loop, etc.
var keyword does not support block scope. In the year 2015 , ES6 introduced two important keyword let and const which support block scope.
if (true) {
var name = 'Mike';
const name1 = 'John';
let name2 = 'Harry';
console.log("===Inside Block===")
console.log(name); // Output: Mike
console.log(name1); // Output: John
console.log(name2); // Output: Harry
}
console.log("===Outside Block===")
console.log(name); // Output: Mike
console.log(name1); // Output: ReferenceError
console.log(name2); // Output: ReferenceError
Output:
===Inside Block===
Mike
John
Harry
===Outside Block===
Mike
Reference error
Reference error
In the above example you can see all the variable are accessible inside the block but only the variable with var keyword is accessible outside the block and the variables with keyword let and const shows error.
This content originally appeared on DEV Community and was authored by Lawanu Borthakur
Lawanu Borthakur | Sciencx (2022-01-09T18:33:19+00:00) What Scope says about Variable in JavaScript?. Retrieved from https://www.scien.cx/2022/01/09/what-scope-says-about-variable-in-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.