Object destructuring is a JavaScript assignment expression that makes it possible to extract values from the properties of an object into distinct variables. This feature was added in the ES6 version of JavaScript.
The scope is a region of the program where a variable is visible.
Every variable we define will become part of a scope. We can access that variable only within its scope.
For Example, we have nameVar variable inside the function. When we access it outside the function, JavaScript will throw the ReferenceError. That is because JavaScript creates a new scope for every function. In this example, nameVar become part of the someFunc scope. Hence you cannot access it outside it.
function someFunc() {
let nameVar="Test"
}
someFunc();
console.log(nameVar); //Uncaught ReferenceError: nameVar is not defined
It is very important to understand, how & when JavaScript creates scopes. Because it determines where you can access the variables that you define
Scopes restrict the visibility of variables. A local variable defined in a function cannot be accessed in another function or outside of it. This will help other parts of the code accidentally modify the value of a variable or create a new variable with the same name. Without scopes, this would create hard-to-track bugs.
There are four types of scope in Modern JavaScript.
The Block Scope and Modules are introduced by ES6. Before that, Javascript had only two Scopes. Global & Function Scope (also known as Local Scope).
You can selectively pick the values that you want to restructure. The following example extracts only the firstName & employer property from the person object.
const person = {
firstName:'Bill',
lastName:'Gates',
age:'50',
employer:'Microsoft'
}
let { firstName, employer} = person
console.log(firstName) //bill
console.log(employer) //Microsoft
The global scope is the root scope of the Application. JavaScript automatically creates the global scope when the app starts. It is the Parent of all other scopes.
Variables that we declare inside the Global Scope, are visible everywhere. You can access it from anywhere in our code. These variables are called Global Variables.
We can create a global variable when we declare the variable outside of a function, block statement ( {} ), or a Module.
For Example, the code below globalVar is a global variable. . We can access it from within the function, inside a { } , inside if block, etc.
let globalVar="Hello"
//Functions
function someFunc() {
console.log(globalVar) //Hello
}
someFunc();
//Code block
{
console.log(globalVar) //Hello
}
//if,for,switch also creates an code block
if (true) {
console.log(globalVar) //Hello
}
console.log(globalVar) //Hello
The Scope, which is created only for a specific part of the code is Local Scope. JavaScript creates two types of Local Scopes. One is for a Function (Function Scope) and the other one for a block statement (block Scope)
The Variables declared within the local scope are called Local Variables.
The JavaScript creates a new Function Scope for every JavaScript Function. The variables we declare inside the function will become part of the function scope. We cannot access it outside the function.
You can use either var, let or const to create a variable inside the function.
Even the function parameters also become part of the function scope. Hence only available inside the function and not outside.
For Example, In the following example, funcVar becomes part of the someFunc Function scope. We cannot access it outside the someFunc. Trying to access will result in ReferenceError.
//Functions
function someFunc() {
let funcVar="Hello from Function"
console.log(funcVar) //Hello from Function
}
someFunc();
//All Codes below throws an exception
//Uncaught ReferenceError: funcVar is not defined
//Function
function someOtherFunc() {
console.log(funcVar)
}
someOtherFunc();
//Code block
{
console.log(funcVar)
}
//if,for,switch also creates an code block
if (true) {
console.log(funcVar)
}
//Global
console.log(funcVar)
JavaScript creates a new Block Scope for every Block statement or code block. A block statement is a group of statements inside a pair of braces( { } curly brackets). The let & const variables we declare inside the Block statement will become part of the Block scope. We cannot access it outside the Block statement.
Block Scope has become part of the JavaScript from ES6. Before that, we had only two scopes. function & global
The Block Scope rules apply only to variables declared with the let or const keywords. If you use the var to declare the variable, then it will become part of the parent scope.
For Example, In the following example, blockVar becomes part of the block scope. Trying to access it outside the block statement will result in ReferenceError.
//Code block
{
let blockVar="Hello for blockVar"
console.log(blockVar) //Hello for blockVar
}
//All Codes below throws an exception
//Uncaught ReferenceError: blockVar is not defined
//Function
function someFunc() {
console.log(blockVar)
}
someFunc();
//Code block
{
console.log(blockVar)
}
//if,for,switch also creates an code block
if (true) {
console.log(blockVar)
}
//Global
console.log(blockVar)
The block scope is formed wherever you find the { }. For example, bodies of if/else statements, while loops, for loops, etc
In the For Loop below, the body of the loop is enclosed in a { }, hence forms a block scope. Here the variable test is not accessible from the outside. The Loop variable (i) also become part of the scope, although it appears outside of the curly braces.
for (let i = 0; i < 5; i++) {
let test="hellp"
console.log(i);
}
//Both will result in error
//console.log(test) //error
//console.log(i) //error
The block scope does not apply to the var variable. In the above code change the let keyword with var keyword. Now the blockVar becomes the global variable.
//Code block
{
var blockVar="Hello for blockVar"
console.log(blockVar) //Hello for blockVar
}
//All the code below works becuase blockVar is now global variable
//Function
function someFunc() {
console.log(blockVar) //Hello for blockVar
}
someFunc();
{
console.log(blockVar) //Hello for blockVar
}
if (true) {
console.log(blockVar) //Hello for blockVar
}
console.log(blockVar) //Hello for blockVar
In the following example, the test variable is declared within a block statement, which is in turn within a function. Since block scope does not apply to var, test variable will become part of the parent scope, which is addNum function. That is why accessing test outside the function will result in an error.
function addNum() {
{
var test="Hello"
}
console.log(test) //Hello
}
addNum();
console.log(test) //Error
Scope inside another scope is a nested Scope or Scope chain.
In the example of for loop, we used var instead of let. Now both loop variable i and test becomes the global variable.
for (var i = 0; i < 5; i++) {
var test="hellp"
console.log(i);
}
//no error
console.log(test) //Hello
console.log(i) //5
A Variable we declare inside the modules, but outside of any function becomes part of the Module Scope. Other Modules can access it only if we explicitly export it.
We will learn about module in a future article.
A nested Scope or Scope chain is formed when we create a scope inside another scope. For Example, a function inside a function, block statement inside a function or function inside a block statement, etc.
Global scope is the root scope of all other scopes.
The variable defined in the parent scope is accessible in the child scope. This is called Lexical scope. But the parent cannot access the properties of its child scope.
The following example has three functions. funcGrandChild is inside the funcChild, which in turn inside the funcParent. Each function has its own scope. These scopes form a scope chain.
The funcGrandChild can read all the variables defined by the parent scopes.
x=10
function funcParent() {
let a = 1;
funcChild = function () {
let b = 2
funcGrandChild = function () {
let c = 3
//child can access all the variables
console.log("funcGrandChild",x,a,b,c)
}
funcGrandChild()
console.log("funcChild",x,a,b)
//Error Cannot access c
//console.log("funcChild",c)
}
funcChild()
console.log("funcParent",x,a)
//Error Cannot access b & c
//console.log("funcChild",b)
//console.log("funcChild",c)
}
funcParent();
//You can only access x here.
Obj = {
value: 2,
func: function () {
console.log(value)
}
}
Obj.func();
If we declare a variable that has the same name as one from the parent scope, the variable from the parent scope becomes invisible in the current scope and all its child scopes
Inside the somFunc(), the global x is invisible as we have declared a new local variable x.
let x = "global";
function somFunc() {
let x = "local";
console.log(x); // local
//We cannot access the global x here
}
somFunc();
console.log(x); // global
You can declare a variable, without using var, let or const keywords in JavaScript. Such a variable will become part of the global scope implicitly.
For Example, take this for Loop. We have forgotten to use the keyword in the declaration of variable i. This is one of the common mistakes. The variable i becomes part of the global scope.
//Example 1
for (i=0; i < 10; i++) {
// do something
}
console.log(i) //10
Here is another example. The j variable also becomes part of the global scope.
//Example 2
function someFunc() {
j=10
}
someFunc()
console.log(j) //10
These variables stay in the memory until we unload the page. It is an even bigger problem in Single Page applications where we never refresh the page.
You can avoid such problems by declaring the “use strict”. This option added in the ES5 version of the JavaScript. The following code results in an error.
"use strict"
//Example 1
for (i=0; i < 10; i++) {
// do something
}
//Uncaught ReferenceError: i is not defined
console.log(j) //10
Read More
