DEV Community

Cover image for Scope, Scope Chain and Lexical Environment 1
thatFemicode
thatFemicode

Posted on

Scope, Scope Chain and Lexical Environment 1

Introduction

Scope in JavaScript is related to lexical environment and if you understand lexical environment you will understand scope, scope chain and also assist in understanding closure i talked about last week. I hope this wont be too long because it took me a while before i got the understanding and i had to write extensively on it to better understand it, like i said there are different types of people and how we retain information is different. Lets Dive in ๐Ÿ›ถ.

function num(){
    console.log(c)
}
let c = 30
num()
Enter fullscreen mode Exit fullscreen mode

Calling this function, JS engine (V8) in the browser will try to find c in the local memory space of the function num() when it is invoked.

Running the code above we get 30 because V8 looked inside the function and did not find the variable inside the function and since the variable is not present inside that function local memory, it looks inside the GLOBAL object, i am sure we all know what the GLOBAL object is.
NB: Also like a trick i used to wrap this around in my head, the variable was executed in the global object so the variable c can be accessed via SCOPE CHAIN, dont worry, we will see what SCOPE CHAIN is after we touch on some concepts regarding lexical environment so the understanding can be better.

Looking at another Instance of the function below

function num(){
    a()
function a(){
console.log(c)
}
}
let c = 30
a()
Enter fullscreen mode Exit fullscreen mode

What do you think the output of this function will be? You can copy and paste the code in your browser console, it will be 30 because invoking this function will also access the variable C in the global object (scope) and output 30 because function a() had to go up just 1 level in the scope chain to find the variable c which was inside the global object.

function num(){
let c = 30
    a()
function a(){
console.log(c)
}
}
console.log(c)
a()
Enter fullscreen mode Exit fullscreen mode

Lets go in another direction an try something now and access C when the variable is inside the function num() above, in this case what do you think the function will output? Try it in your console and see. It will output a reference error saying C is not defined because the variable is locally scoped to that function and it cant be accessed outside the function. From all this done, we can say SCOPE simply means where you can access a specific variable or a function in our code. From the examples above we asking, what is the scope of variable C like i said at the beginning, SCOPE is dependent on the lexical environment.

So as not to make this boring and too long because this was a lot to consume so digest on this and i will be posting the part2 of the article next week.
Let me give some simple definitions that can be researched upon before the next article to better prepare

Lexical Environment

Lexical environment simply means local memory along with lexical environment of its parent.
What is Lexical? Lexical simply means hierarchy or in order and in coding terms, where that specific code is present physically. Looking at the header for this post, those yellow shaded portions are regarded as lexical environment.

Wow, this was a lot and hopefully you get the gist now, i always had issues understanding it till i read up and watched some videos that really explained the concept well, like i said at the beginning there are people who process information different and if you are a junior dev out there like me, this is probably for you. Thank you for reading. If anyone reading this feel like i made a mistake or my thought process for this was not explanatory enough, I'd be glad to receive advice (constructive criticism) and learn more. Have a great day and journey ahead.๐Ÿš€โ™พ

Discussion (0)