In Javascript, the usage of scope is as basic as any variable or function. We the Javascript developers always use scope in our program knowingly or unknowingly. But the question is, do we understand SCOPE?! In this blog, I have tried explaining this concept best of my ability I hope you will understand the scope better after reading this. Happy reading!

What is scope?

Scope is a well-defined set-out rule that remembers all the declared variables, blocks & functions, and their physical presence in the program, with this scope, controls the accessibility and also restricts when some code tries to access certain declarations that are not available to them.

Summary:

• remembers declared variables, blocks and functions, and their physical presence
• controls accessibility
• and also, restricts the accessibility

Example:

//global scope -----------------------
let language = 'JavaScipt'
function introduce(name){
//introduce scope start --------------
  console.log(`Helloo! My name is ${name}. I love ${language}.`)
//introduce scope end -----------------
}

introduce('Rahul') // Helloo! My name is Rahul. I love JavaScipt.

In the above example, Scope will remember language, introduce and name identifiers, and their placement in programs. Like, language & introduce is global but name is within introduce itself.

Remember:

Scope won't remember the value against these identifiers. It just remembers its declaration and placement in the program.

How scope is created?

Javascript engine processes the program in two phases:

1. compilation/parsing, and
2. execution

Processing of the program by Javascript engine is much more complex than just two phases, it does many things like performance optimization for the execution, memory allocation, and several others. But for understanding the scope and its creation, we don't need to go into all the deeper details. We can abstract out all the details in two phases, compilation/parsing and execution.

Scope comes into existence during compilation. So understanding compilation and execution is important.

How does compilation help to create scope?

During compilation, it creates a look-up map of all the lexical scopes that are comprised of variables/identifiers which the program will need later in the future when the Javascript engine starts executing the programs.

Now we have a new term Lexical Scope to explain.

So, What is lexical scope anyway?

Lexical scope can be defined as one uint of the scope, during the compilation phase, variables/identifiers and functions are associated with the nearest enclosing curly brackets { ..... } thus creating a lexical environment for variable/identifiers within enclosing curly bracket. Physical placement ( where the codes are written ) of the variables/identifiers and functions in the program will determine to which lexical scope they will be associated and thus their accessibility.

Now we know how compilation helps to create scope and about lexical scope.

Let's verify all the above saying with an example. NOTE: Read comments when going through code.

In the above code snippet, there are total 4 scopes

1. Global scope
2. buyFruits function scope
3. for loop scope
4. if statement scope

During compilation, it creates scope (aka, lexical scope) whenever enclosing curly bracket is found { ... }

Global scope's enclosing curly brackets are hidden.

So, What happens in the execution phase?

During the execution phase, when the Javascript engine encounters any variable/identifier it query for this variable/identifier starting from the lexical scope this variable/identifier is inside ( Javascript already have all mapped lexical scopes created during the compilation phase ) if found, the Javascript engine process that code and moves to the next code but if that variable/identifier is not found in that scope then the engine starts looking into outer scopes ( moving upward ) until the global scope if that variable/identifier is still not found then Javascript engine throws a relevant error.

Javascript engine initializes declared variables during execution phase but this is not the same for function. The declared function gets initialized in the compilation phase only.

Conclusion

That's all on Scope and Its creation from my side. I have read and understood this concept from the beautifully written and explained book, named You don't know JS by Kyle Simpson. I urge you to read this book, you will surely become a better Javascript developer.