Difference Between Scope and Closures in JavaScript

The scope and closures are fundamental concepts that play a crucial role in how variables are accessed and managed within the functions and blocks of code. In this article, we will learn about the difference between scope and closures in JavaScript.

What is Scope?

The Scope in JavaScript refers to the context or environment in which a variable or function is declared and can be accessed. JavaScript uses function-based scope meaning variables declared inside a function are locally scoped in while variables declared outside any function have global scope.

Example: In this example, a variable named message is declared in the global scope, and its value is both set and accessed within a function, demonstrating the concept of global scope in JavaScript.

let message; 

// Declare message in global scope
function GFG() {
  message = "Hello, world!";
  console.log(message);
}
GFG();

// Now it's accessible globally
console.log(message); 

Output:

Hello, world!
Hello, world!

What are Closures?

The Closures occur in JavaScript when a function "remembers" its lexical scope even if it's executed the outside that scope. In other words, a closure allows a function to access variables from its containing function and even after the containing function has finished executing.

Example: In this example, a closure is created where the inner function retains access to the "name" variable from its containing "outers" function, allowing it to display a personalized greeting when invoked.

function outers() {
    let name = "Kumar";
    function inner() {
        console.log("Hello, " + name + "!");
    }
    return inner;
}
let greeting = outers();
greeting();

Output:

Hello, Kumar!

Difference between scope and closures in JavaScript:

Anonymous