Scope in JavaScript

#BuildTogether Day 51/100

Today I went to the office, I went to check space as we would be organizing our very first in-person MongoDB Dublin user group 😍 Excitingggggg!!! I know.

If you want to read more on MongoDB user groups, feel free to drop by ;)

User Groups & Events

Scope

Scope defines where variables can be accessed or referenced. While some variables can be accessed from anywhere within a program, other variables may only be available in a specific context.

We think of scope in relation to blocks {} because variables can exist either outside of or within these blocks. These can be function blocks or any block of code.

Global Scope

In the global scope, variables are declared outside of blocks. These variables are called global variables. Because global variables are not bound inside a block, they can be accessed by any code in the program, including code in blocks.

Block Scope

When a variable is defined inside a block, it is only accessible to the code within the curly braces {}. The variable has a block scope because it is only accessible to the lines of code within that block.

Variables that are declared with block scope are known as local variables because they are only available to the code that is part of the same block. If the variable is accessed outside the block, a reference error is thrown

Scope Pollution

When you declare global variables, they go to the global namespace. The global namespace allows the variables to be accessible from anywhere in the program. These variables remain there until the program finishes which means our global namespace can fill up really quickly.

Scope pollution is when we have too many global variables that exist in the global namespace, or when we reuse variables across different scopes. Scope pollution makes it difficult to keep track of our different variables and sets us up for potential accidents. For example, globally scoped variables can collide with other variables that are more locally scoped, causing unexpected behavior in our code.

This is bad practice in code maintainability and could impact our program in unintentional ways.

Good Scoping

The variables should be scoped as tightly as possible using block scope.

Tightly scoping the variables will greatly improve the code in many ways:

• It will make the code more legible since the blocks will organize your code into discrete sections.
• It makes your code more understandable since it clarifies which variables are associated with different parts of the program rather than having to keep track of them line after line!
• It’s easier to maintain code since it will be more modular.
• It will save memory in the code because variables will cease to exist after the block finishes running.

To Note:

• Create a variable dusk inside the logSkyColor() function.
• After the if statement, define a new code block with the {} braces. Here assign a new value to the variable color if the if statement is truthy.
• Within the if block, the color variable holds the value 'pink', though outside the if block, in the function body, the color variable holds the value 'blue'.
• While we use block scope, we still pollute our namespace by reusing the same variable name twice. A better practice would be to rename the variable inside the block.

Block scope is a powerful tool in JavaScript since it allows us to define variables with precision, and not pollute the global namespace. If a variable does not need to exist outside a block — it shouldn’t!

Challenge :

A Service called Training Days sends you a message for the event you signed up for and the days you have left to train.

The program currently uses the wrong scope for its variables. This can be troublesome as the service evolves. Make Training Days more maintainable and less error-prone by fixing variable scopes.

If you fancy reading my 100Days Journey, feel free to drop by ;)

The Journey of #100DaysOfCode (@henna_dev)