What is Scope?
Scope determines the accessibility or visibility of variables to JavaScript. There are three types of scope in JavaScript:
- Global scope
- Function (local) scope
- Block scope (new with ES6)
Variables declared outside a function are in the global scope. Global variables can be accessed and changed in any other scope. Variables defined within a function are in local scope and are not accessible in other functions. Each function, when invoked, creates a new scope, therefore variables with the same name can be used in different functions.
Block scope includes if statements and loops, or any other code wrapped in {}. When invoked, they don’t create a new scope. Variables declared inside a block scope will remain in the scope they were already in
let
Let statement is block-scoped and not a Global scope local variable used for initializing a statement. This statement can be used in function as it is function-scoped and one of the main character of let statement is that it can be reassigned.
var
Var statement is also used for variable declaration and it is Global scoped variable. Variable declared with var is defined throughout the program.Var is defined throughout the function but not if its declared in a block as it is not block-scoped.Var statement can be reassigned.
const
Const is quite similar to Let with the only difference that once the variable has been defined then its value cannot be changed. Like if the user tries to change the value of the const variable, then they will get an error.
Since const is block-scoped, this means that anything you try to do with a const variable can only be used within the block of code where you initially wrote it.
As a general rule, you should always declare variables with const, if you realize that the value of the variable needs to change, go back and change it to let.
Also Read: Difference Between Global And Local Variable
var vs let vs const
| var | let | const |
| The scope of a var variable is functional scope. | The scope of a let variable is block scope. | The scope of a const variable is block scope. |
| It can be updated and re-declared into the scope. | It can be updated but cannot be re-declared into the scope. | It cannot be updated or re-declared into the scope. |
| It can be declared without initialization. | It can be declared without initialization. | It cannot be declared without initialization. |
| It can be accessed without initialization as its default value is “undefined”. | It cannot be accessed without initialization, as it returns an error. | It cannot be accessed without initialization, as it cannot be declared without initialization. |
| It’s an old way to declare variables. | It’s a new way to declare variables introduced in ES6. | It’s also a new way to declare variables which introduces in ES6. |
What you need to know about var, let and const
- var, let, and const are keywords that allow us to declare variables.
- Scope of a variable tells us, where we can access this variable inside our code and where we can’t.
- Hoisting provides us features to get hoisted our variables and function declaration to the top of it’s scope before code execution.
- var is a nice and innocent way to declare a variable, which gets hoisted to the top of the scope.
- let and const are the modern ways to declare variables, which also get hoisted but didn’t initialize.