In todays tutorial, were going to learn how to declare, interact, and scope variables in JavaScript.
Well introduce new concepts and important JavaScript keywords likevar,letandconst.
So, lets get started.
Declaring variables
Nowadays JavaScript has three different keywords to declare a variable var,letand,const.
Each has its own properties and particularities.
Lets start by making a simple comparison table of the three keywords and then dive into the details.
Were going to cover them in detail next.
In JavaScript, we have two types of scope,local,andglobal.
Though local scope can have different meanings.
Lets work through the definitions by giving some examples of how scoping functions.
Lets talk a bit more about block and function scopes.
As we already discussed the use ofletandconstallows us to define variables that live within the block scope.
In our outer scope, we were defining the variablex1with a value of1.
Same example now with a named scope:
The while example, but dont run this code below.
Ill explain why soon.
Can you guess whats wrong with the code above?
And what would happen if you ran it?
Fixing this particular code could be tricky unless you actually rename either variables.
So far in our example, we usedconst, but exactly the same behavior would happen withlet.
Well, lets take a look:
Amazing!
However, function scopes also encapsulate variables declared withvar.
Can you imagine a world where importing modules from a library would conflict with your variables?
Not even JS is that messy.
So far we talked about different types of local scopes, lets now dive into globalscopes.
Global scope
A variable defined outside any function, block, or module scope has global scope.
Variables in global scope can be accessed from everywhere in the tool.
The global scope can sometimes be confused with module scope, but this is not the case.
How would you go about declaring a global variable?
It depends on the context, its different on a surfing app than a NodeJS program.
Simply add anifstatement inside a function.
Lexical scope simply means the other scopes have access to the variables defined in outer scopes.
Lets see it with an example:
That looks stranger than what it is, so lets explain it.
The functionouterScopedeclares a variablenamewith valueJuanand a function namedinnerScope.
The reason why this works is thanks to JavaScript closures.
Sounds super confusing, lets better see it in code.
Functions have this particular property, but also do variables declared withvar.
Very interesting, but what happens if we useletorconst?
Remember in our table, they dont share this property.
It threw an error.
Hoisting is a lesser-known property of JavaScript variables, but its also an important one.
Reassignment of variables
This topic covers specifically variables declared with the keywordconst.
Did we just change the value of aconstvalue?
The short answer is, no.
Our constantc2references an object with a propertyname.c2is a reference to that object, thats its value.
When we doc2.namewe are really taking the pointer to thec2object and accessing the property from there.
Today I covered the topic of variable declarations and scoping in JavaScript.
Its a very important topic that can explain many weird situations happen to our code.
Its a must-learn skill for all JavaScript developers.
Sign up for updates on everything related to programming, AI, and computer science in general.
Also tagged with
