DEV Community: Lawaanu Borthakur

List of Mostly Used Inbuilt JS Functions

Lawaanu Borthakur — Tue, 01 Jul 2025 14:38:29 +0000

Here is the full list of mostly used JavaScript inbuilt functions along with their definitions and usage examples, categorized for easy reading.

✅ ARRAYS

const arr = [1, 2, 3];

// 1. push() – Adds element to the end
arr.push(4); // [1,2,3,4]

// 2. pop() – Removes last element
arr.pop(); // [1,2,3]

// 3. shift() – Removes first element
arr.shift(); // [2,3]

// 4. unshift() – Adds element at the start
arr.unshift(1); // [1,2,3]

// 5. concat() – Merges arrays
arr.concat([4, 5]); // [1,2,3,4,5]

// 6. slice() – Extracts a section (non-destructive)
arr.slice(0, 2); // [1,2]

// 7. splice() – Adds/removes items (destructive)
arr.splice(1, 1); // removes 1 element at index 1

// 8. indexOf() – Finds index of an element
arr.indexOf(3); // returns index or -1

// 9. filter() – Filters based on a condition
arr.filter(x => x > 1);

// 10. map() – Transforms each element
arr.map(x => x * 2);

// 11. Array.from() – Converts iterable/string to array
Array.from('abc'); // ['a','b','c']

// 12. toString() – Converts array to comma string
arr.toString(); // "1,3"

// 13. includes() – Checks for existence
arr.includes(3); // true

// 14. sort() – Sorts array
arr.sort(); // in-place sort

// 15. reverse() – Reverses array
arr.reverse();

// 16. join() – Joins into a string
arr.join('-'); // "1-3"

// 17. find() – Finds first matching element
arr.find(x => x > 1);

// 18. forEach() – Loops through elements
arr.forEach(x => console.log(x));

// 19. every() – Checks if all elements meet condition
arr.every(x => x > 0);

// 20. some() – Checks if any meet condition
arr.some(x => x === 3);

✅ STRINGS

let str = "hello";

// 1. charAt() – Gets character by index
str.charAt(1); // 'e'

// 2. toUpperCase() – Uppercase
str.toUpperCase();

// 3. toLowerCase() – Lowercase
str.toLowerCase();

// 4. indexOf() – First occurrence index
str.indexOf('l');

// 5. lastIndexOf() – Last occurrence index
str.lastIndexOf('l');

// 6. substring() – Slice string between indexes
str.substring(1, 4);

// 7. replace() – Replace part of string
str.replace('e', 'a');

// 8. split() – Split into array
str.split(''); // ['h','e','l','l','o']

// 9. trim() – Removes whitespace
"  hello  ".trim(); // "hello"

✅ OBJECTS

const obj = { a: 1, b: 2 };

// 1. Object.keys() – Array of keys
Object.keys(obj);

// 2. Object.values() – Array of values
Object.values(obj);

// 3. Object.entries() – Array of [key, value]
Object.entries(obj);

// 4. Object.assign() – Merge objects
Object.assign({}, obj);

// 5. Object.freeze() – Lock object (no change)
Object.freeze(obj);

// 6. Object.seal() – Prevent add/delete
Object.seal(obj);

// 7. hasOwnProperty() – Check own property
obj.hasOwnProperty('a');

// 8. Object.create() – Create with prototype
const newObj = Object.create(obj);

✅ DATE

const date = new Date();

// 1. new Date() – Current date/time
// 2. getDate() – Day of the month
date.getDate();

// 3. getMonth() – Month (0-11)
date.getMonth();

// 4. getFullYear() – Year
date.getFullYear();

// 5. getHours(), getMinutes(), getSeconds()
date.getHours();
date.getMinutes();
date.getSeconds();

// 6. toISOString() – ISO string
date.toISOString();

// 7. toLocaleDateString() – Localized date
date.toLocaleDateString();

// 8. getTime() – ms since 1970
date.getTime();

✅ MATH

// 1. Math.abs() – Absolute value
Math.abs(-5);

// 2. Math.round() – Round to nearest
Math.round(4.5);

// 3. Math.floor() – Round down
Math.floor(4.9);

// 4. Math.ceil() – Round up
Math.ceil(4.2);

// 5. Math.max(), Math.min()
Math.max(1, 2, 3);
Math.min(1, 2, 3);

// 6. Math.pow(), Math.sqrt()
Math.pow(2, 3); // 8
Math.sqrt(16); // 4

// 7. Math.random() – 0 to 1
Math.random();

// 8. Math.PI
Math.PI;

✅ SET

const s = new Set();

// 1. add(), delete(), has()
s.add(1);
s.delete(1);
s.has(1);

// 2. size – Count
s.size;

// 3. clear() – Remove all
s.clear();

// 4. forEach() – Iterate
s.forEach(val => console.log(val));

// 5. values(), entries()
[...s.values()];
[...s.entries()];

✅ MAP

const m = new Map();

// 1. set(), get(), has(), delete()
m.set('a', 1);
m.get('a');
m.has('a');
m.delete('a');

// 2. size – Count
m.size;

// 3. clear()
m.clear();

// 4. forEach(), keys(), values(), entries()
m.forEach((v, k) => console.log(k, v));
[...m.keys()];
[...m.values()];
[...m.entries()];

✅ LOOPS

const obj = { a: 1, b: 2 };

// 1. for...in – Loop over object keys
for (let key in obj) {
  console.log(key);
}

// 2. for...of – Loop over iterable values
for (let val of [1, 2, 3]) {
  console.log(val);
}

// 3. forEach – Loop over array items
[1, 2, 3].forEach(x => console.log(x));

What is the difference between real DOM and virtual DOM with example?

Lawaanu Borthakur — Sun, 11 Feb 2024 13:49:37 +0000

Let's illustrate the difference between real DOM updates and virtual DOM updates with an example scenario:

Scenario:

Imagine you're building a web application that displays a list of items, and users can add new items to the list by clicking a button.

1. Real DOM Updates:

In this approach, every time a new item is added to the list, the real DOM is directly manipulated to reflect the change.

// HTML
<ul id="item-list"></ul>

// JavaScript
const itemList = document.getElementById('item-list');

function addItem() {
    const newItem = document.createElement('li');
    newItem.textContent = 'New Item';
    itemList.appendChild(newItem);
}

Problem with Real DOM Updates:

Each time addItem() is called, the real DOM is modified, triggering reflows and repaints.
If there are many items in the list, frequent updates can lead to performance issues, causing the interface to become less responsive.

2. Virtual DOM Updates:

In this approach, instead of directly modifying the real DOM, changes are made to a virtual representation of the DOM first, and then the virtual DOM is compared with the previous state to determine the minimal set of updates needed.

// React.js example
import React, { useState } from 'react';

function ItemList() {
    const [items, setItems] = useState([]);

    function addItem() {
        setItems(prevItems => [...prevItems, 'New Item']);
    }

    return (
        <div>
            <button onClick={addItem}>Add Item</button>
            <ul>
                {items.map((item, index) => (
                    <li key={index}>{item}</li>
                ))}
            </ul>
        </div>
    );
}

How Virtual DOM Addresses the Problems:

When addItem() is called, React.js updates the virtual DOM by adding a new item to the list.
React.js then calculates the difference (diff) between the new virtual DOM and the previous one.
Only the minimal set of changes needed to update the real DOM is applied, avoiding unnecessary reflows and repaints.
This approach results in better performance and a smoother user experience, especially in applications with dynamic content or frequent updates.

In summary, the virtual DOM provides an efficient and optimized way to update the real DOM, improving performance and user experience in web applications.

What is Virtual DOM in React?

Lawaanu Borthakur — Sun, 11 Feb 2024 13:46:05 +0000

The Virtual DOM (Document Object Model) is a concept used in web development frameworks like React.js to optimize the performance of web applications. It's a virtual representation of the DOM tree, which is a hierarchical representation of HTML elements in a web page.

Here's how the Virtual DOM works:

Virtual DOM Creation: When changes are made to the data or state of a web application (for example, when a user interacts with the interface), React.js creates a new virtual DOM tree that reflects these changes. This virtual DOM tree is a lightweight, in-memory representation of the actual DOM.
Difference Calculation: After the virtual DOM is updated, React.js compares it with the previous virtual DOM (created before the change). It calculates the differences, or "diffs," between the two virtual DOM trees to determine which parts of the actual DOM need to be updated.
Minimal DOM Updates: Instead of directly updating the entire DOM, React.js identifies only the specific elements that have changed based on the calculated differences. It then updates these elements in the actual DOM, minimizing the number of DOM manipulations required.
Batched Updates: React.js may batch multiple updates together and perform them in a single pass to further optimize performance. This reduces the overhead associated with frequent DOM updates and enhances the responsiveness of the web application.

By using the Virtual DOM, React.js and similar frameworks can achieve faster rendering performance and better overall efficiency compared to directly manipulating the actual DOM. This approach allows developers to create dynamic and interactive web applications with smoother user experiences.

Simple JavaScipt Project using CRUD Operations.

Lawaanu Borthakur — Mon, 31 Jan 2022 00:56:49 +0000

In this tutorial, we will learn how to create a CRUD (Create, Read, Update, and Delete) project with plain JavaScript. We will not use any JavaScript frameworks instead we will use plain JavaScript, CSS, and HTML to build the My Todo List CRUD project.

Let's develop the CRUD project step-by-step (My Todo List App) using HTML, CSS, and JavaScript.

This is the live demo of what we will be building.

1.Create a HTML Page

Lets create a HTML page index.html and create a structure of the web page by taking the reference of the above gif picture.



<!DOCTYPE html>
<html>
<head>
<title>My Todo List</title>
</head>
<body>
   <section class="mytodo-container">
   <!-- Create Form -->
   <div class="mytodo-list">
   <form action="javascript:void(0);" id="CreateForm"><input type="text" id="add-task" placeholder="New Task"> <input type="submit" onclick="CreateTask()" value="Create"></form>
   <!-- Update Form -->
    <form action="javascript:void(0);" id="UpdateForm"> 
    <input type="text" id="update-task"> <input type="submit" value="Update"> <a onclick="CloseInput()" id="close">&#10006;</a></form>
   <!-- Counter -->
   <p id="counter"></p>
   <!-- MyTodo List Table -->
    <table>
    <tr><th>My Todo List</th></tr>
    <tbody id="mytodo-tasks"></tbody>
    </table>
    </div>
    </section>
</body>
</html>

Note:
We have created a form with id="CreateForm" to add new task to the MyTodo list. We also created another form with id="UpdateForm" to edit task of the MyTodo list.

We have a paragraph tag with id="counter" to display the total number of tasks in the list. We will display the total count with the help of javascript.

Again we have a table with heading My Todo List. Later we will insert the rows inside the tbody html tag with the help of javascript.

2.Add CSS to the HTML Page using HTML style tag.



<style>
input[type='submit'],button,#close
{
 cursor: pointer;
}
.mytodo-list
{
  width:320px;
  margin:100px auto;
}
.counter
{
  margin: 10px 0;
}
#UpdateForm
{   
  display:none;
}
</style>

Note:
With CSS I have aligned the div element to the center. I also made the form (id="UpdateForm") display:none. So, that I can add a feature in such a way that when we click on the Update Button on the MyToDo list then the form(id="UpdateForm") is visible. This feature will be added with the help of javascript.

3.Add JavaScipt to the HTML Page using HTML script tag.



<script>

var mytodo_list=["Do Exercise","Take Bath","Have Breakfast"];
/*CREATE*/
function CreateTask()
{  
     var task=document.getElementById("add-task").value;
     mytodo_list.push(task);
     ReadAllTask();
}
/*READ*/
function ReadAllTask()
{
    var data='';
for(var i=0;i<mytodo_list.length;i++)
{
    data+='<tr>';
    data+='<td>' + mytodo_list[i] + '</td>';
    data+='<td><button onclick=UpdateTask(' +i+ ')>Update</button></td>';
    data+='<td><button onclick=DeleteTask('+i+')>Delete</button></td>';
    data+='</tr>';
}
/*counter*/
document.getElementById("counter").innerHTML=mytodo_list.length +" Task";
document.getElementById("mytodo-tasks").innerHTML=data;
}
ReadAllTask();
/*UPDATE*/
function UpdateTask(item)
{
document.getElementById("UpdateForm").style.display='block';
document.getElementById("update-task").value=mytodo_list[item];
document.getElementById("UpdateForm").onsubmit=function()
{
    var task=document.getElementById("update-task").value;
    mytodo_list.splice(item,1,task.trim());

    ReadAllTask();
    CloseInput();
}

}
/*DELETE*/
function DeleteTask(item)
{   
    mytodo_list.splice(item,1);
    ReadAllTask();
}

function CloseInput()
{
    document.getElementById("UpdateForm").style.display='none';
}

</script>

Note:
Here I define mytodo_list as global variable with an array which consist of tasks.

Now let us discuss the CRUD(CREATE READ UPDATE DELETE) operations used in this application.

CREATE

Create is something like adding a new entry to our array.

CreateTask function adds new task to the array mytodo_list

READ

Read is like reading the entire content of the array.

ReadAllTask function will read all the task of array with the help of for loop and display it in html table by populating the table with rows. This function also helps to display the counter by calculating the length of the array.

UPDATE

Update is like updating the existing content of the array with new value.

UpdateTask function is used to update the existing tasks of the array with the splice method. We can update the task by clicking on the update button which display the form(id="UpdateForm") and editing the content. The form(id="UpdateForm") is displayed by changing the style property of the form(id="UpdateForm") to "block" using javascript.

DELETE

Delete is like deleting the existing content of the array.

DeleteTask function is used to delete the existing task from the array with the help of splice method.

In the addition to all the CRUD operation there is another function added that is CloseInput function which helps to hide the form (id="UpdateForm") after updating or when the close button is clicked.

Wrap Up !!

I hope you enjoyed this article. Thank you for reading. Please share it with your network. Don’t forget to leave your comments below.

How Pass By Value and Pass By Reference works?

Lawaanu Borthakur — Tue, 18 Jan 2022 05:46:26 +0000

Javascript uses Pass By Value for primitive data types and Pass By Reference for objects.

This is one of the very important concept in JavaScript. So, let us understand it with some examples.

Pass By Value

In pass by value, the function is called by directly passing the value of the variable as argument and changing the argument inside the function does not affect the value of variable passed from outside the function.

function PassByValue(numOne, numTwo) { 
    console.log("Inside PassByValue Function"); 
    numOne = 300; 
    numTwo = 600; 
    console.log("numOne =" + numOne +" numTwo =" +numTwo); 
  } 
  let numOne = 12; 
  let numTwo = 23; 
  console.log("Before PassByValue Function"); 
  console.log("numOne =" + numOne +" numTwo =" +numTwo); 
  PassByValue(numOne, numTwo) 
  console.log("After PassByValue Function"); 
  console.log("numOne =" + numOne +" numTwo =" +numTwo);

Output:

Before PassByValue Function
numOne =12 numTwo =23
Inside PassByValue Function
numOne =300 numTwo =600
After PassByValue Function
numOne =12 numTwo =23

In the above example we can see that the value of numOne and numTwo remains same after the function is called.

Pass By Reference

In Pass By Reference, Functions are called directly by passing the reference/address of the variable as argument. Changing the argument inside the function affect the value of the variable passed from outside the function.

function PassByReference(Obj) { 
    console.log("Obj,Inside PassByReference Function"); 
    Obj.num=44
    console.log(Obj); 
  } 
  let Obj ={num:12}; 
  console.log("Obj,Before PassByReference Function"); 
  console.log(Obj); 
  PassByReference(Obj) 
  console.log("Obj,After PassByReference Function"); 
  console.log(Obj);

Output:

Obj,Before PassByReference Function
{ num: 12 }
Obj,Inside PassByReference Function
{ num: 44 }
Obj,After PassByReference Function
{ num: 44 }

In the above example we can see that the value of Obj changed after the function is called.

In summary, JavaScript primitive data types are passed by value, while non-primitive data types (objects and arrays) are passed by reference.

Wrap Up!!

I hope you enjoyed this article. Thank you for reading. Please share it with your network.

Type Coercion in JavaScript.Explained!

Lawaanu Borthakur — Wed, 12 Jan 2022 14:26:04 +0000

What do you know about type coercion in JavaScript? This question often asked in an interview to a JavaScript developer. If you do not know the answer or have not heard this term before, they may put it in another way "What will be the output if you try to add 20 and '22'?"

What is Type Coercion?

Type coercion is the process of implicit or automatic conversion from one datatype to another.

Type Coercion is often confused with Type conversion, although there is a subtle difference between them. Type Coercion is always implicit whereas Type Conversion(or typecasting) can be either implicit or explicit.

As a JavaScript developer we should be aware of different ways a type coercion can take place to write better code. So, lets dive into it.

Type coercion in JavaScript only coerces to the string, number, and Boolean primitive types. There’s no way in JavaScript to coerce a value type to object or function.

Four ways that type coercion can takes place are:

1.Number to String:

When a non-string value is added to a string, it always implicitly coerce or automatically convert the non-string value to a string.

 var value = '20' + 22;
 console.log(value);//Output: 2022

In the above example which is also the question asked in the beginning, number 22 in implicitly converted to string '22' and then concatenate the two values together. The output is a string i.e “2022”.

2. String to Number:

When performing operations such as subtraction (-), multiplication (*), division (/) or modulus (%), all non-numeric values are converted into number, as these operations can only be performed between numbers.

var value = 20 - '5';
console.log(value);//Output: 15

In the above example string '5' in implicitly converted to number 5 and then the subtraction between the two values takes place. The output is a number i.e 15.In the same way, you can check for other operations.

3. Boolean to Number:

When Boolean is added to a number, the Boolean value is converted to a number as it is safe and easy to convert Boolean values into Number values. Boolean value can be represented as 0 for ‘false’ or 1 for ‘true’.

var value1 = 2 + true;;
console.log(value1);//Output: 3

var value2 = 2 + false;;
console.log(value2);//Output: 2

In the above example true in implicitly converted to number 1 and then the addition between the two values takes place. The output is a number i.e 3.In the same way, the false is implicitly converted to 0 and then the values were added. The output is a number i.e 2.

4. The Equality Operator:

Double equal(==) operator can be used to compare values regardless of their type. This is done by implicitly converting a non-number data type to a number. Double equal(==) uses the abstract equality algorithm to decide how to compare values.

 var value = (20 == '20');
 console.log(value);//Output: true

In the above example string '20' in implicitly converted to number 20 and then the comparison is made. The output is true.

Conclusion

Type Coercion in JavaScript can be a tricky topic and if you are not sure about how JavaScript will perform type conversion on your value , check it out in the console first.

This is a short overview that provides the basics understanding of type coercion, however, reading the ECMAScript specifications can provide a deep understanding about why these unexpected type coercion results occur.

Wrap Up!!

I hope you enjoyed this article. Thank you for reading. Please share it with your network. Don’t forget to leave your comments below.

"use strict" in JavaScript and its Benefits

Lawaanu Borthakur — Tue, 11 Jan 2022 12:48:43 +0000

As we know that JavaScript is known for it's weird behaviors. There are certain situation in JavaScript, which we know that we should not do but we can do and we will not get any errors for it. So, in order solve this problem "use strict" was introduced. Let me explain you how it solves the problem.

"use strict"

"use strict" is a directive that came out with ES5 which helps to write more secure code with less prone errors.

what changes "use strict" made?

It changes the way that the JavaScript is executed. It helps to use a strict operating context, what that really means is that the errors which were being ignored by the compiler, will now throw exception messages. Strict mode is supposed to help us write more secure JavaScript code. Basically JavaScript has been really forgiving bad syntax and it lets us get away with things that we shouldn't usually code which could have side-effects like using variables that have yet to be defined. So, let me explain you with some examples:
Example 1:

language="JS";
console.log(language);//Output: JS

"use strict"
language="JS";
console.log(language);//Output: ReferenceError

If we run the above code without "use strict" we will see that we will get the output as JS but with "use strict" it will throw an reference error as we are not explicitly defining the language variable with keywords like var, let, const.So now lets move to an another example.
Example 2:

(function programming()
{
language="JS";
console.log("Inside Function->"+language);//Output:Inside Function->JS
})();
console.log("Outside Function->"+language);//Output:Outside Function->JS

(function programming()
{
"use strict"
language="JS";
console.log("Inside Function->"+language);//Output:Inside Function->JS
})();
console.log("Outside Function->"+language);//Output:ReferenceError

If we run the above code which includes a self-executing function.Without "use strict" , we will notice that language variable behaves as a global variable and can be accessed outside the function. This is probable not what a developer intended to do and it could have unintended side-effects.With "use strict" ,we will notice that outside the function it will throw a reference error as we are not explicitly defining the language variable with any of the keywords like var, let, const.

We can set the entire program to a strict mode or scope it to a specific function.

Let us see more what else a strict mode prevent us from doing.

1.Deleting a variable, a function or an argument is not allowed.

"use strict"
language="JS";
delete language;//This will throw an error

2.Using an object, without declaring it, is not allowed.

"use strict";
 language= {l1:"JS", l2:"JAVA"};      // This will cause an error

3.Deleting a function is not allowed.

"use strict";
function language(l1, l2) {};
delete language;                // This will cause an error

4.Duplicating a parameter name is not allowed.

"use strict";
function language(l1, l1) {};   // This will cause an error

5.Octal numeric literals are not allowed.

"use strict";
var language = 010;             // This will cause an error

6.Escape characters are not allowed.

"use strict";
var language = \010;            // This will cause an error

7.Writing to a read-only property is not allowed.

"use strict";
var language = {};
Object.defineProperty(language, "l1", {value:0, writable:false});
language.l1 = 3.14;            // This will cause an error

8.Writing to a get-only property is not allowed.

"use strict";
var language = {get l1() {return 0} };
language.l1 = 3.14;            // This will cause an error

9.Deleting an undeletable property is not allowed.

"use strict";
delete Object.prototype; // This will cause an error

10.The string "eval" cannot be used as a variable.

"use strict";
var eval = 3.14;         // This will cause an error

11.The string "arguments" cannot be used as a variable.

"use strict";
var arguments = 3.14;    // This will cause an error

12.The with statement is not allowed.

"use strict";
with (Math){x = cos(2)}; // This will cause an error

13.For security reasons, eval() is not allowed to create variables in the scope from which it was called.

"use strict";
eval ("var x = 2");
alert (x);               // This will cause an error

Should we use "use strict" in our script?

Yes, "use strict" was introduced to allow developers to opt-in into a better version of JavaScript.

P.S:As "use strict" is a literal expression and not a statement. So, some older browsers has backward compatibility issue. At the worst, it will simply be ignored and run normally.

Wrap Up!!

I hope you enjoyed this article. Thank you for reading. Please share it with your network. Don’t forget to leave your comments below.

Difference between == and === in JavaScript. Explained!

Lawaanu Borthakur — Mon, 10 Jan 2022 05:56:31 +0000

== and === operator has always been the topic of online discussion. Let's see how these two are different from each other.

Double equal(==) sign check for loose equality while Triple equal (===) sign checks for strict equality. The difference is that (==)loose equality will attempt to resolve the datatype via type coercion before making it comparison while (===)strict equality will return false if the data types are different. Let me give you some examples to understand it better.

/*Example 1*/
console.log(2== "2");//Output:true
console.log(2 === "2");//Output:false

/*Example 2*/
console.log(true == "1");//Output:true
console.log(true === "1");//Output:false

/*Example 3*/
console.log("I am a String" == new String("I am a String."));//Output:true
console.log("I am a String" === new String("I am a String."));//Output:false

Example 1

In example 1 you can see that using two equal signs(==) returns true because the string "2" is converted to the number 2 before the comparison is made but with (===)three equal signs it sees that the types are different 2 is the number and "2" is a string and then it returns false.

Example 2

In example 2 you can see that using two equal signs(==) returns true because in JavaScript true _ is 1 and _false is 0.So it is converted to 1 before comparison in loose equality. However in (===)strict equality it is not converted and returns false

Example 3

This is an interesting example. In (===) strict equality we can see that it returns false. It illustrates that String Literals are different from String Object. However in (==) loose equality it convert the object to literals before comparison and then returns true.

Which one is better to use "==" or "==="?

It is better to use (===) strict equality in your code because it will increase the clarity of code and prevent any false positive.

Wrap Up!!

I hope you enjoyed this article. Thank you for reading. Please share it with your network. Don’t forget to leave your comments below.

What Scope says about Variable in JavaScript?

Lawaanu Borthakur — Sun, 09 Jan 2022 18:33:19 +0000

Scope is one of the fundamental concept that every JavaScript developer should know to become a better JavaScript Developer.
So, in the article I will explain about it and how it work in JavaScript.

What is Scope?

Scope determines where a variable is visible in JavaScript .In JavaScript functions and objects are also variable.

How many types of scopes are there?

Local Scope
Global Scope
Block Scope

Three main points to keep in mind

A variable is said to be in local scope when it is defined inside a function.
A variable is said to be in global scope when it is defined outside a function.
A new scope is created each time a function is invoked.

Global Scope

When we first write JavaScript on a JavaScript file, you are already in Global scope. There is only one global scope in the entire JavaScript document. Variables are in the Global scope when defined outside of a function.

var name = 'Mike';

The value of the variables within the Global scope can be accessed and changed in any other scopes.

var name = 'Mike';

function Teacher(){
    console.log("Inside Function before change -> name:", name);
    name = 'Harry';
    console.log("Inside Function after change-> name: ", name);
}

Teacher();

console.log("Outside function-> ", language);

Output:
Inside Function before change -> name: Mike Inside Function after change-> name: Harry

Local Scope

Local Scope is also known as Function scope. Variables defined within a function is in local scope. This means that variables with the same name can be used for different functions. This is because those variables are bound to their respective functions, each with different scope, and is not accessible to the other functions.

var name = 'Mike';

function Teacher() {
    var name = 'John'
    console.log("Inside Function Teacher()-> name:", name); //Output: John
    function Student() {
        var name = 'Harry'
        console.log("Inside Function Student()-> name:", name); // Output: Harry
    }
    Student();
}

Teacher();

console.log("Outside Function-> name:", name); //Output: Mike

Output:
Inside Function Teacher()-> name: John Inside Function Student()-> name: Harry Outside Function-> name: Mike

Block Scope

Block Scope determines the visibility of variables in a block of code. If a variable is declared inside a block can only be accessed inside the block and not outside the block then that variable is said to be block scope.

Think of the "block" of code as if statement, loop, while loop, etc.

var keyword does not support block scope. In the year 2015 , ES6 introduced two important keyword let and const which support block scope.

if (true) {
  var name = 'Mike';
  const name1 = 'John';
  let name2 = 'Harry';

  console.log("===Inside Block===")
  console.log(name); // Output: Mike
  console.log(name1); // Output: John
  console.log(name2); // Output: Harry
}

console.log("===Outside Block===")

console.log(name); // Output: Mike
console.log(name1); // Output: ReferenceError
console.log(name2); // Output: ReferenceError

Output:
===Inside Block=== Mike John Harry ===Outside Block=== Mike Reference error Reference error
In the above example you can see all the variable are accessible inside the block but only the variable with var keyword is accessible outside the block and the variables with keyword let and const shows error.

Difference between Local Scope and Block Scope

Basically, the difference between function scope and block scope is that in JavaScript, any variables declared within a function are visible anywhere within that same function. But with block scope, the visibility of variables is confined to any given block (whether it's an if statement, where/for loop, etc) enclosed by curly braces.

Wrap Up!!

I hope you enjoyed this article. Thank you for reading. Please share it with your network. Don’t forget to leave your comments below.

Shortest Javascript Program , window and this

Lawaanu Borthakur — Wed, 01 Dec 2021 11:56:20 +0000

The shortest JS Program is an empty program. When we run an empty Javascript code , a global execution context is created. The JS Engine sets up the global execution context and global memory space even though there is no code. In addition to that JS engine do something interesting, It also create window object.

How do this window object came out?

This window object is created by JS Engine which has many functions and variables. These are created in global memory space. So, we can access these variables and functions anywhere in Javascript program.

In addition to that JS Engine will also create this variable. At the global level this points to window object .

So,what is window?

Window is a global object which is created along with the global execution context.

Whenever any JS Program is run, a global execution context is created ,window object and along with the global execution context a this variable is created.

Let us now know more about global object created.

So, the global object in case of browser is called as window. Javascript not only runs on browsers. It runs on servers and a lot of other devices and places. Wherever Javascript is running, there must be a javascript engine there. Just like in chrome it is v8, Mozilla has it own. Likewise Safari, Edge has it own. So all these JS engine has the responsibility to create a global object. In case of browser it is called as window. In case of node it is called something else. Whereever you runs a Javascript, the names are different but always there is common features i.e a global object is created. Even though our file is empty JS will create a global object.

At the global level this===window is true.

As we all know, when global execution context is created, along with it global memory space is created. We can view it through developer tools in scope tab.

So, What is global memory space?

Any code which is not inside a function is in global memory space. In a simple way we can say that anything which is not inside a function is in global memory space.

function b()
{
    var c=20; //Not in global memory space
}

If we debug the above code. We will see the variable and functions which are in global memory space are in windows object and not c=20 which is not in global space. So, whenever we create variable and functions in global space, these gets attached in window object.

var a=10;
function b()
{
    var x=10;
}
console.log(window.a);
console.log(a);
console.log(x);
console.log(this.a);
/*
Output:
10
10
Not defined error as it is not in global
10
*/

Whenever we try to access any functions and variables in our program and if we do not put anything infront of it ,it assumes that it is in the global space.

So, we can come to a conclusion that window.a ,a and this.a all points to the window object I.e all are referring to the same place in the memory space.

Reference:@akshaymarch7

What happen when a function is invoked ?

Lawaanu Borthakur — Thu, 25 Nov 2021 12:36:46 +0000

As from the earlier post we came to know how execution context is created and How can we see the functioning of call stack through developer tools in our browser. As we know when a function is invoked a new execution context is created and memory creation phase started at first. Moreover it is put inside the call stack. We can view these through developer tools in our browser.

When we run the above Javascript code, We can see when function is invoked in line number 21 an execution context is created i.e a in the call stack and it has a local memory space.

What is Hoisting in Javascript ?

Lawaanu Borthakur — Wed, 24 Nov 2021 18:01:12 +0000

Hoisting is a phenomenon by which we can access the variables and functions even before we initialize it.

Note: In above code we can access the getName() and x even though it is in the top. This type of code will show error in other languages but because of Hoisting we are able to access it.

How can we access it?

It is because of execution context as we learned before. Creation of execution context start with the 1st phase as memory creation phase. So, in this phase variables are initialized as undefined and functions are copied as it is. That is why we are able to access it.

When we run the above Javascript code we get function as output, As the functions are copied as it is in the memory creation phase of execution context.

How we can see the memory creation phase of execution with the help of browser developer tool?

Once we run the above Javascript code in our browser, We have to open the developer tools in our browser and first we should add a breakpoint in line number:16 of the code. Once we start debugging, the execution first pause in line number:16.Now click on the Global Tab and search for getName and x, we can see how memory is allocated for functions and variables in memory creation phase before we execute the whole program.

Below is the way how the function is stored

Below is the way how the variable is stored

Note :There are some special cases, if the function is defined as an arrow function or as an anonymous function then in memory creation phase it is stored as regular variable and the value will be undefined.

We can view the memory creation phase of the execution context in same way as we did for the earlier example.

There are also some scenarios where let and const shows different behaviour as compared to var such as reference error because of Temporal dead zone. In addition to that class also shows different behaviour such as reference error. You can refer to Hoisting mdn to know more.

PS:I will also post about Temporal Dead Zone.

Reference:@akshaymarch7 , @lukeshiru