Skip to main content

Javascript Scopes, explained.

Published 2021/03/18 00:00

Scope in Javascript is basically where a variable or function can be accessed from after it has been declared.

For example, a variable could only be accessed within an if statement, not outside it.

See the code below:

let x = 5

if(x > 3){
    let y = 10


Variable y is declared inside an if block. However, the code tries to access y OUTSIDE the if block. What would happen if we run this code?

You would get this error:

"Uncaught ReferenceError: y is not defined".

But why?

Because y was created within the if block, using the let keyword, it can only be accessed within that if block.

In other words, y can only be accessed within the SCOPE that exists between the curly brackets of your if statement

let x = 5

if(x > 3){
    // if block scope begins
    let y = 10
    // if block scope ends


But what about variable x? x is declared outside of any blocks. It can therefore be accessed from anywhere, including if blocks and functions.

In other words, x is a "GLOBAL variable".

Scope sets limits to where variables and functions can be accessed. But why? What's the point of this?

There are lots of benefits to taking advantage of scopes!

  1. Variables are only present where they're needed

See the code below. If we need a date object inside an if statement, there's no point in expanding its usage outside the if block.

This makes for more understandable code:

let x = 5

if(x > 3){
    let date = new Date() // This object is only needed within the if statement

console.log(date); // Not needed here
  1. Avoid naming collisions

If we limit the scope of our variables, we can reuse them depending on context. See example below:

let occasion = "CHRISTMAS"

if(occasion === "CURRENT"){
    let date = new Date()

if(occasion === "VALENTINES"){
    let date = new Date("2021/02/14")

if(occasion === "CHRISTMAS"){
    let date = new Date("2021/12/25")

Thanks for reading and I hope this makes Javascript scopes slightly easier.

Dev, Explained (43 part series)

  1. Javascript Scopes, explained.
  2. Javascript Promises, explained.
  3. Accessibility, explained.
  4. React, explained
  5. Should I use forEach() or map()?
  6. Should I use Flexbox or CSS Grid?
  7. Docker, explained.
  8. Unit testing, explained
  9. Git, explained.
  10. Typescript, explained.
  11. async/await, explained.
  12. The DOM, explained.
  13. Regular expressions, explained
  14. GraphQL, explained.
  15. Vue, explained.
  16. Svelte, explained.
  17. API, explained.
  18. Javascript Hoisting, explained.
  19. Immediately Invoked Function Expressions (IIFE), explained.
  20. ARIA roles, explained.
  21. Test-driven Development, explained.
  22. ARIA live regions, explained.
  23. aria-label in accessibility, explained.
  24. Type coercion in Javascript, explained.
  25. Variables, explained.
  26. if statements, explained.
  27. Arrays, explained.
  28. Currying in Javascript, explained.
  29. Memoization, explained.
  30. For loops, explained.
  31. Javascript Prototypes, explained.
  32. React Hooks, explained.
  33. Graph databases, explained.
  34. MongoDB, explained.
  35. Serverless, explained.
  36. Javascript Callback functions, explained.
  37. HTML, explained.
  38. CSS, explained.
  39. Responsive design, explained.
  40. Javascript, explained.
  41. The CSS Box Model, explained.
  42. CSS Flexbox, explained.
  43. CSS Grid, explained.
2022 Savvas Stephanides
Buy me a coffee
Some icons from Freepik