JavaScript Scope

Scope in JavaScript

If you want to become a JavaScript guru, you must understand JavaScript’s scope. The core function of scope is to control access to the variables. In this article, we’ll discuss Javascript’s three types of scope; block scope, function scope, and global scope.

1. Block Scope

In JavaScript, a block scope will only control access to variables that are declared using ‘cons’ and ‘let’. For instance, using the ‘if block’ scope :

if (true) {
  const message = "John";
  console.log(message); // 'John'
}
console.log(message); // Reference Error

From the above example, the variable is successfully accessed using the first console.log(message). When we try accessing it using the second console.log(message), a reference error is thrown because it is out of scope. In simple terms, the variables don’t exist in this scope.

The block scope can be created using the ‘if’, ‘for’, and ‘while’. In the example below, the block is created using the ‘for’ loop:

for (const color of ['cat', 'dog', 'hen']) {
  const message = 'a';
  console.log(color);   // 'cat', 'dog', 'hen'
  console.log(message); // 'a', 'a', 'a'
}
console.log(color);   // Reference Error
console.log(message) // Reference Error

The message and color variables exist within the ‘for’ block only. When you try to access them outside of the ‘for’ block, you’ll get a reference error.

'var' exception

‘var’ cannot be limited by the block scope. See the example below:

{
  var my_number = 42;
   console.log(my_number); // 42
}
console.log(my_number); // 42

In the above example, the ‘var’ can be accessed within the block and outside of the block.

2. Function Scope

The function scope defines variables that are declared using ‘cons’, ‘let’, and ‘var’. Example of a ‘var’ declaration.

function run() {
  var message = 'Apples and Mangoes!';
  console.log(message); // ''Apples and Mangoes!'
}
run();
console.log(message); // Reference Error

In this example, the scope is created by the run() function. The ‘message’ variable is only accessible inside the function scope but not accessible outside. Each function creates its own scope and its variables are only accessible within that scope. For instance:

function run() {
  // "run" function scope
  const ten = 10;
  let count = 4;
  function compute() {}

  console.log(ten);   // 10
  console.log(count); // 0
  console.log(compute);  // function
}

run();
console.log(ten);   // Error. Reference not found
console.log(count); // Error. Reference not found
console.log(compure);  // Error. Reference not found

In this example, ‘const’, ‘let’, and ‘function’ are only accessible within the function. When you try accessing them from the outside, you’ll get a reference error.

3. Global Scope

Global scope can be accessed from any inner scope. A scope is classified as global if it is defined outside of the function. Variables that are declared in a global scope are called global variables. For instance:

let text = "my_text";
// the code that is here has access to the text.
console.log(mytext);  // my_text

function run() {
// the code that is here has access to the text.
console.log(mytext);  // my_text
}

In the above example, the variable ‘text’ is a global variable. Variables that are declared using ‘const’, ‘var’, and ‘let’ are similar when declared outside of a block. For instance:

let y = 2;       // Scope is global
var y = 2;       // Scope is global
const y = 2;       // Scope is global

The ‘y’ variable is defined the same way in ‘const’, ‘var’, and ‘let’. Global variables allow JavaScript to efficiently handle variables across many functions. When a variable is used in multiple functions, the global declaration that gives it a global scope allows you to only declare it once.

Conclusion

In JavaScript, the scope allows you to manage access to the variables that you are using. This is important in ensuring that the code is efficient in execution and there is little chance of variable collision. It is therefore important to understand JavaScript scope if you are going to become a JS guru. Let’s hear your thoughts in the comment section.

Every single day of the year we train people in the use of IT technologies, introduce them to tools and platforms, or we help them improve their programming skills. Explore all our courses here.