An Introduction to JavaScript Scope and Scope Chain for Beginners

The notions of scope and scope chain are fundamental to JavaScript and other programming languages. But these important concepts sometimes perplex new JavaScript developers.

You will produce better, more efficient, and cleaner code if you have a thorough understanding of scope and scope chains. And this in turn will help you become a better JavaScript Developer.

So in this article, I'll describe what scope and scope chains are, including their different types, roles, and functionalities.

What are Scope in JavaScript?

Scope refers to the accessibility or visibility of variables in JavaScript. Scope determines which sections of the program can access the variable and where the variable can be seen.

Why are Scope Important?

Here are two most important needs of Scope in JavaScript now-a-days.

1. We can use scope to prevent unwanted changes to variables from other portions of the program.

2. Scope is important for security. Scope means you can only access variables from a specific part of the program.

Types of Scope in JavaScript

There are three forms of scope in JavaScript: global scope, function/local scope, and block scope. Let's have a look at what each one means.

1. Global Scope in JavaScript

Variables defined outside a function are said to have global scope. In a JavaScript document, there is only one global scope. You can use a global variable anywhere in your code, even in functions, once you've declared it.

Here is an example of global scope in JavaScript:

var message = 'Welcome';
function greet() {
 console.log(message);
}

// Prints 'Welcome'
greet();

2. Function & Local Scope in JavaScript

Variables defined inside a function are in local scope. For each call to that function, they have a distinct scope. In addition, when a function is called, it establishes a new scope.

Here is an example of Function and Local Scope in JavaScript:

function greet() {
 var message= 'Welcome';
 console.log(message);
}

// Prints 'Hello World!'
greet();

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

3. Block Scope in JavaScript

Unlike var variables, let variables, and const variables can be scoped to the nearest pair of curly braces in ES6. They can't be reached from outside that pair of curly braces, which means they can't be accessed from the outside.

Here is an example of Block Scope in JavaScript:

{
 let message = 'Welcome';
 var lang = 'JavaScript';
 console.log(message); // Prints 'Welcome'
}

// Prints 'JavaScript'
console.log(lang);

// Uncaught ReferenceError: message is not defined
console.log(greeting);

Var variables are not block-scoped, so they can be used outside of the block.

Scope Chain in JavaScript

When you use a variable in JavaScript, the JavaScript engine searches the current scope for its value, just like JavaScript Pointers. If the variable isn't discovered in the inner scope, it will look for it in the outer scope until it finds it or it reaches global scope.

If it still can't discover the variable, it will either throw an error or implicitly declare it in the global scope.

Here is an example of Scope Chain in JavaScript:

let foo = 'foo';

function bar() {
let baz = 'baz';
// Prints 'baz'
console.log(baz);
// Prints 'foo'
console.log(foo);


number = 42;
console.log(number);  // Prints 42
}

bar();

When the function bar() is called, the JavaScript engine searches for the baz variable in the current scope and finds it. Then it looks for the foo variable in the current scope, which it doesn't find, so it moves to the outer scope, where it finds it, that is global scope.

Then we add 42 to the number variable, instructing the JavaScript engine to seek for it first in the current scope, then in the outer scope.

If the script isn't in strict mode, the engine will either create a new variable named number and assign the value 42 to it, or it will throw an error.

When you use a variable, the engine will look for it all the way down the scope chain.

Conclusion

A scope is a visible and accessible space for a variable in a nutshell. JavaScript scopes, like functions, can be nested, and the JavaScript engine traverses the scope chain to find the variables used in the program.

The lexical scope of variables in JavaScript is determined during the construction process. The JavaScript engine maintains variables in the lexical environment during program execution.

That's a Wrap!!! I hope you liked the article, you can reward Developer Noon by Subscribing to our Newsletter.

Comments

[SVGator]

Great breakdown for beginners 🙌