DEV Community: Ming-Shiuan Tsai

JavaScript: Introduction to Scope (function scope, block scope)

Ming-Shiuan Tsai — Tue, 27 Nov 2018 03:13:28 +0000

What is Scope?

Scope determines the visibility or accessibility of a variable or other resource in the area of your code.

Global Scope

There's only one Global scope in the JavaScript document. The area outside all the functions is consider the global scope and the variables defined inside the global scope can be accessed and altered in any other scopes.

//global scope
var fruit = 'apple'
console.log(fruit);        //apple

function getFruit(){
    console.log(fruit);    //fruit is accessible here
}

getFruit();                //apple

Local Scope

Variables declared inside the functions become Local to the function and are considered in the corresponding local scope. Every Functions has its own scope. Same variable can be used in different functions because they are bound to the respective functions and are not mutual visible.

//global scope
function foo1(){
    //local scope 1
    function foo2(){
        //local scope 2
    }
}

//global scope
function foo3(){
    //local scope 3
}

//global scope

Local scope can be divided into function scope and block scope. The concept of block scope is introduced in ECMA script 6 (ES6) together with the new ways to declare variables -- const and let.

Function Scope

Whenever you declare a variable in a function, the variable is visible only within the function. You can't access it outside the function. var is the keyword to define variable for a function-scope accessibility.

function foo(){
    var fruit ='apple';
    console.log('inside function: ',fruit);
}

foo();                    //inside function: apple
console.log(fruit);       //error: fruit is not defined

Block Scope

A block scope is the area within if, switch conditions or for and while loops. Generally speaking, whenever you see {curly brackets}, it is a block. In ES6, const and let keywords allow developers to declare variables in the block scope, which means those variables exist only within the corresponding block.

function foo(){
    if(true){
        var fruit1 = 'apple';        //exist in function scope
        const fruit2 = 'banana';     //exist in block scope
        let fruit3 = 'strawberry';   //exist in block scope

    }
    console.log(fruit1);
    console.log(fruit2);
    console.log(fruit3);
}

foo();
//result:
//apple
//error: fruit2 is not defined
//error: fruit3 is not defined

Lexical Scope

Another point to mention is the lexical scope. Lexical scope means the children scope have the access to the variables defined in the parent scope. The children functions are lexically bound to the execution context of their parents.

function foo1(){
    var fruit1 = 'apple';        
    const fruit2 = 'banana';     
    let fruit3 = 'strawberry';
    function foo2(){
        console.log(fruit1);
        console.log(fruit2);
        console.log(fruit3);
    }
    foo2();
}

foo1();

//result:
//apple
//banana
//strawberry

For detailed comparison between var, let and const, take a look of JavaScript: var, let, const!

JavaScript: var, let, const

Ming-Shiuan Tsai — Thu, 15 Nov 2018 02:09:48 +0000

In ES6, a new way to declare variable is introduced -- const and let. Before ES6, developers use var to declare different variables. However, it may cause potential issues or implicit bugs in the code. In this article, I'll introduce const, let, var and give a clear comparison.

Comparison Table

	var	let	const
reassigned	O	O	X
Scope	Function Scope	Block Scope	Block Scope
Reference before declaration	O	X	X

const

const is used when you don't want to reassign the variable. It stays constant once it's declared. As a result, const is always a default option for me if I don't need to reassign the variable. In this way, we can also avoid the case when we occasionally declare the same variable name in other files.

let

When it comes to the situation I need to reassign a variable, let is more welcome than var after ES6. The reason is that let is in block scope which means it only exists within its own scope. For Example,

let foo='outside';
if(true){
    let foo = 'inside'
    console.log(foo);            //print inside

}
console.log(foo);                //print outside

After if condition, foo is equal to 'outside' rather than the value we have inside the if statement ('inside').

var

var is an old way to declare variable in javaScript and it's now the weakest keyword to define a variable. The variable declared by var may or may not be reassigned and because it is in function scope, the variable may or may not be used for entire function. If the variable is reassigned accidentally within a for loop (block scope), then that's when things can easily go wrong. People can overwrite the parent assignments in this case. For example,

var foo='outside';
if(true){
    var foo = 'inside'
    console.log(foo);            //print inside

}
console.log(foo);                //print inside

To clarify, var is in function scope. So if people do reassignment in a function, the variable outside the function wouldn't be changed.

var foo='outside';
var fooFunction = function(){var foo='inside'}
fooFunction();
console.log(foo);    //print outside

Another potential issue with var is that it can be referenced before it's assigned. For example,

var x = 'foo';
console.log(x);         //foo
console.log(y);         //undefined, no errors!!
var y = 'late foo';     //late foo 
console.log(y);

There's no errors when using variable before declaration. Javascript engine reads the above script as

var x;             //variable declaration
var y;             //variable declaration
x = 'foo';         //variable initialization
console.log(x);    //foo
console.log(y);    //undefined, no errors!!
y ='late foo';     //variable initialization
console.log(y);    //late foo

This is because Javascript engine only hoists declaration not initialization. Although people can avoid this issue by using 'use strict', const and let are still stronger and can reduce potential error and make the code more clear.

JavaScript: What is 'this'?

Ming-Shiuan Tsai — Mon, 05 Nov 2018 02:53:16 +0000

this is an useful but also confusing keyword. Here, I'll mainly introduce how it works in a function call.

In most cases, the value of this in a function depends on how the function is called. Let's take a look of some examples. If we write a program to increase the salary of an employee,

const employee = {
    name: 'Foo',
    salary: 1000,
    giveRaise: function(){
        this.salary = this.salary*1.03;
    }
}

employee.giveRaise();
console.log(employee)        
//result:
//{   
//    name:'foo',
//    salary:1030,
//    giveRaise:[Function:giveRaise]
//}

Foo's salary changes from 1000 to 1030. this in the function is correctly bound to the employee object. However, if the function above is called in this way:

giveRaiseFunction = employee.giveRaise;
giveRaiseFunction();
console.log(employee);
//result:
//{
//    name: 'Foo',
//    salary: 1000,
//    giveRaise: [Function: giveRaise]
//}

Unfortunately, Foo's salary is not increased. What happened is when the function,giveRaiseFunction(), is called, the function is not bound to any object. As a result, this will refer to the global object and in browser, it'll be window and there'll be no salary keyword in window. In some cases, if people use strict mode, this will be whatever it was set to when executing the context and the default will be undefined.

Now, that's consider another situation, if we need a more complicated function, we may need a function which calls the other functions. For example,

const employee = {
    name: 'Foo',
    salary: 1000,
    giveRaise: function(){
        const calculateIncrease = function(){
            //console.log(this);
            return this.salary*0.03
        }
    }
    //console.log(this);
    //console.log('-------------------------');
    this.salary = this.salary+calculateIncrease();
}

employee.giveRaise();
console.log(employee)

//result:
//{
//    name: 'Foo',
//    salary: NaN,
//    giveRaise: [Function: giveRaise]
//}

This time, a strange result happened. Salary value is consider not a number. If we do console.log test to check what exactly happened, we'll find this keyword in calculateIncrease function is actually bound to global object instead of employee object.

In ES6, a new syntax to define a function is introduced -- arrow functions. When using arrow function syntax, the function doesn't have its own this binding. It remains the this value of the enclosing lexical context (arrow function's parent). In this way, this will refer to the parent's object which is employee in this example.

const employee = {
    name: 'Foo',
    salary: 1000,
    giveRaise: function(){
        const calculateIncrease = ()=>{
            return this.salary*0.03
        }
        this.salary = this.salary + calculateIncrease();
    }
}

employee.giveRaise();
console.log(employee)

//result:
//{
//    name: 'Foo',
//    salary: 1030,
//    giveRaise: [Function: giveRaise]
//}

Cookie, localStorage, or sessionStorage?

Ming-Shiuan Tsai — Sun, 28 Oct 2018 06:07:58 +0000

Cookie, localStorage, and sessionStorage are all the simple data storage ways for client-side storage. Cookie is more like an old school way to handle the simple data stored on the client-side. In HTML5, web storage, such as localStorage or sessionStorage is introduced and it’s also easier to use.

Cookies

Persistence: user can set expiration time for each cookies.
Storage: there’s only about 4KB space for entire cookie data.
Traffic: data needs to be sent back to the server for all the HTTP requests, which increases the traffic between client and server.
Works for old browsers.

localStorage

Persistence: data exist until it’s deleted
Storage: available space increase to around 5 MB
Traffic: less traffic because not all of the HTTP requests need to send data back to the server
Domain: data only stays in the same domain, which means if data is stored on website A, next time it can only be accessed on website A. To be clear of the domain used here, it means the same website field. For example, whichever different posts or different personal pages in Facebook that you are browsing are all under facebook.com. As a result, those pages are all under the same domain.

sessionStorage

sessionStorage is similar to localStorage. The only difference will be the persistence of the data. For sessionStorage, once user leaves the domain, such as closing the tabs or windows, the sessionStorage is emptied.

How to use localStorage and sessionStorage?

Both localStorage and sessionStorage use key-value pair and their syntax are similar. Followings are the examples.

Syntax

//To store the data:
localStorage.setItem(“key”,”value”);

//To retrieve the data:
localStorage.getItem(“key”);

//To update the data (the same as to store the data):
localStorage.setItem(“key”,”value”);

//To remove one entry:
localStorage.removeItem(“key”);

//To clear all the data:
localStorage.clear();