A scope in Javascript means the area of code in which certain variables are able to be accessed.
Variables are declared using let
,const
, and var
.
var
creates global scoped variables, but this is problematic if this variable is declared in multiple places as overwrites can happen.
The best reference on the internet in my opinion is Dimitri Pavlutin's blog on Scope.
This JS Scope Visualized blog is also amazing blog for visual learners. It's a 7 part series about JS, and has a section on scope which helped me tremendously
There are three types of scope: global, function and block.
Global scope is pretty straightforward, it means that the variables can be accessed from anywhere in the code.
Local Scope
if, for, and while statements create a scope.
function fly() {
// "fly" function scope
const message = 'We're going to land in the river';
if (true) {
// "if" code block scope
const pilot = 'Sully';
console.log(message); // 'That seems dangerous'
}
console.log(pilot); // pilot is not defined
}
console.log(message); // message is not defined
Standalone code blocks also create a scope:
{
let scope = 'this is block scoped'
}
console.log(scope) = this would return an error
Also local scope
function localScope() {
const array = [1, 2, 3, 4, 5];
let sum = 0;
}
console.log(array); //arr is not defined
console.log(sum); //array is not defined
There are nested scopes too, an inner function within an outer function has access to the outer scope.
In summary,
The Scope is the area in code from where a variable can be accessed.
It can be broken down to:
Global Scope
Local Scope: Function Scope & Block Scope
For the best explanations, please reference the links further up. If you are interested in copy/pasting your code into a web app for a visual representation of scope, then this is a cool site:
Top comments (1)
Thanks, very instructional!