A beginner’s guide to Scope in JavaScript

As a beginner in coding, I hope this blog will help explain the concept of scope as it pertains to JavaScript. Just like the start of a code challenge, I like to break up terms and definitions into smaller and digestible parts.

So what is scope? In JavaScript, scope specifies where declared variables are accessible. There are three main scopes in JavaScript. They are global scope, function scope, and block scope. This is an overview of each scope and how variable declarations are affected:

· Global scope

o This is the outermost scope

o It is accessible in every scope

o Any variable declared outside of a function is in global scope

o Any function declared outside of a function is in global scope

o Any object declared outside of a function is in global scope

o Variables created without the keywords “const”, “let”, or “var” are in global scope

o It is best practice to use “const” and “let” to declare variables

· Function scope

o It is accessible within a function

o Specific to a single function

o Each function creates a new scope

o Functions don’t have access to each other’s variables

o Variables created inside function a cannot be accessed by anything in global scope

o Variables declared with “const” and “let” are function-scoped

o Variables declared with “var” are not function scoped — meaning “var” is global scoped

· Block scope

o This scope is created with curly braces “{ }”

o It is accessible within a block

o It is specific to a single block

o It cannot access other block for instance in if/else statements

o Variables created inside a block cannot be accessed by anything in the outer scope such as function scope or global scope.

o Block scope has access to it’s parent function variables and global scope variables

o Variables declared with “const” and “let” are block-scoped

o Variables declared with “var” are not block scoped — meaning “var” is global-scoped

Coding Examples with Scope

const myPup= 'bailey'

function isChubby(){
}
isChubby()

In the code above, the “const” variable ‘myPup’ with the value ‘bailey’ is in global scope.

The function isChubby() has access to the “const” ‘myPup’ because it is in global scope.

The following code shows when we invoke the function isChubby(), the “const” ‘myPup’ is accessed and returns the value ‘bailey’.

const myPup= 'bailey'                  

//console.log(myPup)
//'bailey'

function isChubby(){

//console.log(myPup)  
//'bailey'

}
isChubby()

const myPup= 'bailey'
function isChubby(){
      if(myPup === 'bailey'){

//console.log(myPup)
//'bailey'
      }

}
isChubby()

In the code above, the function isChubby() has an “if” statement and that is considered a block scope. When we console.log(myPup) inside the block scope, the value ‘bailey’ is returned because we have access to the global scope “const” myPup.

const myPup= 'bailey'
function isChubby(){
      let color = 'tan'

      if(myPup === 'bailey'){

      }
}
isChubby()

//console.log(color)
//Uncaught ReferenceError: color is not defined

In the code above, a new “let” variable called ‘color’ with the value ‘tan’ is declared inside the function isChubby().

When we console.log(color) in global scope, we get the message “color is not defined”.

This is because we do not have access to the “let” variable since it is inside the function isChubby().

const myPup= 'bailey'
function isChubby(){
      let color = 'tan'

//console.log(color)
//'tan'

      if(myPup === 'bailey'){
//console.log(color)
//'tan'    
      }
}
isChubby()

In the code above, when we console.log(color) in the function scope we see that we have access to ‘color’ because it returns ‘tan’.

It is the same result when we console.log(color) with the block scope because we have access to the “let” variable.

Therefore, everything that is nested under the declared variable has access to it. However, the opposite is not true. Anything in global scope does not have access to the function scope and the block scope.

const myPup= 'bailey'
function isChubby(){
      let color = 'tan'

//console.log(soHappy)
//Uncaught ReferenceError: soHappy is not defined

      if(myPup === 'bailey'){
         let soHappy = 'true'

//console.log(soHappy)
//'true'

      }
}
isChubby()

//console.log(soHappy)
//Uncaught ReferenceError: soHappy is not defined

In the code above, a new “let” variable called ‘soHappy’ is introduced in block scope. When console.log(soHappy) in global scope and in function scope, we get “soHappy is not defined”. This is because we do not have access to the variable ‘soHappy’ in both those scope. However, when we console.log(soHappy) in block scope, the value ‘true’ is returned.

The same idea applies to multiple functions. If we create a new function under isChubby(), like isSkinny(), we can assume that the function isSkinny() does not have access to any of the function isChubby() variables. And the same with isChubby() not having access to isSkinny() variables. We can see below how both functions cannot access each other’s variables.

const myPup= 'bailey'
function isChubby(){
      let color = 'tan'

//console.log(tail)
//Uncaught ReferenceError: tail is not defined      

      if(myPup === 'bailey'){
         let soHappy = 'true'

      }
}
isChubby()

function isSkinny(){
      let tail = 'fluffy'
}
isSkinny()

//console.log(color)
//Uncaught ReferenceError: color is not defined

Final reminders and takeaways:

Block scope can access anything in functional scope and global scope. Functional scope can access anything in global scope. The reverse is not true, functional scope cannot access anything in block scope and global scope cannot access anything in function scope and block scope.

Do not use “var” to declare variables. Variables declared with “var” in block scope can be accessible throughout the function.

Use “const” and “let” to declare variables.

Understanding scope is useful because it helps us to write code that is clean and less prone to error.

References and resources:

[embed]GitHub - learn-co-curriculum/phase-1-scope-readme Contribute to learn-co-curriculum/phase-1-scope-readme development by creating an account on GitHub.github.com

[embed]GitHub - learn-co-curriculum/phase-1-scope-chain-readme Contribute to learn-co-curriculum/phase-1-scope-chain-readme development by creating an account on GitHub.github.com

[embed]Scope - MDN Web Docs Glossary: Definitions of Web-related terms | MDN The scope is the current context of execution in which values and expressions are "visible" or can be referenced. If a…developer.mozilla.org