So you are new to JavaScript and keep hearing the word “scope” but don’t quite understand what its is and why you should care. I am here to come to your rescue. This is a very important fundamental concept to understand so lets walk through a few examples and explain what it is.
TLDR: Where variables are accessible
Scope
Scope in JavaScript refers to the accessibility of whatever you are referencing is.
Lexical Scope
JavaScript has a lexical (aka static) scope. Sounds fancy right? It just means that children have access to the parent scope (this includes variables, functions, etc.) but parents to not have access to the children scopes.
function example() {
let a = 'test'
//This has access to a but not b or c
function exampleParent() {
let b = 'hello'
//This has access to a and b but not c
function exampleChild(){
let c = 'Children are special'
//This has access to a, b, and c
}
}
}
Lexical for JavaScript means at compile time. This means that JavaScript gets its values at compile time rather than other languages that get it dynamically
let animal = 'dog';
function myAnimal() {
console.log(animal);
}
function quack() {
let animal = 'duck';
myAnimal();
}
function meow() {
let animal = 'cat';
myAnimal();
}
quack(); // returns dog
meow(); // returns dog
If this were run in a dynamic language animal would be different based on the function that was run but since it is lexically scoped (at compile not at runtime) it stays the same. HOWEVER, this is NOT the same as reassigning that variable if you wrote this:
let animal = 'dog';
function myAnimal() {
console.log(animal);
}
function quack() {
animal = 'duck';
myAnimal();
}
function meow() {
animal = 'cat';
myAnimal();
}
quack(); // returns duck
meow(); // returns cat
you would get what you are expecting as this is reassigning your declared variable not trying to declare the same variable again.
JavaScript has 3 kinds of scope along with its overall lexical scope
Global
Local (or function)
Block
Lets briefly dive into what each of them are
Global Scope
A global scope is anything that is defined outside curly braces. This is usually imports for a file or constants that multiple functions need access to.
const testLog = 'test' //this is global scope
function logger(){
const example = 'not global' //this is not global scope it is local/function scope
console.log(testlog) //this will work as testLog is globally scoped
}
console.log(example) //this will not work (will error Uncaught ReferenceError: example is not defined) as example is not globally scoped it is locally scoped and is not in the scope of this console log
Local (or function) Scope
A local also known as function scope anything that is defined within the curly braces of a function. This means that if something is defined inside a function only that function will have access to it. lets use the previous example again
const testLog = 'test' //this is global scope
function logger(){
const example = 'not global' //this is not global scope it is local/function scope
console.log(testlog) //this will work as testLog is globally scoped
console.log(example) //this will work as example is locally scoped and we are still within that scope
}
console.log(example) //this will not work (will error Uncaught ReferenceError: example is not defined) as example is not globally scoped it is locally scoped and is not in the scope of this console log
Block Scope
Block Scope is something that was added in ES6 with let and const. This means let and const are available in the curly braces they are defined in. This example will show how that works with showing the difference between var, let, and const, but if you want to learn more about that in detail check out this article.
function blockScopeExample(){
const IAmCool = true
if(IAmCool){
var dog = 'Dakota'; //local/function scoped
const cat = 'Boo'; //block scoped
let lizard = 'Lucifer'; //block scoped
console.log(1, dog); //'1 Dakota'
console.log(2, cat); //'2 Boo'
console.log(3, lizard); //'3 Lucifer'
}
console.log(4, dog); //'5 Dakota'
console.log(5, cat); // Uncaught ReferenceError: cat is not defined
console.log(6, lizard); // Uncaught ReferenceError: lizard is not defined
}
Here we can see when we are within the same curly the block scoped variables were available but as soon as we were out of the curly braces they were not. The function scope was available within the function but not outside of it. to put it all together we have this example
const global = 'i am global' //global scope
function blockScopeExample(){
const IAmCool = true
if(IAmCool){
var dog = 'Dakota'; //local/function scoped
const cat = 'Boo'; //block scoped
let lizard = 'Lucifer'; //block scoped
console.log(1, dog); //'1 Dakota'
console.log(2, cat); //'2 Boo'
console.log(3, lizard); //'3 Lucifer'
console.log(4, global) //'4 I am global'
}
console.log(4, dog); //'5 Dakota'
console.log(5, cat); // Uncaught ReferenceError: cat is not defined
console.log(6, lizard); // Uncaught ReferenceError: lizard is not defined
console.log(7, global); //'7 I am global'
}
console.log(8, dog); //'Uncaught ReferenceError: dog is not defined'
console.log(9, cat); // Uncaught ReferenceError: cat is not defined
console.log(10, lizard); // Uncaught ReferenceError: lizard is not defined
console.log(11, global); //'11 I am global'
Here we can see when we are within the same curly the block scoped variables were available but as soon as we were out of the curly braces they were not. The function scope was available within the function but not outside of it and the globally scoped variable was available everywhere.
Top comments (0)