DEV Community: Kamalesh AR

Javascript DOM mini projects

Kamalesh AR — Mon, 29 Jun 2026 16:54:42 +0000

My JavaScript Practice Journey: 5 Beginner-Friendly DOM Projects

Introduction

As part of my JavaScript learning journey, I completed five beginner-friendly projects that helped me understand the fundamentals of DOM manipulation, event handling, functions, and user interaction. These projects allowed me to apply JavaScript concepts in practical scenarios and build confidence in creating interactive web applications.

Technologies Used

HTML5
CSS3
JavaScript (ES6)

1. Change Text by Clicking a Button

Overview

This project changes the text of a heading or paragraph whenever the user clicks a button.

Concepts Practiced

DOM Manipulation
getElementById()
Functions
onclick Event
innerText

What I Learned

Selecting HTML elements using JavaScript.
Updating text dynamically.
Handling button click events.

CODE:

<body>
    <h1 id="name">Kamalesh😎</h1>
    <p>Click the button to change text</p>
    <button onclick="changename()">Change Text</button>
    <script>
        document.getElementById('name');
        function changename(){
            if(document.getElementById('name').innerText== "Kamalesh😎"){
                document.getElementById('name').innerText= "Vignesh🐒";
            }
            else{
                document.getElementById('name').innerText= "Kamalesh😎";
            }
        }

    </script>
</body>

Output:

Text before change:

Text after change:

Gitlab--> https://learn-html-and-css-1da177.gitlab.io/javascript/textchange.html

2. Light On/Off Toggle

Overview

In this project, I created a light bulb switch. Clicking the buttons changes the bulb image between ON and OFF states.

Concepts Practiced

DOM Manipulation
Image Manipulation
Functions
src Attribute
Button Events

What I Learned

How to change image sources dynamically.
Creating interactive visual effects.
Understanding how JavaScript controls HTML elements.

CODE:

<body>
    <img id="bulb" src="bulb light.jpg" alt="img is not here">
    <button onclick="on()" id="btn">ON</button>

    <script>
        let bulb = document.getElementById("bulb");
        let btn = document.getElementById("btn")

        function on(){
            if(btn.innerText=="ON")
            {
                bulb.src = "bulb2.jpg"
                btn.innerText="OFF"
                btn.style.backgroundColor="firebrick";
                btn.style.border="2px solid rgb(98, 18, 18)";
            }
            else{
                bulb.src = "bulb light.jpg"
                btn.innerText="ON"
                 btn.style.backgroundColor="rgb(94, 178, 34)";
                btn.style.border="2px solid rgb(31, 98, 18)";
            }
        }
    </script>
</body>

Output:

Before light ON

After light ON

Gitlab--> https://learn-html-and-css-1da177.gitlab.io/javascript/light.html

3. Counter App

Overview

The Counter App increases, decreases, or resets a number using different buttons.

Concepts Practiced

Variables
Functions
Arithmetic Operators
DOM Manipulation
Button Click Events

What I Learned

Updating values dynamically.
Using variables to store data.
Performing mathematical operations with JavaScript.

CODE:

<body>
    <div id="container">
        <h1>Counter App</h1>
        <div id="core">
            <button id="sub" onclick="sub()">-</button>
            <span id="counter">0</span>
            <button id="add" onclick="add()">+</button>
        </div>
        <button id="reset" onclick="reset()">Reset</button>
    </div>
    <script>
        let counts = document.getElementById("counter");
        let count = counts.innerText;
        function add(){
            count++;
            counts.innerText=count;
        }
        function sub(){
            if(count>0){
                count--;
                counts.innerText=count;
            }
        }
        function reset(){
            count=0;
            counts.innerText=count;
        }
    </script>
</body>

Output:

Gitlab--> https://learn-html-and-css-1da177.gitlab.io/javascript/counterapp.html

4. Live Character Counter

Overview

The Live Character Counter displays the number of characters entered into a textarea in real time. Every time the user types, deletes, or pastes text, the count updates automatically.

Concepts Practiced

DOM Manipulation
getElementById()
oninput Event
value
length
innerText

What I Learned

Responding to user input instantly.
Counting characters using the length property.
Updating webpage content dynamically.

CODE:

<body>
    <div class="container">
        <h2>Live Character Count</h2>
        <textarea name="" id="text" placeholder="Enter your text here" oninput="countCharacters()"></textarea>

        <p>Count characters:<span id="count">0</span></p>

    </div>

    <script>

        const textarea = document.getElementById("text");
        const counts = document.getElementById("count");

        function countCharacters() {
            count.innerText = textarea.value.replace(/\s/g, "").length;
        }


    </script>

</body>

Output:

Gitlab--> https://learn-html-and-css-1da177.gitlab.io/javascript/charactercount.html

5. Show/Hide Password

Overview

This project allows users to show or hide the password entered in an input field. Clicking the button toggles the password visibility.

Concepts Practiced

DOM Manipulation
Functions
Conditional Statements (if...else)
Input type Property
innerText
Button Events

What I Learned

Changing element properties dynamically.
Using conditional statements effectively.
Improving user experience with interactive features.

CODE:

<body>
    <div class="container">
        <h2>Show and Hide Password</h2>

        <input type="password" id="password" placeholder="Enter Password">

        <!-- <br><br> -->
        <button onclick="Password()">Show</button>


    </div>

    <script>
        let password = document.getElementById("password");
        function Password() {
            if (password.type === "password") {
                password.type = "text";
            } else {
                password.type = "password";
            }
        }
    </script>
</body>

Output:

Hide Password:

Show Password:

Gitlab--> https://learn-html-and-css-1da177.gitlab.io/javascript/hidePassword.html

JavaScript Concepts I Practiced

These projects helped me strengthen my understanding of:

Variables (let, const)
Functions
DOM Manipulation
Event Handling
Conditional Statements
getElementById()
innerText
value
length
Input type Property
Image src Property
Arithmetic Operators

Skills Improved

By completing these projects, I improved my ability to:

Build interactive web pages.
Connect HTML, CSS, and JavaScript.
Write clean and reusable JavaScript functions.
Understand how user actions trigger JavaScript events.
Solve simple programming problems using DOM manipulation.

Conclusion

These five beginner projects have given me a strong foundation in JavaScript and front-end development. Each project introduced a new concept while reinforcing previous topics, making the learning process understandable and practicable.

I will continue building more JavaScript projects to improve my problem-solving skills, deepen my understanding of the DOM, and prepare myself for real-world web development and technical interviews.

Projects Completed:

Change Text by Clicking a Button
Light On/Off Toggle
Counter App
Live Character Counter
Show/Hide Password

Every project is another step toward becoming a better JavaScript developer. More projects coming soon!

References:

https://www.w3schools.com/tools/tool_char_counter.php

DOM

Kamalesh AR — Sun, 28 Jun 2026 10:26:32 +0000

Definition of DOM:

The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document such as the HTML representing a web page—in memory. Usually it refers to JavaScript, even though modeling HTML, SVG, or XML documents as objects are not part of the core JavaScript language.

The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree. With them, you can change the document's structure, style, or content.

Nodes can also have event handlers attached to them. Once an event is triggered, the event handlers get executed.

Concepts and usage:

The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.

A web page is a document that can be either displayed in the browser window or as the HTML source. In both cases, it is the same document but the Document Object Model (DOM) representation allows it to be manipulated. As an object-oriented representation of the web page, it can be modified with a scripting language such as JavaScript.

DOM stands for Document Object Model. It is an interface that allows JavaScript to access and manipulate HTML elements dynamically.

Example : Change Text

HTML

<h1 id="title">Hello</h1>

<button onclick="changeText()">
Change
</button>

JavaScript

function changeText() {
    document.getElementById("title").innerHTML = "Welcome!";
}

Before clicking

Hello

After clicking

Welcome!

getElementById()

getElementById() is a DOM method used to find and access an HTML element by its id.
getElementById() is a DOM method that returns the HTML element whose id matches the given value.

Syntax

document.getElementById("idName");

document → Represents the entire HTML page.
getElementById() → Searches for an element by its id.
"idName" → The value of the id attribute in the HTML.

getElementById() is a DOM method that selects a single HTML element using its unique id. It returns the element object, allowing JavaScript to read or modify its content, style, or attributes.

Remember: getElementById() only finds the element. What you do after finding it (such as changing innerHTML, style, or value) determines the action performed on that element.

innerText

innerText is a DOM property used to get or set the visible text inside an HTML element.
innerText is a property that returns or changes the visible text content of an HTML element.

Syntax

element.innerText = "New Text";

Example 1: Get Text
HTML

<h1 id="title">Hello World</h1>

JavaScript

let text = document.getElementById("title").innerText;

console.log(text);

Output

Hello World

Here document.getElementById("title") → Finds the

element.
.innerText → Reads the visible text inside it.
Example 2: Change Text
HTML

<h1 id="title">Hello</h1>

JavaScript

document.getElementById("title").innerText = "Welcome";

Before

Hello

After

Welcome

innerText → Reads or changes the visible text inside that element.

References

https://www.w3schools.com/js/js_htmldom.asp
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
https://www.geeksforgeeks.org/html/javascript-html-dom/

Array Search Methods in JavaScript

Kamalesh AR — Thu, 25 Jun 2026 17:28:25 +0000

Array Search Methods are built-in JavaScript methods used to search for elements in an array. They help us check whether an element exists, find its position (index), or retrieve elements that satisfy a condition.

1. indexOf()

Returns the first index of the specified element. If the element is not found, it returns -1.

Syntax:

array.indexOf(element)

Example:

const fruits = ["Apple", "Banana", "Mango", "Banana"];

console.log(fruits.indexOf("Banana"));

Output:

2. lastIndexOf()

Returns the last index of the specified element. If not found, it returns -1.

Example:

const fruits = ["Apple", "Banana", "Mango", "Banana"];

console.log(fruits.lastIndexOf("Banana"));

Output:

3. includes()

Checks whether an element exists in an array. It returns true or false.

Example:

const fruits = ["Apple", "Banana", "Mango"];

console.log(fruits.includes("Mango"));
console.log(fruits.includes("Orange"));

Output:

true
false

4. find()

Returns the first element that satisfies the given condition. If no element matches, it returns undefined.

Example:

const numbers = [5, 12, 8, 20];

const result = numbers.find(num => num > 10);

console.log(result);

Output:

Explanation

5 > 10 (Wrong)
12 > 10 → Stops and returns 12 (correct)

5. findIndex()

Returns the index of the first element that satisfies the condition. If none match, it returns -1.

Example:

const numbers = [5, 12, 8, 20];

const index = numbers.findIndex(num => num > 10);

console.log(index);

Output:

6. findLast()

Returns the last element that satisfies the given condition.

Example:

const numbers = [5, 12, 8, 20];

const result = numbers.findLast(num => num > 10);

console.log(result);

Output:

Explanation

Search starts from the end:

20 > 10 → Returns 20

7. findLastIndex()

Returns the index of the last element that satisfies the condition.

Example:

const numbers = [5, 12, 8, 20];

const index = numbers.findLastIndex(num => num > 10);

console.log(index);

Output:

Easy Way to Remember

indexOf() → First index of a value.
lastIndexOf() → Last index of a value.
includes() → Checks if a value exists.
find() → First element matching a condition.
findIndex() → Index of the first matching element.
findLast() → Last element matching a condition.
findLastIndex() → Index of the last matching element.

Reference:

https://www.w3schools.com/js/js_array_search.asp

Array methods in javascript

Kamalesh AR — Thu, 25 Jun 2026 09:05:28 +0000

1. length

Returns the total number of elements in an array.

Example:

const fruits = ["Apple", "Banana", "Mango"];

console.log(fruits.length);

Output:

2. toString()

Converts an array into a comma-separated string.

Example:

const fruits = ["Apple", "Banana", "Mango"];

console.log(fruits.toString());

Output:

Apple,Banana,Mango

3. at()

Returns the element at the specified index. It also supports negative indexes.

Example:

const fruits = ["Apple", "Banana", "Mango"];

console.log(fruits.at(1));
console.log(fruits.at(-1));

Output:

Banana
Mango

4. join()

Joins all array elements into a string using a specified separator.

Example:

const fruits = ["Apple", "Banana", "Mango"];

console.log(fruits.join(" - "));

Output:

Apple - Banana - Mango

5. pop()

Removes and returns the last element of the array.

Example:

const fruits = ["Apple", "Banana", "Mango"];

fruits.pop();

console.log(fruits);

Output:

["Apple", "Banana"]

6. push()

Adds one or more elements to the end of the array.

Example:

const fruits = ["Apple", "Banana"];

fruits.push("Mango");

console.log(fruits);

Output:

["Apple", "Banana", "Mango"]

7. shift()

Removes and returns the first element of the array.

Example:

const fruits = ["Apple", "Banana", "Mango"];

fruits.shift();

console.log(fruits);

Output:

["Banana", "Mango"]

8. unshift()

Adds one or more elements to the beginning of the array.

Example:

const fruits = ["Banana", "Mango"];

fruits.unshift("Apple");

console.log(fruits);

Output:

["Apple", "Banana", "Mango"]

9. Array.isArray()

Checks whether a value is an array.

Example:

const fruits = ["Apple", "Banana"];

console.log(Array.isArray(fruits));

Output:

true

10. concat()

Combines two or more arrays and returns a new array.

Example:

const arr1 = [1, 2];
const arr2 = [3, 4];

const result = arr1.concat(arr2);

console.log(result);

Output:

[1, 2, 3, 4]

11. copyWithin()

Definition:
Copies part of an array to another position in the same array.

Example:

const numbers = [1, 2, 3, 4, 5];

numbers.copyWithin(0, 3);

console.log(numbers);

Output:

[4, 5, 3, 4, 5]

Explanation:

Start copying from index 3 → [4, 5]
Paste starting at index 0

12. flat()

Flattens nested arrays into a single array.

Example:

const arr = [1, 2, [3, 4], [5, 6]];

console.log(arr.flat());

Ouput:

[1, 2, 3, 4, 5, 6]

13. slice()

Returns a portion of an array without changing the original array.

Example:

const fruits = ["Apple", "Banana", "Mango", "Orange"];

console.log(fruits.slice(1, 3));

Output:

["Banana", "Mango"]

14. splice()

Adds, removes, or replaces elements in an array. It modifies the original array.

Example:

const fruits = ["Apple", "Banana", "Orange"];

fruits.splice(1, 1, "Mango");

console.log(fruits);

Output:

["Apple", "Mango", "Orange"]

Explanation:

Start at index 1
Remove 1 element (Banana)
Insert "Mango"

15. toSpliced()

Works like splice(), but returns a new array instead of modifying the original array.

Example:

const fruits = ["Apple", "Banana", "Orange"];
const newFruits = fruits.toSpliced(1, 1, "Mango");

console.log(newFruits);
console.log(fruits);

Output:

["Apple", "Mango", "Orange"]
["Apple", "Banana", "Orange"]

Reference:

http://w3schools.com/js/js_array_methods.asp#mark_delete

Array iterations in javascript

Kamalesh AR — Wed, 24 Jun 2026 17:53:25 +0000

Array iteration in JavaScript is the process of accessing or looping through each element in an array one by one to perform a specific action. It allows you to examine, modify, filter, or transform data inside an array using either standard loop statements or built-in functional array methods.

Map():

The map() method creates a new array by performing a function on each array element.

The map() method does not execute the function for array elements without values.

The map() method does not change the original array.

Example:

const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {
  return value * 2;
}

Output:

[90,8,18,32,50]

flatMap():

The flatMap() method first maps all elements of an array and then creates a new array by flattening the array.

Example:

const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap(x => [x, x * 10]);

Output:

1,10,2,20,3,30,4,40,5,50,6,60

filter():

The filter() method creates a new array with array elements that pass a test.

Example:

const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

Output:

45,25

Note that the function takes 3 arguments:

The item value
The item index
The array itself

reduce():

The reduce() method runs a function on each array element to produce a single value.

The reduce() method works from left-to-right in the array. See also reduceRight().

The reduce() method does not reduce the original array.

Example:

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}

Output:

Note that the function takes 4 arguments:

The total (the initial value / previously returned value)
The item value
The item index
The array itself

reduceRight()

The reduceRight() method runs a function on each array element to produce a single value.

The reduceRight() works from right-to-left in the array. See also reduce().

The reduceRight() method does not reduce the original array.

Example:

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}
console.log(sum);

Output:

every()

The every() method checks if all array values pass a test.

Example:

const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

Output:

False

Note that the function takes 3 arguments:

The item value
The item index
The array itself

Spread (...)

The ... operator expands an array into individual elements.

Example:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const arr3 = [...arr1, ...arr2];

Output:

1,2,3,4,5,6

EXample2:

const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "Dec"];

const year = [...q1, ...q2, ...q3, ...q4];

Output:

Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec

Rest (...)

The rest operator (...) allows us to destruct an array and collect the leftovers:

Example:

let a, rest;
const arr1 = [1,2,3,4,5,6,7,8];

[a, ...rest] = arr1;

Output:

2,3,4,5,6,7,8

Example2:

let a, b, rest;
const arr1 = [1,2,3,4,5,6,7,8];

[a, b, ...rest] = arr1;

Output:

3,4,5,6,7,8

Reference:

https://www.w3schools.com/js/js_array_iteration.asp#mark_flatmap

Mock interview questions

Kamalesh AR — Wed, 24 Jun 2026 11:15:47 +0000

1. What is GenAI

Generative AI is a type of Artificial Intelligence that can create new content such as text, images, code, audio, and videos based on the data it has learned from.

Examples:

ChatGPT generates text.
GitHub Copilot generates code.
DALL·E generates images.

2. What is constructor function

A constructor function is a regular function used to create multiple objects with similar properties and methods.
A constructor function is a special function used to create and initialize objects. It is called using the new keyword and helps create multiple objects with the same structure.

Example:

function Person(name, age) {
    this.name = name;
    this.age = age;
}

const person1 = new Person("Kamalesh", 22);

3. What is object

An object is a collection of key-value pairs used to store related data and functionality.
An object is a non-primitive data type that stores data in key-value pairs. It is used to represent real-world entities and organize related data together.

Example:

const student = {
    name: "Kamalesh",
    age: 22,
    course: "AI & DS"
};

4. How do you add a property to an object

We can add properties to an object using dot notation or bracket notation. For example, person.age = 22 adds a new property called age.

Examples:
Dot notation

const person = {
    name: "Kamalesh"
};

person.age = 22;

Bracket Notation

person["city"] = "Chennai";

5. What is this keyword

The this keyword refers to the current object that is calling the method. It allows us to access the object's properties and methods from within the object.
The this keyword refers to the object that is currently executing the function.

Example:

const person = {
    name: "Kamalesh",
    greet: function() {
        console.log(this.name);
    }
};

person.greet();

6. What is function

A function is a reusable block of code that performs a specific task. It helps avoid code duplication and improves maintainability.

Example:

function greet() {
    console.log("Hello");
}

greet();

7. Higher order function

A higher-order function is a function that:

Accepts another function as an argument, or
Returns a function.

A higher-order function is a function that either takes another function as an argument or returns a function. Common examples are map(), filter(), and reduce().

Example:

function greet(name) {
    return "Hello " + name;
}

function processUser(callback) {
    console.log(callback("Kamalesh"));
}

processUser(greet);

8. Synchronous vs Asynchronous

In synchronous programming, tasks execute sequentially and each task waits for the previous one to complete. In asynchronous programming, tasks can run independently without blocking the execution of other code. JavaScript uses callbacks, promises, and async/await for asynchronous operations.

Synchronous
Tasks execute one after another.

Example:

console.log("Task 1");
console.log("Task 2");
console.log("Task 3");

Output:

Task 1
Task 2
Task 3

Asynchronous
Tasks can execute without blocking the main thread.

Example:

console.log("Start");

setTimeout(() => {
    console.log("Task");
}, 2000);

console.log("End");

Output:

Start
End
Task

9. Truthy and falsy

Truthy values are values that evaluate to true in a Boolean context, while falsy values evaluate to false. JavaScript has eight falsy values: false, 0, -0, 0n, "", null, undefined, and NaN.

Arrays in Javascript

Kamalesh AR — Sat, 20 Jun 2026 05:14:30 +0000

The Array object, as with arrays in other programming languages, enables storing a collection of multiple items under a single variable name, and has members for performing common array operations.

In JavaScript, arrays aren't primitives but are instead Array objects with the following core characteristics:

JavaScript arrays are resizable and can contain a mix of different data types. (When those characteristics are undesirable, use typed arrays instead.)
JavaScript arrays are not associative arrays and so, array elements cannot be accessed using arbitrary strings as indexes, but must be accessed using nonnegative integers (or their respective string form) as indexes.
JavaScript arrays are zero-indexed: the first element of an array is at index 0, the second is at index 1, and so on — and the last element is at the value of the array's length property minus 1.
JavaScript array-copy operations create shallow copies. (All standard built-in copy operations with any JavaScript objects create shallow copies, rather than deep copies).

In JavaScript, an array is an ordered list of values. Each value, known as an element, is assigned a numeric position in the array called its index. The indexing starts at 0, so the first element is at position 0, the second at position 1, and so on.

Arrays can hold any type of data-such as numbers, strings, objects, or even other arrays-making them a flexible and essential part of JavaScript programming.

Example1:
If you have a list of items (a list of car names, for example), storing the cars in single variables could look like this:

let car1 = "Saab";
let car2 = "Volvo";
let car3 ="BMW";
However, what if you want to loop through the cars and find a specific one? And what if you had not 3 cars, but 300?

The solution is an array!

An array can hold many values under a single name, and you can access the values by referring to an index number.

Example2:

1. Create Array using Literal

Creating an array using array literal involves using square brackets [] to define and initialize the array.

// Creating an Empty Array
let a = [];
console.log(a);

// Creating an Array and Initializing with Values
let b = [10, 20, 30];
console.log(b);

2. Create using new Keyword (Constructor)

The "Array Constructor" refers to a method of creating arrays by invoking the Array constructor function.

// Creating and Initializing an array with values
let a = new Array(10, 20, 30);

console.log(a);

Accessing Array Elements

You access an array element by referring to the index number:

const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0]

Changing an Array Element
This statement changes the value of the first element in cars:

cars[0] = "Opel";
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";

Arrays are Objects

Arrays are a special type of objects. The typeof operator in JavaScript returns "object" for arrays.

But, JavaScript arrays are best described as arrays.

Arrays use numbers to access its "elements". In this example, person[0] returns John:

// Array
const person = ["John", "Doe", 46]

// Object
const person = {firstName:"John", lastName:"Doe", age:46};

References:

https://www.w3schools.com/js/js_arrays.asp
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
https://www.geeksforgeeks.org/javascript/javascript-arrays/

Object Constructors in javascript

Kamalesh AR — Wed, 17 Jun 2026 16:08:24 +0000

Constructor function

A constructor in JavaScript is a special function used to create and initialize objects. It sets up object properties and is typically invoked using the new keyword. Constructors allow for the creation of multiple instances with similar properties and methods.

Capitalization: Name the function with a capital first letter (e.g., User, Car) to distinguish it from standard functions.
The new keyword: Always call the function using new. Failing to do so makes it execute like a regular function, which breaks the creation process.

Sometimes we need to create many objects of the same type.
To create an object type we use an object constructor function.
It is considered good practice to name constructor functions with an upper-case first letter.

Object.create() function in JavaScript

Object.create() in JavaScript is used to create a new object by setting an existing object as its prototype. Instead of copying properties directly or invoking a constructor, it establishes prototype-based inheritance, allowing the new object to access properties and methods from the specified prototype.

EXample

const obj={
    name:'Kamal',
    age:21
}
const obj1=Object.create(obj)
obj1.class='10th'
console.log(obj1.name)

Output

Kamal

In the above code the obj is the first object created and then after the obj1 is created with the help of Object.create() property in JavaScript
All the properties of obj is copied into obj1 and then can be accessed with the help of obj1.

Constructor with default values

A constructor with default values allows you to specify default values for properties if no values are provided during object creation. This helps in ensuring that the object always has valid properties, even if some arguments are mi

function Person(name = "Unknown", age = 0) {
    this.name = name;
    this.age = age;
}

const person1 = new Person("Kamal", 23);
const person2 = new Person("Vikram");  
const person3 = new Person();  

console.log(person1);  
console.log(person2); 
console.log(person3);

Output:


{"name":"Kamal","age":22}

{"name":"Vikram","age":0}

{"name":"Unknown","age":0}

The Person constructor is defined with default values for name and age. If no values are passed when creating an object, these defaults are used.
The parameters name = "Unknown" and age = 0 ensure that if no values are provided, the object will still have valid properties (name and age).
When creating person1, both name and age are provided. For person2, only the name is provided, so age defaults to 0. For person3, both name and age use the default values.
The console.log() statements print the objects, showing how default values are applied when arguments are missing.

Constructor with method on prototypes

In JavaScript, you can add methods to the prototype of a constructor, allowing all instances created from that constructor to share the same method. This helps in optimizing memory usage, as the method is not recreated for each instance.

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.greet = function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

const person1 = new Person("Kamal", 22);
const person2 = new Person("Vikram", 23);

person1.greet();  
person2.greet();

Output

Hello, my name is Kamal and I am 22 years old.

Hello, my name is Vikram and I am 23 years old.

The Person constructor initializes name and age properties when a new instance is created.
The greet() method is added to the prototype of Person. This means the method is shared across all instances of Person, saving memory.
Instances like person1 and person2 are created using the new keyword. They inherit the greet() method from the Person.prototype.
The greet() method is called on each instance. Since the method is shared via the prototype, both person1 and person2 can use it, demonstrating the shared behavior.

Constructor with inheritance

This code demonstrates how inheritance in classes allows a child class to inherit both properties and methods from a parent class constructor. The child class (two) inherits the name property from the parent class (one) using the super() keyword.

class one{
    constructor(name)
    {
        this.name=name
    }
    greet()
    {
        return `Hello ${this.name}`
    }
}
class two extends one{
    constructor(name,age)
    {
        super(name)
        this.age=age
    }
    greet1(){
        return `Your age is ${this.age}`
    }
}
const person1=new one('Kamal')
const person2=new two('Anbu',21)
console.log(person2.greet())

Output

Hello Anbu

The two class inherits the name property from the one class using super(name) in its constructor.
super(name) calls the one class's constructor, initializing the name property in the two class.
The two class adds its own age property, which is not present in the one class.
When creating an instance of person2 (the two class), it inherits the name property from the one class and has its own age property.
This demonstrates how a child class can access properties from both the parent class and its own constructor.

Advantages of constructor

Reusable Code: Constructors allow creating multiple instances of objects with similar properties and methods, promoting code reuse.
Encapsulation: They encapsulate the logic for setting up an object, keeping initialization clean and organized.
Object Initialization: Constructors make it easy to initialize objects with specific values (via parameters) when creating new instances.
Inheritance Support: Constructors enable inheritance, allowing child objects to inherit properties and methods from parent constructors.
Cleaner and More Maintainable Code: Constructors keep object creation logic in one place, making the code more readable and easier to maintain, especially for complex objects.

References

https://www.geeksforgeeks.org/javascript/js-constructor-method/
https://www.w3schools.com/js/js_object_constructors.asp

Objects in javascript

Kamalesh AR — Wed, 17 Jun 2026 01:51:42 +0000

An object in JavaScript is a collection of key-value pairs. Each key-value pair is called as a property. A property can be a function, an array, an object itself or any primitive data type i.e. integer, string, etc. Functions in object are called as methods.

An object is a collection of key/value pairs or properties. When the value is a function, the property becomes a method. Typically, you use methods to describe the object’s behaviors.

Example:

const human = {
    firstName: "Virat",
    lastName: "Kohli",
    age: 30,
    fullName: function(){
        return this.firstName + " " + this.lastName     
    }
}

Here firstName, lastName, and fullName are properties of the same object i.e. human. firstName is the key and Virat is the value of the property.

An object is a dynamic data structure that stores related data as key-value pairs, where each key uniquely identifies its value.

The values of properties can be primitives, objects, or functions (known as methods when defined inside an object).
Objects are mutable and dynamic properties can be added, modified, or deleted at any time.
Objects allow data grouping and encapsulation, making it easier to manage related information and behaviour together.

1. Creation Using Object Literal

The object literal syntax allows you to define and initialize an object with curly braces {}, setting properties as key-value pairs.

Exapmle:

let obj = {
    name: "Sourav",
    age: 23,
    job: "Developer"
};
console.log(obj);

Output

{"name":"Sourav","age":23,"job":"Developer"}

2. Creation Using new Object() Constructor

Example:

let obj = new Object();
obj.name= "Sourav",
obj.age= 23,
obj.job= "Developer"

console.log(obj);

Output

{"name":"Sourav","age":23,"job":"Developer"}

Accessing Object Properties

Dot Notation

let obj = { name: "Kamal", age: 22 };
console.log(obj.name);

Bracket notation

let obj = { name: "Kamal", age: 22 };
console.log(obj["age"]);

Adding Properties to an Object

let obj = { model: "Tesla" };
obj.color = "Red";

console.log(obj);

Removing Properties from an Object

To delete a property from an object we can use the delete operator. You cannot delete properties that were inherited, nor can you delete properties with their attributes set to configurable.

"‘delete’ operator returns true if the delete was successful. It also return true if the property to delete was non-existent or the property could not be deleted."

let obj = { model: "Tesla", color: "Red" };
delete obj.color;

console.log(obj);

Checking if a Property Exists

let obj = { model: "Tesla" };
console.log("color" in obj);
console.log(obj.hasOwnProperty("model"));

Methods (Functions Inside Objects)

Objects don't only store data.

const car = {
  brand: "BMW",

  start() {
    console.log("Car Started");
  }
};
car.start();

Output

Car Started

Refernces:
https://medium.com/@happymishra66/objects-in-javascript-2980a15e9e71
https://www.geeksforgeeks.org/javascript/objects-in-javascript/

Types of function and Threads & Process and Synchronous vs Asynchronous in javascript

Kamalesh AR — Mon, 15 Jun 2026 16:27:51 +0000

Types of function:

1. Named Function

A function that has its own name when declared. It’s easy to reuse and debug because the name shows up in error messages or stack traces.

Example:

function greet() {
  return "Hello!";
}
console.log(greet());

Output:

Hello!

2. Anonymous Function

A function that does not have a name. It is usually assigned to a variable or used as a callback. Since it has no name, it cannot be called directly.

Example:

const greet = function() {
  return "Hi there!";
};
console.log(greet());

Output:

Hi there!

3. Function Expression

When you assign a function (can be named or anonymous) to a variable. The function can then be used by calling that variable.

Example:

const add = function(a, b) {
  return a + b;
};
console.log(add(2, 3));

Output:

4. Arrow Function (ES6)

A new way to write functions using the => syntax. They are shorter and do not have their own this binding, which makes them useful in some cases.

Example:

const square = n => n * n;
console.log(square(4));

Output:

5. Immediately Invoked Function Expression (IIFE)

IIFE functions are executed immediately after their definition. They are often used to create isolated scopes.

Example:

(function () {
    console.log("This runs immediately!");
})();

Output:

This runs immediately!

Process

Process is a program that is currently in execution within an operating system. It operates in an independent environment and is managed by the OS for proper scheduling and execution. Processes form the basis of program execution in a multitasking system. Its Properties are:

Each process has a unique Process ID (PID) for identification.
Every process moves through different states such as new, ready, running, waiting, and terminated.
Processes communicate with each other using Inter-Process Communication (IPC) methods.

Real-Time Example of Process

Imagine you have Google Chrome, Spotify, and VS Code running on your computer.

Chrome = Process
Spotify = Process
VS Code = Process

Each application has its own memory and resources.

If Chrome crashes, Spotify and VS Code continue running because they are separate processes.

Easy understanding:
Process = Building
Each building has its own electricity, water, and rooms.

Thread

Thread is a smallest unit of execution within a process. It enables a program to perform multiple tasks concurrently while sharing the same memory and resources. Threads improve application performance and responsiveness in multitasking environments. Its properties are:

Each thread has its own Thread ID (TID) for identification.
A thread also moves through states such as new, runnable, running, waiting, and terminated.
Threads within the same process share memory and resources, enabling faster communication.
Context switching can occur between threads to allow multiple tasks to execute efficiently.

JavaScript is traditionally single-threaded, meaning it executes one task at a time using a single call stack.

Example:

console.log("Start");
console.log("Middle");
console.log("End");

Output:

Start
Middle
End

Real-Time Example of Thread

Inside Chrome, many tasks run simultaneously:

Rendering a webpage
Playing a YouTube video
Downloading a file
Handling user clicks

These tasks are performed using multiple threads within the Chrome process.

Easy understanding
Thread = Employees inside the building
Employees share the building's resources and work together on different tasks.

Synchronous and Asynchronous in JavaScript

JavaScript is a single threaded programming language used for web development. It supports synchronous and asynchronous execution. In synchronous execution, statements run one after another, and each task waits for the previous one to finish. In asynchronous execution, some tasks run in the background without stopping the execution of other code.

Synchronous JavaScript

Synchronous programming executes code in sequence, where each statement waits for the previous one to complete before running. This makes the flow simple and predictable.

"Synchronous means tasks are executed one after another. The next line of code waits until the current line finishes executing."

Tasks run one after another in a fixed order.
Time-consuming operations can block the execution of other code until they finish.

Example:

console.log("Hi");
console.log("Vicky");
console.log("How are you?");

Output:

Hi
Vicky
How are you?

In the above code, “Hi” is logged first, then “Vicky”, and finally “How are you”. Each statement executes only after the previous one completes.

Asynchronous JavaScript

Asynchronous programming, on the other hand, allows multiple tasks to run independently of each other. In asynchronous code, a task can be initiated, and while waiting for it to complete, other tasks can proceed. This non-blocking nature helps improve performance and responsiveness, especially in web applications.

"Asynchronous means some tasks can start now and finish later without blocking the execution of other code."

Call Stack: Functions are executed in the order they are called. Each function is added to the stack and completed before the next one runs.
Web APIs: Functions like setTimeout, HTTP requests, and event listeners are handled by browser Web APIs without blocking the call stack.
Callback Queue: After a Web API completes its task, the callback function is moved to the callback queue.
Event Loop: The event loop checks the call stack continuously. If it is empty, it moves functions from the callback queue to the stack for execution.

Exapmle:

console.log("Hi");

setTimeout(() => {
    console.log("Vicky");
}, 2000);

console.log("End");

Output:

Hi
End
Vicky

So, what the code does is first it logs in Hi then rather than executing the setTimeout function it logs in End and then it runs the setTimeout function.

At first, as usual, the Hi statement got logged in. As we use browsers to run JavaScript, there are the web APIs that handle these things for users. So, what JavaScript does is, it passes the setTimeout function in such web API and then we keep on running our code as usual. So it does not block the rest of the code from executing and after all the code its execution, it gets pushed to the call stack and then finally gets executed. This is what happens in asynchronous JavaScript.

References:

ILUGC Meetup about linux! in IIT, Madras.

Kamalesh AR — Sun, 14 Jun 2026 07:11:21 +0000

Yesterday I attend the ILUGC meetup in IIT,Madras.ILUGC session is fully predominently about the linux and its usage. I had great experience there about the meetup, go through from a senior developers and experienced. I had a wide connection with them about the developer industry. They had Bunch of knowledge about the linux and its advantages.

I was really shocked eventhough teenage students also attend that meet with the knowledge of their parents(Dad), that was wow!. And literally that was my First meetup! i was simply sat and observe what they do, they're sharing knowledge one by one about their perspective in linux. Many of them also first meet up and they gathered many things. This meet was good!.

And also one person, talk about the Playwright it was used for web application automation testing tool. He is automation test and he is also share some of his knowledge and experience about the playwright by powerpoint presentation. Eventhough he is started to learn the playwright but he prsented it confidently.

And there is small debate about the linux and windos. One person is i want to convert the 1000 members from windows to linux conversion 😄.

Overall this was my experience and learnings from that meet👍.Many things are new for me and also some points i can't understood😅 but i attend that meet. Thanks! IIT, Madras.

Functions in javascript with keywords

Kamalesh AR — Fri, 12 Jun 2026 16:42:08 +0000

Function:

A function is a block of reusable code written to perform a specific task.

You can think of a function as a sub-program within the main program. A function consists of a set of statements but executes as a single unit.

In JavaScript, we have some browser built-in functions like alert(), prompt(), and confirm(). You have probably used these in your project before, right? But you can still create your own custom functions.

There are several ways to define a function. Most commonly, we have function declaration and function expression.

In simple words, functions are actions or processes that receive an input and return an output. They can perform various tasks and calculations.

For example, if I want to calculate something when the user clicks the button, I will write a function for that action.

If I want to close the image modal, I will write a function.

If I want to remove something from a shopping cart, I will write a function to achieve that.

I can even write one function that can run another function. I can control functions with other functions.

Function declaration

One of the ways to define a function is a function declaration. When you create a function with a name, it’s called a function declaration (aka function definition or function statement). This is the most standard, basic way of writing a function and what you will use very often as a beginner.

The function declaration above consists of:

A function keyword
The name of this function
A parenthesis that holds the parameter(s)
The body of the function, enclosed in curly braces with statements that define the function

The function named sendMessage receives a parameter of a message and then logs this message to the console. When will this function or how will this function do it? We will cover this very soon.

Function keyword: To create and use functions you always need to use the keyword function as it’s a part of JavaScript syntax that helps JavaScript to identify what you are trying to create.
Function name: A function name is a way to identify the function. When you have various functions you need to differentiate which one does what for later use.
Function parameter: It’s the name of a potential value that we can pass to the function. Imagine, you have a function that console logs a name every time you click a button. I can pass inside the function the parameter that will have a value later. This function will receive this value and then log it to the console. Function parameters are not mandatory.
Function body: This refers to the block of code inside curly braces ({}). This is a place where we can provide function instructions.
Function statement: Inside the body, we can have function statements and expressions that are the tasks or processes we expect the function to perform.

How to call a function?

Once you create a function you also need to call it. When you call the function, it performs the tasks you write in the function body. There are functions that don’t need to be called.

Functions can be also called differently but it’s a special function that we will cover later.

The basic that you need to understand right now is that to call a function you use its name followed by parenthesis. Just like with people. To call someone you use their name, so in the case of functions, it’s the same.

As an illustration, here is a function hello:

This function is not going to show us anything in the console right now because we didn’t call it.

That’s why we need to add one more line:

And only now we will see “How can I help you?” in the console.

What is a function parameter?

A function parameter is a name that we include when creating a function. This name will potentially be a value that the function receives and later performs some operations on/with it.

The name that you come up with can be any, it’s up to you what the name will be and doesn’t affect the result. The parameter names are needed to associate them with future values we plan to pass to the function.

There are several rules to remember when it comes to parameters:

The names cannot be repetitive. If you use one name, the next one needs to be different.
You don’t always have to use parameters. They are not required.
The order matters. If you want to pass parameters of a name and surname, the values you plan to pass, need to match the order. If your second parameter is called last name but you pass a name as a second value, the value of the last name parameter will be the name value.
You don’t define the data type of the possible value. JavaScript is a dynamically typed language meaning that you don’t have to write in advance what data type the parameter is going to be.
If you have not already make sure to read about data types in JavaScript.
Parameter names need to be descriptive and it’s recommended to use camelCase (lastName, firstName) but not a must.

The must-know along with parameters are arguments.

What is a function argument?

A function argument is a value that we pass to the function. The value will be represented by the function parameter. When I use parameters like name and last name, the values that I will pass, will be called arguments.

According to the image above, the name msg is the parameter but the actual value, “Hello! :)” is an argument.

Arguments object

An argument object is a built-in object available inside the body of the function. It represents all the arguments that we passed into the function. This object is more similar to an array but it’s not a regular array we know of.

If you have 4 parameters in the function, for example, but you pass 5 arguments (values), the arguments object will read all the arguments you have passed, even if there is no parameter to read it.

You can use an argument object and combine it with array index functionality.

An index is the location in the array. The index of the very first item in an array is 0, so its position (index) is 0. The next one is at the index 1 and so on.

Return keyword in function

To create a function that will resolve to a value after the function is invoked, you use the return keyword. You write this within the body of the function.

return is a directive that returns a value to the function after the code within it has been executed.

In a function body, we often use a return statement. A return statement returns one specific value and stops the function execution. Any code you have after the return statement is not going to execute. That’s why the return statement should always be the last one.

The value returned can be any data type. It’s also not mandatory to write a value after the return statement. If you skip the value, the function will return undefined.

For example:

function sum(a, b){
    return  a + b;
}

sum(10, 20);

Output:

//output will be 30

What does the return statement do:

In regular functions, the return says “ I am done, here is the answer”, stops doing anything and gives you the value you asked for from the place where you called the function.
In the asynchronous function, it says “I promise to answer you later when I am done” and remembers that it will answer later.
In generator functions it says “I will give you right now this part of the answer but I might have more as well”.
In the asynchronous generator, it says “I promise to give you some part of the answer later but I might also have some more answers but I also promise I might give them later on”.

References

https://medium.com/@catherineisonline/the-complete-guide-to-javascript-functions-fc9cf9f89d5b
https://www.freecodecamp.org/news/what-are-functions-in-javascript-a-beginners-guide/
https://www.geeksforgeeks.org/javascript/functions-in-javascript/
https://www.w3schools.com/js/js_function_return.asp