JavaScript Scope Refers to Accessibility

Let’s take a look at an example to get a brief understanding of what scope is in Javascript. For the following code below, what do you think the result will be when you “console.log(person)”?

function greet(){
  let person = 'James' 
  console.log(person, 'nice to meet you')
}

console.log(person) // ? 

If you thought that the output would be ‘James’, you were slightly off. Normally, if you call the variable, it should work since ‘person’ is defined with a value of “James”, therefore it should not be undefined.

console.log(person) // undefined

However, it works differently if they're in a function. It is not accessible since it is inside a function because functions create their own Lexical Environment (will get back to this), which blocks accessibility from the outside.

Get Giwon’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

This is what Scope in JavaScript is about! And these accessible areas can be categorized as :

block scope

Any variables declared inside a code block { } can be considered a block scope. In addition, there are:

1. if statements () {}
2. for loops () {}
3. function () {}

Any variables inside the block scope can be a reference to one another. However, if you have a variable outside the code block and want to access a variable inside a code block, it is not possible. You will receive a value of undefined.

function greet(){
  let person = 'James' 
  console.log(person, 'nice to meet you')
}

console.log(person) // undefined

{
 const a = 'a'
}
const b = 'b'
console.log(a) // app crashed... a is not defined 

The surprising thing is you can access a variable outside the code block from inside a code block if they are not inside another code block.

const outside = 'free variable'

function invisibleWall(){
  const inside = 'cannot reach from outside'
  console.log(outside) // 'free variable'
  return
}

console.log(inside) // undefined

The reason for this is that they are declared as global scopes that can be accessed from all throughout your JavaScript file. In the example above, the variable “outside” would be the global scope.

global scope

Global scopes are located outside a code block { } that is accessible from all throughout your code.

local scope

Local scopes are located inside a code block { } and cannot be accessed from the outside.

Example of both global scope and local scope

const text = 'global scope'  
console.log(textTwo) // crash...undefined 
console.log(textOne) // crash...undefined

function outer () {
 const textOne = 'local block scope1'
 console.log(text) // 'global scope'
    
    function inner () {
     const textTwo = 'local block scope2' 
     console.log(textOne) // 'local block scope1'
     console.log(text) // 'global scope'
    }
}

lexical environment

When a function is executed, it creates a lexical environment that can store variables inside the function. As long as it is within the lexical environment, they are accessible to each other.