If you are a newbie, you are not sure about the concept of Scope in JavaScript or you want to review this knowledge, this is the article for you.
Purpose of
this article is help you can have a thorough grasp of knowledge about scope. You can see in which area the variable is
active and know the flow of the variable so that you can maintain and develope.
Coming to
part one, let's go through some concepts about scope in JavaScript.
Table of
contents
Limit of Scope in JavaScript:
· Global scope
· Code block
· Local scope
When the function is executed, a new
memory area is created.
Limit of Scope
Imagine, you
have your own empire, your empire has many strongholds and is managed by the
king who is you. You are the king; you can allocate the resources in your country.
This will help the people in your kingdom can only use the resources that you
allow them to use.
Global scope
is your country. Everything
you distribute in your country can be used by everyone. Let's take a look at
the example below:
let globalVar = 'Global variables'
console.log(globalVar) // => Global variables
In your
empire has a variable is "globalVar" any citizen can use it. Let's look at
another example to see how powerful you are in your country?
function useGlobalVar() {
console.log('Use global variables')
// => Use global variables
}
useGlobalVar()
Functions
are declared in global can still be used anywhere.
The problem
arises that you cannot leave all your assets unmanageable, that will make your
assets available to anyone in your country.
You build
new stocks in your empire to store your own property. All treasures will be
stored in warehouses, stored in specially designed chests and only these
warehouses can touch these assets.
You build
new stocks in your empire to store your own property. All treasures will be
stored in warehouses, stored in specially designed chests and only these
warehouses can touch these assets.
This thing
represents for “{“ and “}” in JavaScript with let and const variable
declarations. Let's look at how your possessions are protected in your
warehouse.
{
let property = "My kingdom's property"
console.log(property) //
=> My kingdom's property
}
console.log(property) // => Uncaught ReferenceError: property is not defined
Tadaaa! Your
properties have been protected certainly. Only those in the warehouse can use
it. No one outside can use this property. But there is a chest that is designed
differently, which makes it easy for outsiders to use. It's a var chest, let's
see the example below:
{
var property = "My kingdom's property"
console.log(property) //
=> My kingdom's property
}
console.log(property) // => My kingdom's property
Oh no! You wouldn't want someone unlicensed to still be able to use assets
you've allocated. It is best practice not to use var in all situations like
this. In this situation the var property has jumped to the parent scope and is
executable.
You will wonder what if I hold many var chests at once? This is the answer for you, let's see the results below:
{
{
{
{
var property = "My kingdom's property"
console.log(property) // => My kingdom's property
}
}
}
}
console.log(property) // => My kingdom's property
Amazing!
Although packed in many chests, this method still does not work.
So where do
these warehouses appear, many and very familiar, If-Else, While, Do-While,
Switch, For, Map, forEach, etc.
Continuing
to the other fantasy, you see that the warehouse is also quite good, but you
still want to upgrade more for better protection. You build strongholds to
better protect your possessions.
This is
similar to when you create functions, outside the function cannot access the
variables inside the function.
function protectProperty() {
let property = "My kingdom's property"
console.log(property) //
=> My kingdom's property
}
protectProperty()
console.log(property) // => Uncaught ReferenceError: property is not defined
Great! You
have protected the assets in your stronghold. So if you use a var chest to
store items, what will happen?
function protectProperty() {
var property = "My kingdom's property"
console.log(property) //
=> My kingdom's property
}
protectProperty()
console.log(property) // => Uncaught ReferenceError: property is not defined
Awesome!
Your stronghold proved to work better than the warehouses. But in essence, a stronghold
is an upgrade of a warehouse. Every function has “{” and “}”, but function is
more powerful in protecting the variable inside.
If you want
to be stronger, try building a stronghold inside the stronghold to protect your
assets. Let's see its power:
function protectProperty() {
function protectPropertyx2() {
var property = "My kingdom's property"
console.log(property) // => My kingdom's property
}
protectPropertyx2()
console.log(property) //
=> Uncaught ReferenceError: property is not defined
}
protectProperty()
console.log(property) // => Uncaught ReferenceError: property is not defined
All variables inside the function are not accessible outside. You keep in mind the above cases to apply.
Allocate memory for a function
Imagine your
stronghold, although created, it does not occupy the area of your kingdom.
Only when you use your stronghold will the stronghold officially occupy the
area in your kingdom.
Similarly,
when a function is created, it has not been allocated memory, only when it
executes will it be allocated. How many times execute, the more memory is
allocated? Let's look at the example below
function myKingdom() {
console.log('My strong kingdom')
}
// Only memory for global
Currently
the memory only has the memory of global.
function myKingdom(name) {
console.log('My kingdom is ' + name)
}
// Memory for global
myKingdom('hello') // => My kingdom is hello
myKingdom('hi') // => My kingdom is hi
myKingdom('viking') // => My kingdom is viking
myKingdom('strong') // => My kingdom is strong
myKingdom('crowded') // => My kingdom is crowded
We have 6
memory areas for 6 initialized functions. Includes 5 functions to be called and
memory of global.
Conclusion
So far, you
have learned about scope, including scope scope, memory allocation for a
function. In the next article we will discuss more about other concepts in
scope.
If you have any comments, feel free to comment below. Thank you
for joining with me! Have a good day!
0 Nhận xét