DEV Community: Lokesh

Fetch API in JavaScript

Lokesh — Mon, 12 Oct 2026 11:28:24 +0000

What Is Fetch API?

The Fetch API is used to send requests to a server and receive data from it.

For example, when we open a website that displays weather information or product details, the website may fetch data from an API.

JavaScript's fetch() method helps us retrieve this data and use it on a webpage.

1. What Is an API?

API stands for Application Programming Interface.

In simple terms, an API allows different software applications to communicate with each other.

For example, a website can use an API to retrieve a list of products from a server instead of storing all the product information directly in its HTML file.

2. Basic Fetch Example

Let's fetch some sample data from a public API.

fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.log("Error:", error);
    });

Here is how it works:

fetch() sends a request to the API.
response.json() reads the response body and converts the JSON data into a JavaScript value.
then(data => ...) receives the converted data.
catch() handles errors such as network failures.

The request is asynchronous, so JavaScript can continue doing other work while waiting for the response.

3. Displaying API Data on a Webpage

We can use the fetched data to update HTML elements.

HTML:

<h2 id="title">Loading...</h2>
<p id="body"></p>

JavaScript:

fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then(response => response.json())
    .then(data => {
        document.getElementById("title").textContent = data.title;
        document.getElementById("body").textContent = data.body;
    })
    .catch(error => {
        console.log("Error:", error);
    });

Here, the post title and body are displayed on the webpage using the DOM.

4. Where Is Fetch API Used?

The Fetch API is commonly used to:

Retrieve product details from a server.
Display posts and comments.
Get weather information.
Load user details.
Send data to a server.

DOM in JavaScript for Beginners

Lokesh — Mon, 12 Oct 2026 11:22:43 +0000

What Is DOM?

DOM stands for Document Object Model. It allows JavaScript to access and change HTML elements on a webpage.

Using the DOM, we can change text, add new elements, delete elements, change styles, and respond to button clicks.

1. Accessing Elements

We can use getElementById() to select an HTML element using its ID.

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

let heading = document.getElementById("title");

console.log(heading);

Here, JavaScript selects the heading whose ID is title.

2. Updating Elements

We can use textContent to change the text of an element.

heading.textContent = "Welcome to JavaScript!";

Now, the heading displays the new text.

We can also change its style:

heading.style.color = "blue";

This changes the heading's text color to blue.

3. Creating Elements

We can create new HTML elements using createElement().

let paragraph = document.createElement("p");

paragraph.textContent = "This is a new paragraph.";

document.body.appendChild(paragraph);

Here, JavaScript creates a paragraph, adds text to it, and places it inside the webpage's body.

4. Deleting Elements

We can remove an HTML element using the remove() method.

<p id="message">Hello World!</p>

let paragraph = document.getElementById("message");

paragraph.remove();

The paragraph will be removed from the webpage.

Important DOM Methods and Properties

getElementById() — selects an element by ID.
querySelector() — selects the first matching element.
textContent — changes or reads text.
createElement() — creates a new element.
appendChild() — adds an element inside another element.
remove() — removes an element.
addEventListener() — responds to user actions.

Callback Functions in JavaScript.

Lokesh — Mon, 12 Oct 2026 11:13:24 +0000

What Is a Callback Function?

A callback function is a function that is passed as an argument to another function and can be called inside that function.

In simple words, we give one function to another function so it can execute it when needed.

Let's understand this with a simple example.

1. A Simple Callback Example

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

function welcome(callback) {
    callback();
}

welcome(greet);

Output:

Hello!

Let's understand what happens:

greet() is a function that prints "Hello!".
welcome() accepts a function through its callback parameter.
welcome(greet) passes the greet function to welcome.
callback() executes the function it received.

Notice that we pass greet without parentheses because we are passing the function itself, not calling it immediately.

2. Callback Functions with Parameters

We can also pass data to a callback function.

function calculate(a, b, callback) {
    let result = a + b;
    callback(result);
}

function display(value) {
    console.log(value);
}

calculate(10, 20, display);

Output:

Here, calculate() adds two numbers and passes the result to the display() callback.

This allows us to separate the calculation from displaying the result.

3. Using an Anonymous Callback

We don't always need to create a separate named function for a callback. We can pass an anonymous function directly.

function greet(callback) {
    callback();
}

greet(function() {
    console.log("Welcome to JavaScript!");
});

Output:

Welcome to JavaScript!

The function passed directly to greet() is the callback.

4. Callback Functions with Array Methods

Callbacks are commonly used with JavaScript array methods such as forEach(), map(), and filter().

For example, using forEach():

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

fruits.forEach(function(fruit) {
    console.log(fruit);
});

Output:

Apple
Banana
Mango

Here, the function passed to forEach() is a callback. JavaScript calls it for each element in the array.

Why Are Callback Functions Important?

Callback functions help us:

Reuse functions in different situations.
Pass behavior from one function to another.
Work with array methods.
Handle events and delayed operations.
Understand asynchronous JavaScript.

Array Iteration in JavaScript.

Lokesh — Mon, 12 Oct 2026 11:09:54 +0000

What Is Array Iteration?

Array iteration means going through the elements of an array one by one to perform an operation.

For example, if we have a list of fruits, we can use array iteration to display each fruit without writing separate code for every item.

Let's look at some common ways to iterate through arrays in JavaScript.

1. Using a for Loop

A for loop allows us to access array elements using their index.

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

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

Output:

Apple
Banana
Mango

Here, i starts at 0 and increases until it reaches the array's length. We use fruits[i] to access each element.

2. Using for...of

The for...of loop lets us access each value directly without using an index.

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

for (let fruit of fruits) {
    console.log(fruit);
}

This prints each fruit on a separate line.

It is a simple and readable way to iterate through array values.

3. Using forEach()

The forEach() method executes a function for every element in an array.

let numbers = [10, 20, 30];

numbers.forEach(function(number) {
    console.log(number);
});

Here, the function runs once for each number in the array.

We can also write it using an arrow function:

numbers.forEach(number => console.log(number));

4. Using map()

The map() method creates a new array by transforming each element.

let numbers = [1, 2, 3];

let doubled = numbers.map(number => number * 2);

console.log(doubled);

Output:

[2, 4, 6]

Here, every number is multiplied by two, and the results are stored in a new array.

5. Using filter()

The filter() method creates a new array containing only the elements that satisfy a condition.

let numbers = [10, 15, 20, 25, 30];

let result = numbers.filter(number => number > 20);

console.log(result);

Output:

[25, 30]

Here, only numbers greater than 20 are included in the new array.

Difference Between These Methods

for loop: Useful when we need control over the index and loop execution.
for...of: Useful when we want to access each array value directly.
forEach(): Useful when we want to perform an action for each element.
map(): Useful when we want to transform elements and create a new array.
filter(): Useful when we want to select elements that match a condition.

Why Is Array Iteration Important?

Array iteration is useful when working with:

Lists of products in an online store.
Student marks and records.
Data received from APIs.
Filtering and displaying information.
Calculating totals and processing collections of values.

JavaScript Arrays

Lokesh — Mon, 12 Oct 2026 11:06:31 +0000

What Are Arrays?

An array is used to store multiple values in a single variable.

For example, if we want to store the names of five fruits, we don't need to create five separate variables. We can store all the names in one array.

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

Here, fruits is an array containing four items.

1. Accessing Array Elements

We can access array elements using their index.

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

console.log(fruits[0]);
console.log(fruits[1]);

Output:

Apple
Banana

Remember that array indexing starts at 0, not 1.

fruits[0] gives the first element.
fruits[1] gives the second element.
fruits[2] gives the third element.

2. Adding Elements

JavaScript provides methods to add new elements to an array.

Using push(): Adds an element to the end.

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

fruits.push("Mango");

console.log(fruits);

Output: ["Apple", "Banana", "Mango"]

Using unshift(): Adds an element to the beginning.

fruits.unshift("Orange");

console.log(fruits);

Now, "Orange" becomes the first element.

3. Removing Elements

We can remove elements using different methods.

Using pop(): Removes the last element.

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

fruits.pop();

console.log(fruits);

Output: ["Apple", "Banana"]

Using shift(): Removes the first element.

fruits.shift();

console.log(fruits);

Now, "Apple" is removed from the array.

4. Finding the Length of an Array

The length property tells us how many elements an array contains.

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

console.log(fruits.length);

Output: 3

This is useful when we want to know how many items are stored in an array.

5. Looping Through Arrays

We can use loops to access each element of an array.

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

for (let fruit of fruits) {
    console.log(fruit);
}

This prints each fruit on a separate line.

Loops are useful when working with lists of products, students, or other data.

6. Useful Array Methods

JavaScript provides several methods to work with arrays.

push() — adds an element at the end.
pop() — removes the last element.
shift() — removes the first element.
unshift() — adds an element at the beginning.
includes() — checks whether an array contains a value.
indexOf() — finds the first index of a value, or returns -1 if it is not found.

Example:

let numbers = [10, 20, 30];

console.log(numbers.includes(20));
console.log(numbers.indexOf(30));

Output:

true
2

Why Are Arrays Important?

Arrays help us:

Store multiple values together.
Manage lists of products or student records.
Loop through collections of data.
Add and remove items easily.
Build applications such as shopping carts and product management systems.

JavaScript Objects

Lokesh — Mon, 12 Oct 2026 11:03:54 +0000

What Are Objects in JavaScript?

Objects are used to store related information in the form of key-value pairs.

For example, a student has a name, age, and course. Instead of storing these details in separate variables, we can group them into one object.

let student = {
    name: "John",
    age: 22,
    course: "Computer Science"
};

Here, name, age, and course are keys, while "John", 22, and "Computer Science" are their values.

1. Accessing Object Properties

We can access object properties in two common ways.

Dot notation:

console.log(student.name);

Output: John

Bracket notation:

console.log(student["age"]);

Output: 22

Both methods help us access the values stored inside an object.

2. Adding Properties

We can add new properties to an object whenever needed.

student.city = "Chennai";

console.log(student);

This adds a new property called city with the value "Chennai".

3. Updating Properties

We can change the value of an existing property.

student.age = 23;

console.log(student.age);

Output: 23

Here, the student's age changes from 22 to 23.

4. Deleting Properties

We can use the delete operator to remove a property from an object.

delete student.course;

console.log(student);

This removes the course property from the object.

5. Objects with Functions

An object can also contain functions as properties. These functions are commonly called methods.

let person = {
    name: "John",

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

person.greet();

Output: Hello!

Here, greet() is a method of the person object.

6. Looping Through Objects

We can use a for...in loop to access an object's property names and values.

let product = {
    name: "Laptop",
    price: 50000,
    brand: "HP"
};

for (let key in product) {
    console.log(key, product[key]);
}

This prints each property name along with its value.

Why Are Objects Important?

Objects help us:

Store related information together.
Organize data clearly.
Add, update, and delete properties.
Represent real-world things such as students, products, and employees.
Create useful applications such as product management systems and shopping carts.

Types of Functions in JavaScript

Lokesh — Mon, 12 Oct 2026 11:00:40 +0000

What Is a Function?

A function is a reusable block of code that performs a particular task.

Instead of writing the same code again and again, we can create a function and call it whenever we need it.

JavaScript has different ways to create and use functions. Let's understand some common types with simple examples.

1. Function Declaration

A function declaration is a common way to create a function using the function keyword.

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

greet();

Output:

Hello World!

Here, we create a function named greet and call it to execute the code inside it.

2. Function with Parameters

Parameters allow us to pass information into a function.

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

greet("John");

Output:

Hello John

Here, name is a parameter, and "John" is the argument passed to the function.

3. Function with a Return Value

The return statement sends a result back to the place where the function was called.

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

let result = add(10, 20);
console.log(result);

Output:

This is useful when we want to calculate a value and use it somewhere else in our program.

4. Function Expression

A function expression is created by assigning a function to a variable.

const greet = function() {
    console.log("Welcome!");
};

greet();

Output:

Welcome!

Unlike a function declaration, this function expression cannot be called before the variable is initialized.

5. Arrow Function

Arrow functions provide a shorter way to write functions.

const add = (a, b) => {
    return a + b;
};

console.log(add(5, 10));

Output:

For simple functions, we can write it even shorter:

const add = (a, b) => a + b;

Arrow functions are commonly used in modern JavaScript, especially with array methods such as map() and filter().

6. Anonymous Function

An anonymous function is a function without its own name.

setTimeout(function() {
    console.log("Hello!");
}, 1000);

Here, the anonymous function runs after approximately one second.

Anonymous functions are often used as callbacks, where a function is passed to another function.

Why Are Functions Important?

Functions help us:

Reuse code.
Avoid repeating the same instructions.
Organize programs into smaller parts.
Perform calculations.
Make code easier to read and maintain.

JavaScript Functions

Lokesh — Mon, 12 Oct 2026 10:56:22 +0000

What Are Functions?

A function is a reusable block of code designed to perform a particular task.

Instead of writing the same code multiple times, we can write it once inside a function and use it whenever we need it.

For example, if we want to display a welcome message several times, we can create a function for it.

1. Creating and Calling a Function

Let's create a simple function.

function greet() {
    console.log("Welcome to JavaScript!");
}

greet();

Output:

Welcome to JavaScript!

Here:

function is used to declare a function.
greet is the function name.
The code inside { } is the function body.
greet() calls the function and executes its code.

Defining a function does not automatically execute it. We need to call it.

2. Functions with Parameters

Parameters allow us to pass information into a function.

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

greet("John");
greet("David");

Output:

Hello John
Hello David

Here, name is a parameter, while "John" and "David" are arguments passed when calling the function.

This allows us to reuse the same function with different values.

3. Functions with Return Values

The return statement sends a result back to the place where the function was called.

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

let result = add(10, 20);

console.log(result);

Output:

Here, the function adds two numbers and returns the result. We store that result in the result variable.

One important point: return sends a value back, while console.log() displays a value in the console.

5. Why Are Functions Important?

Functions help us:

Reuse code instead of repeating it.
Organize programs into smaller parts.
Perform calculations such as totals and averages.
Process user input.
Make code easier to read and maintain.

For example, in a product management application, we can create separate functions to add products, calculate prices, and apply discounts.

Loops in JavaScript

Lokesh — Mon, 12 Oct 2026 10:53:35 +0000

What Are Loops?

Loops are used to execute a block of code repeatedly until a condition is no longer satisfied or the loop is otherwise stopped.

For example, if we want to print numbers from 1 to 10, we don't need to write ten separate console.log() statements. We can use a loop instead.

JavaScript provides different types of loops. Let's understand the most common ones.

1. for Loop

A for loop is useful when we know how many times we want to repeat something.

Example:

for (let i = 1; i <= 5; i++) {
    console.log(i);
}

Output:

Let's understand the three parts:

let i = 1 — starts the counter at 1.
i <= 5 — continues the loop while the condition is true.
i++ — increases the counter by 1 after each iteration.

The loop stops when i becomes 6 because the condition is no longer true.

2. while Loop

A while loop repeats as long as its condition is true.

Example:

let i = 1;

while (i <= 5) {
    console.log(i);
    i++;
}

This also prints numbers from 1 to 5.

The difference is that we declare the counter before the loop and update it inside the loop.

Remember to update the counter when necessary. Otherwise, the loop might run forever.

3. do...while Loop

A do...while loop executes the code block at least once before checking the condition.

Example:

let i = 1;

do {
    console.log(i);
    i++;
} while (i <= 5);

This prints numbers from 1 to 5.

Even if the condition is false at the beginning, the code inside do executes once.

4. for...of Loop

A for...of loop is used to access the values of an iterable, such as an array or string.

Example:

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

for (let fruit of fruits) {
    console.log(fruit);
}

Output:

Apple
Banana
Mango

This loop is useful when we want to process each item in an array.

5. for...in Loop

A for...in loop is commonly used to iterate over the enumerable property keys of an object.

Example:

let student = {
    name: "John",
    age: 22,
    course: "CSE"
};

for (let key in student) {
    console.log(key, student[key]);
}

Output:

name John
age 22
course CSE

Here, key represents a property name, and student[key] accesses its value.

For arrays, for...of is generally a better choice when you want to access each value.

Why Are Loops Important?

Loops help us:

Print numbers and patterns.
Process arrays of products or student records.
Repeat calculations.
Perform the same task without writing the same code multiple times.

Conditional Statements in JavaScript

Lokesh — Mon, 12 Oct 2026 10:49:58 +0000

What Are Conditional Statements?

Conditional statements allow us to execute different blocks of code depending on whether a condition is true or false.

For example, we can check whether a person is eligible to vote based on their age.

JavaScript provides different conditional statements to make decisions in our programs.

1. if Statement

The if statement executes a block of code when a condition is true.

let age = 20;

if (age >= 18) {
    console.log("Eligible to vote");
}

Output:

Eligible to vote

Here, the condition age >= 18 is true, so the message is displayed.

2. if...else Statement

The if...else statement allows us to choose between two blocks of code.

let age = 16;

if (age >= 18) {
    console.log("Eligible to vote");
} else {
    console.log("Not eligible to vote");
}

Output:

Not eligible to vote

If the condition is true, the if block runs. Otherwise, the else block runs.

3. else if Statement

We use else if when we need to check multiple conditions.

let mark = 75;

if (mark >= 90) {
    console.log("Grade A");
} else if (mark >= 70) {
    console.log("Grade B");
} else if (mark >= 50) {
    console.log("Grade C");
} else {
    console.log("Fail");
}

Output:

Grade B

JavaScript checks the conditions from top to bottom and executes the first matching block.

4. switch Statement

The switch statement is useful when we want to compare one value against several possible cases.

let day = 2;

switch (day) {
    case 1:
        console.log("Monday");
        break;
    case 2:
        console.log("Tuesday");
        break;
    case 3:
        console.log("Wednesday");
        break;
    default:
        console.log("Invalid day");
}

Output:

Tuesday

The break statement stops execution from continuing into the next case. The default block runs when no case matches.

Why Are Conditional Statements Important?

Conditional statements help us:

Make decisions in our programs.
Check whether a user is eligible for something.
Assign grades based on marks.
Validate user input.
Control how a program behaves in different situations.

Data Types in JavaScript

Lokesh — Mon, 12 Oct 2026 10:45:05 +0000

What Are Data Types?

Data types define the kind of value we store in a variable.

For example, a name is text, age is a number, and a yes-or-no value can be represented using a Boolean.

JavaScript data types are divided into two main categories:

Primitive Data Types
Non-Primitive Data Types

1. Primitive Data Types

Primitive data types represent single values. JavaScript has seven primitive data types.

String

Used to store text.

let name = "John";

Number

Used to store integers and decimal numbers.

let age = 22;
let price = 99.5;

Boolean

Used to store true or false.

let isStudent = true;

Undefined

A variable that has been declared but has not been assigned a value has the value undefined.

let result;
console.log(result);

Output: undefined

Null

Used to represent the intentional absence of a value.

let selectedItem = null;

BigInt

Used to represent very large integers beyond the safe integer range of the regular Number type.

let number = 12345678901234567890n;

Symbol

Used to create unique values, often as unique object property keys.

let id = Symbol("id");

2. Non-Primitive Data Types

Non-primitive values are used to work with collections of data and more complex structures. In JavaScript, these values are objects.

Object

An object stores related information as key-value pairs.

let student = {
    name: "John",
    age: 22
};

Array

An array stores multiple values in an ordered list. Arrays are a special type of object in JavaScript.

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

Function

A function is a reusable block of code that performs a task. Functions are also objects in JavaScript.

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

Variable Scope in JavaScript

Lokesh — Mon, 12 Oct 2026 10:40:00 +0000

What Is Variable Scope?

Variable scope means where we can access a variable in our code.

A variable declared in one place may not be accessible from another place. Understanding scope helps us avoid errors and write better code.

Let's look at the three basic types of scope.

1. Global Scope

A variable declared outside a function or block can be accessed from different parts of the program, depending on the execution context.

let name = "John";

function greet() {
    console.log(name);
}

greet();

Output:

John

Here, name is declared outside the function. So, the function can access it.

2. Function Scope

A variable declared inside a function can be accessed only within that function and its nested scopes.

function greet() {
    let message = "Hello World!";
    console.log(message);
}

greet();

Output:

Hello World!

If we try to access message outside the function, JavaScript gives a ReferenceError.

function greet() {
    let message = "Hello World!";
}

console.log(message);

Here, message cannot be accessed outside greet().

3. Block Scope

A block is a section of code enclosed in curly braces { }, such as an if statement or a loop.

Variables declared with let and const inside a block can only be accessed within that block.

if (true) {
    let age = 20;
    console.log(age);
}

Output:

But if we try to access age outside the block, we get a ReferenceError.

if (true) {
    let age = 20;
}

console.log(age);

This happens because age belongs to the if block.

What About var?

Unlike let and const, var is not block-scoped.

if (true) {
    var city = "Chennai";
}

console.log(city);

Output:

Chennai

This works because var is function-scoped rather than block-scoped.

Why Is Variable Scope Important?

Understanding scope helps us:

Know where a variable can be accessed.
Avoid ReferenceError errors.
Prevent unnecessary access to variables.
Organize our code more clearly.