DEV Community: Veera Ganapathi

Closure in JavaScript

Veera Ganapathi — Tue, 25 Aug 2026 14:36:23 +0000

What is Closure?

A closure is the combination of a function and its lexical environment, allowing the function to access variables from its outer scope even after the outer function has finished executing.

Retains access to outer function variables.
Preserves the lexical scope.
Allows data encapsulation and privacy.
Commonly used in callbacks and asynchronous code.

function bank() {

            let min_balance = 500;

            const actions = {

                deposit: function (amt) {
                    min_balance = min_balance + amt;
                },

                withdraw: function (amt) {
                    min_balance = min_balance - amt;
                },
                checkbalance: function () {
                    console.log(min_balance);

                }



            }
            return actions;
        }

        const customer1 = bank();
        customer1.deposit(1000);
        customer1.checkbalance();

Output:
1500

Testing Levels:

Veera Ganapathi — Mon, 17 Aug 2026 16:09:50 +0000

Main Testing Levels:

Unit Testing
Integration Testing
System Testing

Unit Testing

Unit Testing is the first level of software testing in which individual units or components of an application are tested independently. It is usually performed by developers to verify that each unit works correctly before integration.

Tests individual functions, methods, or classes in isolation.
Detects defects early, reducing debugging time and development cost.
Ensures each component behaves as expected.

Integration Testing

Integration Testing verifies the interaction and data flow between two or more integrated modules. It ensures that combined components communicate correctly and work together without interface issues.

Tests communication between integrated modules.
Identifies interface and data exchange defects.
Ensures seamless interaction among software components.

Integration Testing Approaches

Top-Down Approach
Bottom-Up Approach

Top-Down Approach
In Top-Down Integration Testing, testing starts from the top-level module and moves down to the lower-level modules.

Stubs

Stubs are developed by software developers to use them in place of modules, if the respective modules aren't developed, missing in developing stage, or are unavailable currently while Top-down testing of modules
Stubs are basically known as a "called programs" and are used in the Top-down integration testing.

Bottom-Up Approach
In Bottom-Up Integration Testing, testing starts from the lower-level modules and moves up to the top-level modules.

Drivers

Drivers serve the same purpose as stubs, but drivers are used in Bottom-up integration testing and are also more complex than stubs.
Drivers are the "calling program" and are used in bottom-up integration testing.

System Testing

System Testing evaluates the complete and integrated software application to verify that it meets all specified functional and non-functional requirements. It is performed in an environment similar to production.

Tests the complete application from end to end.
Verifies functional and non-functional requirements.
Ensures the software behaves correctly in real-world scenarios.

Error vs Bug vs Defect

Error
A mistake made by the developer/programmer.
Bug
A problem in the software caused by an error and found during testing.
Defect
When the actual result does not match the expected result or requirement.

Software Testing

Veera Ganapathi — Mon, 17 Aug 2026 14:41:46 +0000

What is Software testing?

Software testing is the process of evaluating a software application to verify that it works as expected and meets specified requirements. It helps identify defects, errors, and missing functionalities before the software is delivered to users.

What is testcase?

A test case is a set of conditions or steps used to verify that a software application works as expected. It includes inputs, execution steps, and expected results. Test cases help ensure the system meets requirements and is free of defects.

Steps:

Open the login page.
Enter a valid username.
Enter a valid password.
Click the Login button.

Expected Result:
The user should be logged in successfully.

Actual Result:
The result we get after performing the test.

Status:
Pass / Fail

What is a Test Scenario?

A Test Scenario is a high-level condition or functionality that needs to be tested.

Example: Login Page

Under this scenario, we can have multiple test cases:

JavaScript Fetch API

Veera Ganapathi — Wed, 05 Aug 2026 15:13:16 +0000

Fetch API in JavaScript

The Fetch API is a modern interface in JavaScript that allows you to make HTTP requests.
It replaces the older XMLHttpRequest method and provides a cleaner and more flexible way to fetch resources asynchronously.
The Fetch API uses Promises, making it easier to work with asynchronous data.

Syntax

fetch(url, options)
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

url: The API endpoint from which data is fetched.
options (optional): Specifies method, headers, body, etc.
response.json(): Parses the response as JSON.
.catch(error): Handles any errors that occur during the request.

How Fetch API Works?

A request is sent to the specified URL.
The server processes the request and sends a response.
The response is converted to JSON (or another format) using .json().
Errors are handled using .catch() or try-catch blocks.

Task 10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API</title>
    <style>
        #api{
            display:grid;
            grid-template-columns:1fr 1fr 1fr 1fr;
            gap:20px;
        }
        .card {
            border: 1px solid #ccc;
            padding: 10px;
            margin: 10px;
            width: 200px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 10px;


        }
        h1{
            text-align:center;
        }
    </style>
</head>
<body>

    <h1>Store Products</h1>
    <div id="api"></div>

    <script>




fetch('https://fakestoreapi.com/products')
.then(res => res.json())
.then(json => {

    let apiData = document.getElementById("api");

    json.forEach(product => {

        apiData.innerHTML +=
        '<div class="card">' +
            '<img src="' + product.image + '" width="100" height="100">' +
            '<p>Title: ' + product.title + '</p>' +
            '<h4>Price: $' + product.price + '</h4>' +
        '</div>';

    });

});

</script>
</body>
</html>

Output

Python Operators

Veera Ganapathi — Mon, 03 Aug 2026 16:18:33 +0000

Python Logical Operators:

Logical operators are used to combine conditional statements. Python has three logical operators:

and- Returns True if both statements are true
or- Returns True if one of the statements is true
not - Reverses the result, returns False if the result is true

age = 25
has_ticket = True
has_coupon = False

# Example 1: 
if age >= 18 and has_ticket:
    print("Allowed entry.")  

# Example 2: 
if has_ticket or has_coupon:
    print("Valid for entry or discount.") 

# Example 3: 
if not has_coupon:
    print("No coupon provided.")

Relational operators or Comparison operators:

Comparison operators are used to compare two values:

user_age = 20
voting_age = 18


if user_age >= voting_age:
    print("You are eligible to vote!")
else:
    print("You are too young to vote.")


print(10 == 20) 
print(10 != 20)

What is Runtime?

Runtime is the period when a Python program is executing, and the computer is performing the instructions written in the code.

Python Functions

Python functions are reusable blocks of code used to perform a specific task.
They help organize programs into smaller sections and execute the same logic whenever needed by calling the function.

def fun():
    print("Welcome to Python")

fun()

Function Arguments

Arguments are values passed to a function when it is called. They allow functions to receive input data and perform operations using those values.

def evenOdd(x):
    if (x % 2 == 0):
        return "Even"
    else:
        return "Odd"

print(evenOdd(16))
print(evenOdd(7))

Method Overloading

Method overloading is a feature of object-oriented programming where a class can have multiple methods with the same name but different parameters.
To overload method, we must change the number of parameters or the type of parameters, or both.

Error in python

SyntaxError: Missing colons :, unclosed parenthesis (), or quotes "".
IndentationError: Incorrect spacing or mixing tabs and spaces.
TypeError: Combining incompatible data types, like adding a string to an integer.

DOM Mini Project Part-2

Veera Ganapathi — Mon, 03 Aug 2026 15:25:19 +0000

Task 7

Uppercase converter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Uppercase</title>
</head>
<body>
    <h1 id="upper">hello</h1>
    <button onclick="change()">Change to Uppercase</button>
    <script>
        function change()
        {
        let upperCase=document.getElementById("upper").innerText;
        result=upperCase.toUpperCase();
        document.getElementById("upper").innerText=result;
        }
    </script>
</body>
</html>

Output

Before Click

After Click

Task 8

Simple greeting alert box

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple greeting alert box</title>
</head>
<body>
    <input type="text" id="greet">
    <button onclick="greet()">Greet</button>
    <script>
        function greet()
        {
            let name = document.getElementById("greet").value;
            alert("Hello, " + name + "!");
        }
    </script>
</body>
</html>

Before

After

Task 9

Calculator

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
</head>
<body>
    <input type="text" id="val1">
    <input type="text" id="val2">

    <button onclick="add()">Add</button>
    <button onclick="subtract()">Subtract</button>
    <button onclick="multiply()">Multiply</button>
    <button onclick="divide()">Divide</button>
    <h1 id="res"></h1>

    <script>


        function add(){
            let a=Number(document.getElementById("val1").value);
            let b=Number(document.getElementById("val2").value);
            document.getElementById("res").innerText=a+b;
        }

         function subtract(){
            let a=Number(document.getElementById("val1").value);
            let b=Number(document.getElementById("val2").value);
            document.getElementById("res").innerText=a-b;
        }

         function multiply(){
            let a=Number(document.getElementById("val1").value);
            let b=Number(document.getElementById("val2").value);
            document.getElementById("res").innerText=a*b;
        }

         function divide(){
            let a=Number(document.getElementById("val1").value);
            let b=Number(document.getElementById("val2").value);
            if(b===0){
                document.getElementById("res").innerText="Cannot divide by zero";
            }
            else{
                document.getElementById("res").innerText=a/b;
            }
        }
    </script>

</body>
</html>

Output:

Conditional Statements (Python)

Veera Ganapathi — Fri, 31 Jul 2026 14:50:55 +0000

Conditional Statements

Conditional statements are used to control the flow of execution in a program based on specific conditions.
They allow programs to execute different blocks of code depending on whether a condition evaluates to True or False.

If Statement

If statement is used to execute a block of code only when a specified condition evaluates to True.

mark1=90
mark2=89
if mark1 > mark2:
    print("Mark1 is greater")

Short Hand if

Short-hand if is used to write if statements in a single line. It is useful when only one statement needs to be executed.

if mark1 > mark2:print("Mark1 is greater")

If else Statement

If Else statement is used to execute one block of code when the condition is True and another block when the condition is False.

if mark1 > mark2:
    print("Mark1 is greater")
else:
    print("Mark2 is greater")

Elif Statement

The elif keyword is Python's way of saying "if the previous conditions were not true, then try this condition".

mark1=90
mark2=90
if mark1 > mark2:
    print("Mark1 is greater")
    print("Hi")
    print("hello")
elif mark2 > mark1:
    print("Mark2 is greater")
else:
    print("Both Are Equal")

Output:
Both Are Equal

Programming Rules:

Never say "I don't know", say "Let me try"
Known to unknown
Don't think about entire output
think about very next step
Introduce a variable only when it simplifies the solution
Micro to macro
Dry run before you run
Every big problem split three part input, progress, output
Logic first and syntax next

Python Programming

Veera Ganapathi — Thu, 30 Jul 2026 14:18:54 +0000

What is Python?

Python is a popular, high-level computer programming language known for its clear syntax, readability, and general-purpose versatility.

Key Features:

Simple syntax: Uses clean, English-like words instead of complex symbols or curly brackets.
Interpreted: Code runs line by line, which makes finding errors fast and easy.
Dynamic typing: You do not need to declare variable types ahead of time.
Free and open-source: Available to download and use on all major operating systems.

print("Hello, World!")

Output:
Hello, World!

print() is a built-in Python function that instructs the computer to display text on the screen.
"Hello, World!" is a string enclosed within quotes (either single ' or double ").
Python uses indentation (spaces or tabs) to define code blocks instead of braces {} in C, C++ and Java .

What is Python 2?

Python 2.0 was introduced to the tech world in the year 2000.
Created by the BeOpen Python Labs team, the purpose of the introduction of Python 2 was to make programming simple and easy to learn for the common masses.
Python 2 was successful in implementing the technical details of the Python Enhancement Proposal (PEP).
However, after the introduction of Python 3, Python 2 could not find a lot of its usage in the tech world and the year 2020 marked the end of Python 2’s legacy with Python 2.7 being its latest version.

Given below is a timeline of the release of the various versions of the Python 2.X series:

Python 2.0 – October 16, 2000
Python 2.1 – April 17, 2001
Python 2.2 – December 21, 2001
Python 2.3 – July 29, 2003
Python 2.4 – November 30, 2004
Python 2.5 – September 19, 2006
Python 2.6 – October 1, 2008
Python 2.7-July 3, 2010

Difference Between Python 2 and 3:

Python Indentation:

Indentation refers to the spaces at the beginning of a code line.
Where in other programming languages the indentation in code is for readability only, the indentation in Python is very important.
Python uses indentation to indicate a block of code.

if 5 > 2:
  print("Five is greater than two!")

Output:
Five is greater than two!

if 5 > 2:
print("Five is greater than two!")

Output:
SyntaxError: expected an indented block after 'if' statement on line 1

DOM Mini Project Part-1

Veera Ganapathi — Thu, 30 Jul 2026 13:04:54 +0000

Task 1

Counter App

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Count App</title>
</head>
<body>
    <h1 id="count">0</h1>
    <button onclick="add()">+</button>
    <button onclick="sub()">-</button>
    <button onclick="reset()">Reset</button>
    <script>
        let count=0;
        function add()
        {
            count++;
             document.getElementById("count").innerText=count;
        }
        function sub()
        {
            count--;
            document.getElementById("count").innerText=count;
        }
        function reset()
        {
            count=0;
            document.getElementById("count").innerText=count;
        }
    </script>
</body>
</html>

Output

Increase the value

Decrease the value

Reset the value

Task 2

Change Text on Button Click

<!DOCTYPE html>
<html>
<body>
<h1>HTML DOM Events</h1>
<p id="demo">Hello</p>
<button onclick="myFunction()">click</button>

<script>
function myFunction() {
  let text = document.getElementById("myInput");
  document.getElementById("demo").innerHTML = "Welcome to all";
}
</script>

</body>
</html>

Output

Before Click

After Click

Task 3

Live Character Counter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" onInput="getString()" id="show">
    <h1 id="result"></h1>
    <script>
        function getString()
        {
            const element=document.getElementById("show").value;
            // const user=element.value;
            document.getElementById("result").innerText=element.length;
            // h1.innerText=user.length;

        }
    </script>
</body>
</html>

Output

Count the character

Task 4

Show/Hide Password

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://kit.fontawesome.com/d137b0e967.js" crossorigin="anonymous"></script>
    <style>
        button{
            border: none;
            background-color: white;

        }
    </style>
</head>
<body>
    <div style="border: 2px solid black; width: fit-content; padding: 5px; border-radius: 10px;">
    <input id="password" type="password" style="border: none; outline-color: white;">
    <button id ="eye"  onclick="password()"><i  class="fa-solid fa-eye"></i></button>
    </div>

    <script>
        function password(){
            const pass=document.getElementById("password");
            if(pass.type=="password"){
                pass.type="text";  
                const show = document.getElementById("eye")
                show.innerHTML = '<i class="fa-solid fa-eye-low-vision"></i>' 
            }
            else{
                pass.type="password";
                const hide = document.getElementById("eye")
                hide.innerHTML='<i  class="fa-solid fa-eye"></i>'
            }
        }
    </script> 
</body>
</html>

Output

Show password

Hide password

Task 5

Change background color on button click

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background color</title>
</head>
<body id="changeColor">
    <h1 id="vt">Welcome to all !!!!</h1>
    <button onclick="veera()">Background color change</button>
    <script>
        function veera()
        {
          let h1=document.getElementById("vt");
          let h2=document.getElementById("changeColor");

          if(h1.innerText==="Welcome to all !!!!")
          {

            h1.innerText="veera";
            h1.style.color="red";
            h2.style.background ="yellow";
          }
          else{
            h1.innerText="Welcome to all !!!!";
            h1.style.color="blue";
            h2.style.background = "white";
          }
        }
    </script>
</body>
</html>

Output

Before click

After click

Task 6

Disable button after click

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>
<body>

    <h1 id="show"></h1>
    <button id="click" onclick="clickIt()">Click Me!</button>

<script>
function clickIt() {
    document.getElementById("click").disabled = true;
    document.getElementById("show").innerText="Button Clicked";

}
</script>
</body>
</html>

Output

Button is disabled

DOM (Document Object Model)

Veera Ganapathi — Wed, 29 Jul 2026 16:59:45 +0000

DOM (Document Object Model)

The HTML DOM (Document Object Model) is a structured representation of a web page that allows developers to access, modify, and control its content and structure using JavaScript.
It powers most dynamic website interactions, enabling features like real-time updates, form validation, and interactive user interfaces.

Structure of the HTML DOM

The document is the root.
HTML tags like html, head, and body are branches.
Attributes, text, and other elements are the leaves.

<html>
<body>

<p id="demo"></p>

<script>
// Access a paragraph Element
const myPara = document.getElementById("demo");

// Change the content of the Element
myPara.innerText = "Hello World!";
</script>

</body>
</html>

id="demo" is an HTML property
getElementById() is a DOM Method
innerText is a DOM Property

Selecting DOM Elements

Selecting DOM (Document Object Model) elements is a fundamental aspect of web development with JavaScript.
It allows developers to interact with and manipulate elements on a webpage dynamically.
Proper selection of elements is crucial for tasks such as updating content, adding event listeners, or modifying styles.

getElementById(id)

getElementById(id) method is used to select an element by its unique ID.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>DOM getElementById Method Example</title>
</head>
<body>
    <h1>DOM getElementById Method</h1>
    <p id="demo"></p>
    <script>
        const name=document.getElementById("demo");
        name.innerText="Front-end Developer";
    </script>
</body>
</html>

getElementsByClassName(class)

getElementsByClassName(class) method retrieves all elements that share a given class name.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>DOM getElementsByClassName Methods Example</title>
</head>
<body>
    <h1>DOM getElementsByClassName Concept</h1>
    <p class="demo"><p>
    <p class="veera"></p>
    <script>
        const name=document.getElementsByClassName("demo");
        name[0].innerHTML="Front-end Developer";

        const nam=document.getElementsByClassName("veera");
        nam[0].innerHTML="Web Developer";

    </script>
</body>
</html>

querySelector(selector)

querySelector(selector) method returns the first element that matches the specified selector.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>DOM querySelector Method Example</title>
</head>
<body>
    <h1>DOM querySelector Concept</h1>
    <p id="demo"></p>
    <p id="veera"></p>
    <script>
        const name=document.querySelector("#demo");
        name.innerHTML="Front-end Developer";

    </script>
</body>
</html>

querySelectorAll(selector)

querySelectorAll(selector) method selects all elements that match the given selector.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>DOM querySelectorAll Methods Example</title>
</head>
<body>
    <h1>DOM Concept</h1>
    <p id="demo">This is a paragraph with an Class Name.</p>
    <p id="demo">This is a paragraph with an Class Name.</p>

    <script>
        const name=document.querySelectorAll("#demo");
        name[0].innerHTML="Front-end Developer";

        const nam=document.querySelectorAll("#demo");
        nam[1].innerHTML="Web Developer";

    </script>
</body>
</html>

EventListener

addEventListener(event, fn)

The addEventListener() method attaches an event handler to the specified element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>DOM getElementById Method Example</title>
</head>
<body>
    <h1>DOM Concept</h1>
    <p id="demo">This is a paragraph with an ID.</p>
    <button id="btn">Click Me</button>
    <script>
        const element = document.getElementById("btn");
        element.addEventListener("click", myFunction);

        function myFunction() {
            document.getElementById("demo").innerHTML = "Hello World";
        }
</script>
</body>
</html>

Mouse Events

onclick

The HTML DOM onclick event occurs when the user clicks on an element.

<!DOCTYPE html>
<html>
<body>
 <button onclick="myFunction()">Click me</button>
 <p id="btn"></p>

 <script>
  function myFunction() {
   document.getElementById("btn").innerText = "Clicked ";
  }
 </script>
</body>
</html>

*oninput *

The oninput event occurs when an element gets input.
The oninput event occurs when the value of an tags input or textarea or select element is changed.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" onInput="getString()" id="show">
    <h1 id="result"></h1>
    <script>
        function getString()
        {
            const element=document.getElementById("show").value;
            // const user=element.value;
            document.getElementById("result").innerText=element.length;
            // h1.innerText=user.length;

        }
    </script>
</body>
</html>

JavaScript Arrays

Veera Ganapathi — Tue, 28 Jul 2026 13:04:39 +0000

What is array ?

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.

// Creating array
let numbers = [2, 4 , 8, 12, 16];
//Printing array
console.log(numbers);

Why Use Arrays?

We use an array to store multiple values in a single variable.

Without an array:

let mark1 = 80;
let mark2 = 90;
let mark3 = 75;

With an array:

let marks = [80, 90, 75];

Array Methods

JavaScript allows us to do such operations as adding, removing, updating, or getting elements, transforming, or iterating through arrays.

Array length
Array toString()
Array pop()
Array push()
Array shift()
Array unshift()

Array length

The length property returns the length (size) of an array:

let a = ["HTML", "CSS", "JS", "React"];
console.log(a.length);

output:
4

Array toString()

The toString() method converts the given value into the string with each element separated by commas.

let a  = ["HTML", "CSS", "JS", "React"];
let s = a.toString();
console.log(s);

output:
HTML,CSS,JS,React

Array.pop() Method

The pop() method is used to remove elements from the end of an array.

let a = [20, 30, 40, 50];
a.pop();
console.log(a);

output:
[20,30,40]

Array.push() Method

The push() method is used to add an element at the end of an Array.

let a = [10, 20, 30, 40, 50];
a.push(60);
console.log(a);

otupt:
[10,20,30,40,50,60]

Array.shift() Method

The shift() method is used to remove elements from the beginning of an array

let a = [20, 30, 40, 50];
a.shift();
console.log(a);

output:
[30,40,50]

Array.unshift() Method

The unshift() method is used to add elements to the front of an Array.

let a = [20, 30, 40];
a.unshift(10);
console.log(a);
output:

[10, 20, 30, 40]

Array Iterations

Array forEach()
Array map()
Array filter()

Array forEach()

The forEach() method calls a function (a callback function) for each array element.

const num=[1,2,3,4,5,6,7,8,9,10];
function number(value)
{
    console.log(value);
}
console.log(num);
num.forEach(number)

output:
[
  1, 2, 3, 4,  5,
  6, 7, 8, 9, 10
]
1
2
3
4
5
6
7
8
9
10

Array 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.

const nums = [1, 2, 3];

function maps(value){
    console.log(value);
    return value * 5;
}
result=nums.map(maps);
console.log(result);

output:
1
2
3
[ 5, 10, 15 ]

Array filter()

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

let numb = [5, 10, 15, 20];

let results = numb.filter(function(value) {
    return value >= 10;
});

console.log(numb);
console.log(results);

output:
[ 5, 10, 15, 20 ]
[ 10, 15, 20 ]

Javascript Object

Veera Ganapathi — Fri, 17 Jul 2026 07:31:14 +0000

What are JavaScript Objects?

Objects are variables that can store both values and functions.
Values are stored as key:value pairs called properties.
Functions are stored as key:function() pairs called methods.

const students = {
  name:"abc",
  age:18,
  dept:"cs"
};

Object Properties

Properties are key:value Pairs.
A JavaScript object is a collection of properties.
Properties can be changed, added, and deleted.

Access Properties

Dot notation
Bracket notation
Expression

// objectName.property
let age = students.age;

//objectName["property"]
let age = students["age"];

//objectName[expression]
let age = students[x];

Changing Properties

You can change the value of a property:

const person = {
  name: "vijay",
  age :  50
};
person.age = 10;
console.log(person.age);


output:
10

Add New Properties

You can add a new property by simply giving it a value.

const person = {
  name: "vijay",
  age: 50
};
person.nationality = "English";
console.log(person.nationality);

output:
English

Delete Properties

The delete keyword deletes a property from an object.

const person = {
  name: "vijay",
  age: 50
};
delete person.age;
console.log(person);

output:
vijay

The delete keyword deletes both the value and the property.
After deleting, the property is removed. Accessing it will return undefined.

Nested Objects

Property values in an object can be other objects.

const students = {
  name:"abc",
  age:18,
  subject:{
      sub1:"cs",
      sub2:"maths",
      sub3:"cc"
}
};
console.log(students.subject.sub2;);

output:
maths

Object Methods

Methods are actions that can be performed on objects. Methods are functions stored as property values.

const students = {
  name:"abc",
  age:18,
  fullName: function() {
    return students.name + " " + students.age;
  }
};
let full=students.fullName();
console.log(full);

Object Constructors

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.

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

}

// Create a Person object
const myFather = new Person("vijay", 50);
const myMother = new Person("thi", 45);
console.log(myFather);
console.log(myMother);