DEV Community

Layne Andrews
Layne Andrews

Posted on • Edited on

Phase One Blog - Scope

Scope in JavaScript can be a little hard to understand as a beginner. Scope has to do with the environment where your code is written in relation to the larger body of your code, and the limit to which that code can access and interact with other code in your coding environment. Take the following example -
Image description
In this example we have a variable called "globalVariable", a function called "doSomething" and a variable within that function called "localVariable". These are aptly named to illustrate the concept of scope and what domain these particular variables are stored in. Notice what happens when we console log "globalVariable" right below our code snippet -
Image description
Image description
As would be expected, we are able to see a console log of our global variable. Great. But what would happen if we console logged out "localVariable"?
Image description
Image description
We get an error saying that "localVariable" is not defined! What's going on here, JavaScript? Did you get enough sleep last night? Clearly we have a variable called "localVariable" and it's defined right inside of our "doSomething" function. So why is JavaScript saying this variable is undefined? This example illustrates the concept of scope and how depending on where certain code "lives", other code will either have access, and be able to interact with that code or not. The reason for our error is that "localVariable" is only defined in the 'scope' of our function. This, in effect, only makes "localVariable" available in the scope of our "doSomething" function, not in the global scope where we have our "globalVariable" defined.
We can also think about scope in the same way we think about a physical environment. Take a house for example. In most houses we have a kitchen, a living room, a bathroom and a bedroom. Outside of the house there are more "global" systems like electrical plants and water treatment facilities. In JavaScript, this analogy might look something like this -

Image description
In a house you would perform certain actions within the "scope" of certain rooms. You would cook in the kitchen, relax in the living room, shower in the bathroom and sleep in the bedroom. If you were relaxing in the living room and needed to use the toilet, you wouldn't have access to the toilet within the scope of the living room. Likewise, if you were cooking in the kitchen, you wouldn't have access to your bed. Since the water treatment facility and electrical plant is defined globally, the rooms in our house do have access to them because they are defined in the global scope.
Scope among other things was interesting to learn about in phase one and it gets more complex as your code does. But it's important to get a grasp on, as it is very important in JavaScript.

Top comments (0)