What is scope and how does it work in JavaScript

Learning certain functions in programming languages, even if they are specific, can help us understand their code even if we haven’t fully mastered the programming language. When it comes to programming languages, there are many variables and concepts that can be new because of the way the language is handled. For that reason, today we’re going to talk about one of the most popular JavaScript functions, the scope.

Not without first, of course, talking about this particular programming language, what it consists of and what features it has in the world of programming or software engineering. 

Once the concept is explained and understood, we will go directly to the understanding of the scope and what importance it has in the tech world.

Are you interested? Well, let's start! 

What is JavaScript?

JavaScript is just one of the many programming languages that exist today, and that continues to be supported due to its great popularity and importance.

It’s a very dynamic language and can be executed on different devices such as computers or smartphones. 

It’s mainly focused on the front-end development of projects, that is, the visual and structural aspects of an application or program, the user level, so to speak.

However, this language has had such support, that in recent years it has also been used on some occasions for back-end development, although it’s necessary to use external frameworks to be able to execute this type of code. For example:

• Node.Js.

• Next.Js

What is the purpose of JavaScript?

Before its creation or development in 1995, there was only Java, which was its predecessor. However, the latter had many limitations in terms of generating dynamism and interaction between users and companies in the user interface of web pages and applications.

For that reason, JavaScript was born, which focuses, as we mentioned before, on front-end development. But more than just taking care of visual aspects of the interface and structure, the interesting thing is the possibility of making the interface appear to be alive.

So, nowadays you can access any website, and you will be able to see how some options change color or make some kind of movement when you pass the mouse over that option. Also, there’s the possibility of adding images, videos, and other very attractive features at a visual level.

Its creator was Brendan Eich, and since then, the language has done nothing but grow and develop itself thanks to a community that remains active until now and continues to improve its possibilities.

4 Features of JavaScript

Well, before we start talking about what we’re interested in and what the scope has to do with all this, let's get to know some of the most outstanding features of JavaScript...

1. It’s a language with little typing

When we say that a language has a high percentage of typing, we mean the static nature of its procedures and the impossibility of combining both numbers and letters or symbols.

In the case of JavaScript, the language has the ability to perform operations that include both numbers and letters, making it a language with many more possibilities.

2. Interpreted language

This means that it doesn’t need to be compiled so that the device in question can interpret what you want it to do step by step. In fact, it performs the steps one by one according to the lines of code following the correct sequence.

This is possible because browsers use the V8 JavaScript engine to be able to automatically interpret the codes.

3. Dynamic

We already mentioned it in a previous point, but we will develop the idea a little more for you so you can understand it perfectly.

Imagine the following: 

You are developing a web page, and you’ve already written much of the code to give shape and a good presentation to your site, making it visible to the user. Well, imagine that you want to check that everything is fine and that you are achieving the expected results; JavaScript allows you to test it without compilation.

That is, you will be able to see your progress immediately. Although this can have a serious disadvantage, since occasionally you will not be aware of any error in the code during its development and you will only realize it's there when executing it.

This makes it a language that can declare variables and values that will be known only by executing it. And when we refer to the declaration of variables and their functions, that's when we get into the scope.

4. Function Compatibility

Also known as backward Compatible, what does this mean exactly?

It means that new features that are developed for JavaScript can be included within a project that already has a pre-developed feature. The best part? It won’t harm the previous work and you can run it once the functions are available.

Here's the thing, when a new function is created, the browser usually isn’t able to understand it, so running it may not be possible until the browser updates these new functions.

However, it’s possible to implement it by making use of tools such as Babel, which adapts these new functions to a language that the browser can interpret.

What is scope in JavaScript?

Now that we’ve talked about JavaScript and you are clear about what it is and its main features, let's talk about scope. What is it then?

The scope could be defined as a protection or filter of code variables, with which you define which variables you will be able to access in a declared code.

For example, imagine that you are reviewing a foreign code of a foreign project: the scope assigns the variables that you will be able to access in this code, to execute them or even to edit them. If a variable is not available, you will not be able to access it in any way.

We can distinguish between global scope and local scope:

Global scope

These are the variables that you can access and that are declared outside a block or a function. Here you will be able to access these variables from any part of the code, without the need to mention the function because it’s not inside it.

Although the language allows it, it isn't a very recommendable practice in the world of programming, as there is the possibility that you may declare two global variables with the same name because of an oversight, which will cause an error.

The problem? Identifying it will not be easy.

Local Scope

If a global variable can be accessed anywhere in the code, the local variable is the opposite. Here you will only have access to it in a specific section of the code, which is in turn within a declared function or block.

If you try to access the variable in any other part of the code, the operation cannot be executed because the variable will not be defined.

Now, there are ways to make variable declarations that will define what the scope will allow you to access, this is achieved through "let", "const" and "var".

Declarations with "let" and "const"

When a variable declaration is made by means of this command, it means that the scope of the variable can only be obtained in the block or function where it was declared. Now, if two variables have the same name and are declared in the same function, it will not be possible to execute them.

That’s why the use of "let" and "const" is well recommended since it makes you less susceptible to making errors of this type. If you have two variables with the same name, but you make the declaration in two different blocks or functions, you will not have the error.

On the other hand, there’s the possibility of making declarations of two functions that are one inside the other. In these cases:

• The function or block that is outside: the scope will not allow access to the variables that are in the inside function.

• However, the inside function will have access to the variables found in the outside function.

It’s very important that you keep these concepts in mind!

But this is not the only way to make declarations, there’s another method, although not very recommended.

Declarations with "var"

Declarations can also be made with the "var" command, with the detail that the value of the variable is rewritten, giving rise to possible bugs in the future once the code is executed. For this reason, its use is not recommended.

Conclusions about scope 

As you’ve been able to observe, the scope is what allows you to have access to the variables that are determined at the time of developing code in the JavaScript language.

Being such a versatile language in the programming world and with a low level of typing, it’s necessary to make some filters and variable protections to protect them. 

Hence the importance of having a good knowledge of scope, its types, and its correct application in the development to avoid vulnerability problems or bugs.

Have you been able to understand the concept and importance of scope, do you know how to apply it in code development? We would love to hear from you in the comments.