DEV Community: Arokiya Kithiyon

Elements in HTML

Arokiya Kithiyon — Tue, 17 Feb 2026 13:51:17 +0000

HTML (HyperText Markup Language) is the standard language used to create and structure web pages, acting as the foundational building block of the internet. It uses a system of tags and elements to define content types like headings, paragraphs, and links, allowing browsers to render text, images, and multimedi

Event bubbling and Capturing in Java script

Arokiya Kithiyon — Fri, 17 Oct 2025 02:18:53 +0000

What is Event Bubbling?
Event bubbling in JavaScript is a mechanism in the Document Object Model (DOM) where an event, triggered on a specific element, propagates upwards through its parent elements in the DOM hierarchy.

<body>
  <div>
      <button>Click Me!</button>
  </div>
</body>

The button is a child of the span, which in turn is a child of the div, and the div is a child of the body.

<element>.addEventListener(<eventName>, 
    <callbackFunction>, {capture : boolean});

element: The element to which an event listener is attached.
eventName: It can be 'click','key up','key down' etc. events.
callbackFunction: This function fires after the event happened.
{capture: boolean}: It tells whether the event will be in the capture phase or in the bubbling phase (optional)

<body>
    <div>
        <h2>Welcome To Kithi's DEV Community</h2>
        <div id="grandparent">GrandParent
            <div id="parent">Parent
                <div id="child">Child</div>
            </div>
        </div>
    </div>

 <script>
        const grandParent = document.getElementById("grandparent");
        const parent = document.getElementById("parent");
        const child = document.getElementById("child");

        grandParent.addEventListener("click", (e) => {
            console.log("GrandParent");
        }, { capture: false });
        parent.addEventListener("click", (e) => {
            console.log("Parent");
        }, { capture: false });
        child.addEventListener("click", (e) => {
            console.log("Child");
        }, { capture: false });
    </script>

</body>

Output:

Child
Parent
GrandParent

When we clicked on the div with the child as its id, we should get the output as 'child' on our console. But unexpectedly, we are receiving a different output even we have not clicked on divs with parent and grandparent as their id. The concept of event bubbling comes into the picture. The child div lies inside the parent div as well as in the grandparent div. So, when the child div clicked, we indirectly clicked on both parent div and grandparent div. Thus, propagation is moving from inside to outside in the DOM or we can say events are getting bubble up.

Therefore, the process of propagating from the closest element to the farthest away element in the DOM (Document Object Modal) is called event bubbling.

In the above example, let us change the value of the third parameter of addEventListener() and see what changes will be made in the output.

<body>
    <div>
        <h2>Welcome To Kithi's DEV Community</h2>
        <div id="grandparent">GrandParent
            <div id="parent">Parent
                <div id="child"> Child</div>
            </div>
        </div>
    </div>
    <script>
        const grandParent = document.getElementById("grandparent");
        const parent = document.getElementById("parent");
        const child = document.getElementById("child");

        // Changing value of capture parameter as 'true'
        grandParent.addEventListener("click", (e) => {
            console.log("GrandParent");
        }, { capture: true });
        parent.addEventListener("click", (e) => {
            console.log("Parent");
        }, { capture: true });
        child.addEventListener("click", (e) => {
            console.log("Child");
        }, { capture: true });
    </script>
</body>

Output:

GrandParent
Parent
Child

It's clearly visible that the ancestor divs of the child div were printing first and then the child div itself. So, the process of propagating from the farthest element to the closest element in the DOM is called event capturing. Both terms are just opposite of each other.

How to stop event bubbling and event capturing?

In the above example, we can see a parameter "e" (or sometimes called as "event") in the callback function of addEventListener(). It is an event object which automatically defines when we add an event listener to an element. This object 'e' has a function called stopPropagation() which helps to prevent this annoying behavior.

<body>
    <div>
        <h2>Welcome To Kithi's DEV Community</h2>
        <div id="grandparent">GrandParent
            <div id="parent">Parent
                <div id="child"> Child</div>
            </div>
        </div>
    </div>

    <script>
        const grandParent = document.getElementById("grandparent");
        const parent = document.getElementById("parent");
        const child = document.getElementById("child");
        grandParent.addEventListener("click", (e) => {
            console.log("GrandParent bubbling");
        });
        parent.addEventListener("click", (e) => {
            e.stopPropagation();  //syntax to stop event bubbling
            console.log("Parent bubbling");
        });
        child.addEventListener("click", (e) => {
            console.log("Child bubbling");
        });
    </script>
</body>

Output:

Child bubbling
Parent bubbling

if we clicked on child div, the propagation is stopped on parent div and does not move to grandparent div. Hence, the event bubbling is prevented.

Note:
The event capturing can also be prevented using the same way.

Conclusion:

Event capturing means propagation of event is done from ancestor elements to child element in the DOM while event bubbling means propagation is done from child element to ancestor elements in the DOM.
The event capturing occurs followed by event bubbling.
If {capture: true} ,event capturing will occur else event bubbling will occur.
Both can be prevented by using the stopPropagation() method.

Event loop in Javascript

Arokiya Kithiyon — Sat, 11 Oct 2025 17:51:34 +0000

What is the Event Loop?
At its core, the JavaScript event loop is responsible for managing the execution of code, collecting and processing events, and executing queued tasks. JavaScript operates in a single-threaded environment, meaning only one piece of code runs at a time. The event loop ensures that tasks are executed in the correct order, enabling asynchronous programming.

Call stack

Call stack keeps track of the functions being executed in a program. When a function is called, it is added to the top of the call stack. When the function completes, it is removed from the call stack. This allows the program to keep track of where it is in the execution of a function and return to the correct location when the function completes. As the name suggests it is a Stack data structure which follows last-in-first-out.

Web APIs/Node.js APIs

Asynchronous operations like setTimeout(), HTTP requests, file I/O, etc., are handled by Web APIs (in the browser) or C++ APIs (in Node.js). These APIs are not part of the JavaScript engine and run on separate threads, allowing them to execute concurrently without blocking the call stack.

Task queue / Macrotask queue / Callback queue

The task queue, also known as the macrotask queue / callback queue / event queue, is a queue that holds tasks that need to be executed. These tasks are typically asynchronous operations, such as callbacks passed to web APIs (setTimeout(), setInterval(), HTTP requests, etc.), and user interface event handlers like clicks, scrolls, etc.

Microtasks queue

Microtasks are tasks that have a higher priority than macrotasks and are executed immediately after the currently executing script is completed and before the next macrotask is executed. Microtasks are usually used for more immediate, lightweight operations that should be executed as soon as possible after the current operation completes. There is a dedicated microtask queue for microtasks. Microtasks include promises callbacks (then(), catch(), and finally()), await statements, queueMicrotask(), and MutationObserver callbacks.

Example of the Event Loop in Action

console.log("Start");

setTimeout(() => {
    console.log("Timeout Callback");
}, 0);

Promise.resolve().then(() => {
    console.log("Promise Resolved");
});

console.log("End");

Output:

Start End Promise Resolved Timeout Callback

Explanation:

console.log("Start") executes first.
setTimeout is encountered, and its callback is delegated to the Web API (it won’t execute immediately).
A resolved promise is pushed to the Microtask Queue.
console.log("End") executes.
Since the Call Stack is empty, the Event Loop processes the Microtask Queue first, executing Promise Resolved.
Finally, the callback from setTimeout is executed from the Callback Queue.

Summary

The event loop is a core mechanism in JavaScript that allows the single-threaded language to handle asynchronous tasks without blocking the main thread. It works in conjunction with the call stack, which processes synchronous code, and the event queue, where asynchronous tasks wait to be executed. As JavaScript runs, the event loop continuously monitors the call stack, only processing tasks from the event queue when the stack is empty. This system enables efficient handling of I/O operations, user interactions, and background tasks, allowing JavaScript to run smoothly and responsively despite its single-threaded nature.

"this" Key word in java script

Arokiya Kithiyon — Sun, 05 Oct 2025 14:43:43 +0000

The this keyword in JavaScript is a special keyword that refers to the context in which a function is executed. Its value is not determined by where the function is defined, but by how it is called (its "call site"). This dynamic nature can make this a challenging concept to grasp initially.

Global Context:

Outside of any function or object, in a browser environment, this refers to the global window object.
In Node.js, this in the global scope refers to the globalThis object.
In strict mode, this in the global context is undefined.

Method Invocation:

When a function is called as a method of an object (e.g., object.method()), this refers to the object on which the method was called.

    const person = {
        name: "Alice",
        greet: function() {
            console.log(`Hello, my name is ${this.name}`);
        }
    };
    person.greet(); // 'this' refers to 'person'

Function Invocation (Standalone):

When a function is called as a standalone function (not as a method of an object), this typically refers to the global object (window in browsers, globalThis in Node.js) in non-strict mode.
In strict mode, this is undefined in a standalone function call.

    function sayHello() {
        console.log(this); // In a browser, 'this' would be 'window' (non-strict)
    }
    sayHello();

Arrow Functions:

Arrow functions do not have their own this binding. Instead, they lexically inherit this from their surrounding (enclosing) scope at the time they are defined. This makes them particularly useful for callbacks where preserving the context of this is important.

    const anotherPerson = {
        name: "Charlie",
        greet: function() {
            setTimeout(() => {
                console.log(`Hello, my name is ${this.name}`); // 'this' correctly refers to 'anotherPerson'
            }, 100);
        }
    };
    anotherPerson.greet();

Explicit Binding with call, apply, and bind

Explicit binding in JavaScript refers to the process of explicitly setting the value of the this keyword within a function's execution context. This is achieved using the call(), apply(), and bind() methods available on all JavaScript functions.

call():

Invokes a function immediately.
The first argument passed to call() becomes the this value inside the function.
Subsequent arguments are passed directly to the function as individual arguments.

    function greet(greeting) {
      console.log(`${greeting}, my name is ${this.name}`);
    }

    const person = { name: "Alice" };
    greet.call(person, "Hello"); // Output: Hello, my name is Alice

apply():

Similar to call(), it invokes a function immediately.
The first argument passed to apply() becomes the this value.
Subsequent arguments are passed to the function as an array.

    function sum(a, b) {
      console.log(`The sum is ${this.multiplier * (a + b)}`);
    }

    const context = { multiplier: 2 };
    sum.apply(context, [5, 3]); // Output: The sum is 16

bind():

Unlike call() and apply(), bind() does not immediately invoke the function.
It returns a new function with this permanently bound to the specified object.
Any arguments passed to bind() after the this context are prepended to the new function's arguments.

    const user = { name: "Bob" };

    function sayName() {
      console.log(`My name is ${this.name}`);
    }

    const boundSayName = sayName.bind(user);
    boundSayName(); // Output: My name is Bob

Conclusion

The this keyword in JavaScript is a versatile and powerful feature that, when understood correctly, can greatly enhance your coding capabilities.

Closures in Javascript

Arokiya Kithiyon — Sat, 04 Oct 2025 03:57:08 +0000

In JavaScript, a closure is the combination of a function and the lexical environment within which that function was declared. This means that an inner function "remembers" and can access the variables and arguments of its outer (enclosing) function, even after the outer function has finished executing and its execution context has been removed from the call stack.

Another way to think about it — and likely a picture you won’t forget — is to think of closures as a pregnant woman and her unborn baby. Once the baby is born, it still has access to its mom’s DNA even though it is no longer inside the womb. Similarly, a nested function in a closure still has access to its lexical scope, or environment, even after the parent function has finished executing.

Key characteristics of closures:

Lexical Scoping:
JavaScript uses lexical scoping, meaning that the scope of a variable is determined by where it is written in the code, not where it is called. A closure captures this lexical environment.

Data Privacy:
Closures allow for the creation of private variables and methods, as the inner function can access variables from its outer scope, while those variables are not directly accessible from the global scope. This is a powerful mechanism for data encapsulation.

Persistence of State:
Even after the outer function has returned, the inner function retains access to the outer function's variables, allowing the state of those variables to persist across multiple calls to the inner function.

function createCounter() {
  let count = 0; // This variable is part of the lexical environment

  return function() { // This is the inner function (the closure)
    count++;
    return count;
  };
}

const counter1 = createCounter();
console.log(counter1()); // Output: 1
console.log(counter1()); // Output: 2

const counter2 = createCounter(); // Creates a new closure with its own 'count'
console.log(counter2()); // Output: 1

In this example, createCounter returns an anonymous inner function. This inner function forms a closure over the count variable declared in createCounter. Each time counter1() is called, it increments its own count variable, which persists between calls. counter2 creates a separate closure with its own independent count.

Hoisting In Javascript

Arokiya Kithiyon — Fri, 26 Sep 2025 19:21:02 +0000

Hoisting in JavaScript is a mechanism where variable and function declarations are moved to the top of their containing scope during the compilation phase, before the code is executed. This means you can use variables and call functions before they are explicitly declared in your code

Here's how hoisting works for different types of declarations:

var declarations: Variables declared with var are hoisted to the top of their scope and are initialized with undefined. This means you can access a var variable before its declaration, but its value will be undefined until the line of code where it's assigned a value is executed.

    console.log(myVar); // Output: undefined
    var myVar = 10;
    console.log(myVar); // Output: 10

Hoisting let and const variables

Variables declared with let and const are also hoisted, but they are not initialized. Instead, they enter a "Temporal Dead Zone" (TDZ) from the beginning of their scope until their declaration line is reached. Attempting to access a let or const variable within the TDZ will result in a ReferenceError.

    // console.log(myLet); // This would throw a ReferenceError (TDZ)
    let myLet = 20;
    console.log(myLet); // Output: 20

The Temporal Dead Zone in JavaScript

The Temporal Dead Zone (TDZ) is a critical concept in JavaScript hoisting. It refers to the period between the entering of a scope (such as a function or block) and the actual initialization of a variable declared with let or const. During this time, any reference to the variable before its initialization will throw a ReferenceError.

How does the TDZ Work?

Variables declared with let and const are hoisted to the top of their scope, but they are not initialized until their declaration line is reached.
Any attempt to access these variables before their declaration will result in an error.
The TDZ exists only for variables declared using let and const. Variables declared with var do not have this issue, as they are hoisted and initialized to undefined.

console.log(myName) // temporal dead zone for myName,  
//ReferenceError: Cannot access 'myName' before initialization
// temporal dead zone for myName
// temporal dead zone for myName
// temporal dead zone for myName
// temporal dead zone for myName
// temporal dead zone for myName
// temporal dead zone for myName
let myName = "Kithiyon" // now accessible
// now accessible
// now accessible
// now accessible

Function declarations: Function declarations are fully hoisted, meaning both the function name and its definition are moved to the top of their scope. This allows you to call a function before its declaration in the code.

function printHello() {
  console.log("hello")
}

printHello()
// hello

Here, we declare printHello, and we execute the function just after the line it was declared. No errors; everything works!

printHello()
// hello

function printHello() {
  console.log("hello")
}

Here, we execute printHello before the line the function was declared. And everything still works without errors. What happened here? Hoisting.

Before the interpreter executes the whole code, it first hoists (raises, or lifts) the declared function to the top of the scope it is defined in. In this case, printHello is defined in the global scope, so the function is hoisted to the top of the global scope. Through hoisting, the function (including the logic) becomes accessible even before the line it was declared in the code.

Function expressions and arrow functions:
These are treated like variable declarations. If declared with var, they will be hoisted and initialized to undefined. If declared with let or const, they will be in the TDZ.

    // myFuncExpression(); // This would throw a TypeError if declared with var (undefined is not a function)
    // myArrowFunc(); // This would throw a ReferenceError if declared with let/const (TDZ)

    var myFuncExpression = function() {
      console.log("Hello from function expression!");
    };
    myFuncExpression(); // Output: Hello from function expression!

    const myArrowFunc = () => {
      console.log("Hello from arrow function!");
    };
    myArrowFunc(); // Output: Hello from arrow function!

In summary, while hoisting moves declarations to the top, the initialization behavior differs between var and let/const, and function declarations are fully hoisted, enabling early invocation. Understanding hoisting is crucial for writing predictable and error-free JavaScript code.

Execution Context in JavaScript

Arokiya Kithiyon — Thu, 25 Sep 2025 17:15:41 +0000

An execution context is
the environment in which JavaScript code is executed. Everything that happens in JavaScript occurs inside an execution context, which manages the code's variables, functions, and scope.

The two phases of an execution context
Every execution context is created and processed in two distinct phases:

Creation phase:

Variable object creation: The JavaScript engine scans the code and stores function declarations and variables in memory. For var variables, it assigns the placeholder value undefined. This behavior is known as hoisting.
Scope chain setup: The engine establishes the scope chain, which determines where variables can be accessed. A function can access variables from its own context and the contexts of its parent functions, all the way up to the global scope.
this keyword assignment: The this keyword is assigned a value depending on how the code was called.

Execution phase:

The JavaScript engine runs the code line by line.
It assigns the actual values to the variables that were initially set to undefined during the creation phase.
It invokes functions and executes the statements in the script.

Types of execution contexts
There are two main types of execution contexts:

Global Execution Context (GEC):

The default context where code is executed. For every JavaScript file, there is only one GEC.
It creates a global object (window in browsers or global in Node.js) and binds the this keyword to it.
All global variables and functions are stored as properties and methods on this global object.

Function Execution Context (FEC):

Created every time a function is called.
Unlike the GEC, there can be many FECs in a program.
It creates its own scope for variables and a special arguments object containing all arguments passed to the function.
Once a function's execution is complete, its context is destroyed.

The Call Stack
The JavaScript engine uses a call stack to manage all the execution contexts.

It operates on a Last-In, First-Out (LIFO) basis.
When a script is first run, the GEC is pushed onto the stack.
Whenever a function is invoked, its FEC is created and pushed onto the top of the stack, becoming the currently active context.
When a function finishes execution, its context is popped off the stack, and control returns to the context below it.
The program ends when the GEC is finally popped off the stack.

function funcA(m,n) {
return m * n;
}
function funcB(m,n) {
return funcA(m,n);
}
function getResult(num1, num2) {
return funcB(num1, num2)
}
var res = getResult(5,6);
console.log(res); // 30

In this example, the JS engine creates a global execution context that enters the creation phase.

First it allocates memory for funcA, funcB, the getResult function, and the res variable. Then it invokes getResult(), which will be pushed on the call stack.

Then getResult() will call funcB(). At this point, funcB's context will be stored on the top of the stack. Then it will start executing and call another function funcA(). Similarly, funcA's context will be pushed.

Once execution of each function is done, it will be removed from the call stack. The following picture depicts the entire process of the execution: