DEV Community: Narmatha

REACT

Narmatha — Wed, 23 Sep 2026 15:57:36 +0000

What is React?

*React is a JavaScript library used for building user interfaces (UI), especially for web applications.

*It was originally developed by Facebook (now Meta). React helps you build a website using small, reusable pieces called components.

For example:

1.Navbar
2.Button
3.LoginForm
4.ProductCard
5.Footer

Simple Example:

function Welcome() { return ( <div> <h1>Hello, World!</h1> <p>Welcome to my React application.</p> </div> ); }
export default Welcome;

Why do we use React?

The main reason is that modern websites often need to change their UI dynamically without reloading the entire page.

Important React concepts:

Component - Reusable piece of UI
JSS - Syntax that lets you write HTML-like code in JavaScript
Props - Data passed from one component to another
State - Data that can change while the application is running
Hooks - Functions such as useState and useEffect that add functionality to components
Virtual DOM - React's mechanism for efficiently updating the UI

ClOSURES IN JAVASCRIPT

Narmatha — Thu, 10 Sep 2026 15:30:15 +0000

WHAT IS CLOSURES IN JAVASCRIPT?

A closure is when a function remembers and has access to variables from its outer scope even after the outer function has finished executing.

Simple example

function outer() { let name = "John";

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

return inner; }
const myFunction = outer();

myFunction();

Output:

John

why does this work?

Normally, you might think name should disappear after outer() finishes.

But inner() remembers the name variable.

outer()
  |
  |-- name = "John"
  |
  |-- inner()
        |
        |-- remembers "John"

That remembering ability is called a closure.

One more useful example

Closures are often used to create private variables:

function counter() { let count = 0;
return function () { count++; console.log(count); }; }
const myCounter = counter();
myCounter(); // 1 myCounter(); // 2 myCounter(); // 3

Even though counter() has already finished, the returned function still remembers count.

So:

Closure = A function + the variables from its surrounding environment that it remembers.

PROMISES IN JAVASCRIPT

Narmatha — Thu, 10 Sep 2026 15:19:57 +0000

What is a Promise in JavaScript?

A Promise is an object that represents the future result of an asynchronous operation.

For example, when you request data from an API, JavaScript doesn't want to stop your entire program while waiting for the server. A Promise represents that waiting operation.

Promise has 3 states

1.Pending — operation is still running.
2.Fulfilled — operation completed successfully.
3.Rejected — operation failed.

SIMPLE EXAMPLE:

const promise = new Promise((resolve, reject) => { let success = true;
if (success) { resolve("Data received!"); } else { reject("Something went wrong!"); } });

Here:

*resolve() → success
*reject() → failure
You can consume the Promise using .then() and .catch():

promise .then((result) => { console.log(result); }) .catch((error) => { console.log(error); });

OUTPUT:

Data received!

JUST A SIMPLE EXAMPLE:

Imagine you order food 🍕.

When you place the order, the restaurant doesn't immediately give you the food.

The order is:

Pending ↓ Food prepared successfully → Fulfilled
or:

Pending ↓ Restaurant couldn't prepare it → Rejected

The Promise is like the restaurant saying:

"Your food will be ready later."

WHY DO WE NEED PROMISE:

We need Promises in JavaScript because some tasks take time, like getting data from a server. JavaScript can start that task and continue doing other work instead of waiting.

Simple example

Imagine you ask a server for user data:

console.log("Start");

fetch("https://example.com/users") .then(response => response.json()) .then(data => { console.log(data); });

console.log("End");

The output will be roughly:

Start End [user data]

Why?

fetch() takes time. Instead of stopping the program and waiting, JavaScript says:

"I'll give you the data when it's ready."

That's what the Promise represents.

CALLBACKFUNCTION

Narmatha — Tue, 08 Sep 2026 15:45:00 +0000

Callback Function in JavaScript

A callback function is a function that is passed as an argument to another function and is called later by that function.

Example:

function greet(name, callback) { console.log("Hello " + name);
callback(); }
function sayBye() { console.log("Goodbye!"); }

greet("John", sayBye);

Output:

Hello John Goodbye!

Why Do We Use Callback Functions?

Callbacks are useful when we want to say:

"After this task is completed, execute this function."

This is especially important in JavaScript because JavaScript frequently performs asynchronous operations.

For example:

*Waiting for a timer
*Getting data from a server
*Reading a file
*Handling a button click
*Processing events

Callback vs Normal Function

Normal function:

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

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

We can directly calling the function.

Callback Function:

function calculate(a, b, callback) { let result = a + b; callback(result); }
calculate(10, 20, function(result) { console.log(result); });
Here the function is passed to another function.

FUNCTIONS IN JAVASCRIPT

Narmatha — Tue, 08 Sep 2026 15:27:57 +0000

What Is a Function in JavaScript?

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

Instead of writing the same code again and again, we write it once inside a function and call the function whenever we need it.

Simple Example

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

greet();

Output:

Hello!

Here:

1.function → keyword used to create a function
2.greet → function name
3.() → parameters go here
4.{ } → contains the code that the function executes
5.greet() → calls/executes the function

Why Do We Use Functions?

The main reason is code reuse.

Without a function:

console.log("Hello John"); console.log("Hello Alice"); console.log("Hello David");

With a function:

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

Output:

Hello John Hello Alice Hello David

1. Function Without Parameters

A function doesn't always need input.

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

2. Function With Parameters

A parameter is a value that the function expects to receive.

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

Here:

name

is the parameter.

And:

"John"

is the argument passed to the function.

Think of it like:

Parameter → placeholder Argument → actual value

Example:

`function add(a, b) {
console.log(a + b);
}

add(10, 20);
`
Output:

30
Here:

a = 10 b = 20

ARRAYS IN JAVASCRIPT

Narmatha — Tue, 08 Sep 2026 15:13:21 +0000

Arrays in JavaScript

An array in JavaScript is a special type of object used to store multiple values in a single variable.

For example:
let student1 = "John"; let student2 = "Alice"; let student3 = "David";

we can use an array:

`let students = ["John", "Alice", "David"];

`
Now all three values are stored inside one variable called students.

1. Why Do We Use Arrays?

Arrays are useful when we have a collection of related data.

For example:

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

Here, fruits contains four values.

Arrays are commonly used for:

Storing a list of users
Storing products
Storing marks
Storing names
Storing numbers
Storing objects
Processing data with loops and methods.

2. Empty Array

let fruits = [];

You can add values later:

`fruits.push("Apple");
fruits.push("Banana");

console.log(fruits);`

Output:

["Apple", "Banana"]

3.Array Length

The .length property tells you how many elements are in an array.

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

console.log(fruits.length);
`
Output:

3

Remember:

Index starts at 0, but length counts from 1.

For example:

`Array length = 3

Indexes:
0
1
2
`
The last element can therefore be accessed using:

fruits[fruits.length - 1]

Types of Arrays in JavaScript

JavaScript doesn't have separate built-in array classes for every data type like some languages do. A JavaScript Array can contain different kinds of values.

1. Numeric Array

An array containing numbers:

let numbers = [10, 20, 30, 40, 50];

2. String Array

An array containing strings:

let names = ["John", "Alice", "David"];

3. Boolean Array

An array containing boolean values:

let results = [true, false, true, true];

PATTERN IN JAVASCRIPT

Narmatha — Tue, 08 Sep 2026 14:44:55 +0000

Patterns in JavaScript

The word “patterns” in JavaScript usually refers to common, reusable ways of solving programming problems. These are often called design patterns.

A design pattern is not a ready-made piece of code. Instead, it is a general approach or structure that you can use when you encounter a particular type of problem.

For example, if many parts of your application need to use the same object, you might use the Singleton Pattern. If an object needs to notify many other objects when something changes, you might use the Observer Pattern.

Why do we need patterns?

As JavaScript applications become larger, simply writing functions and classes can become difficult to manage.

Patterns help you:

*Organize your code.
*Avoid repeating the same solution.
*Make code easier to maintain.
*Make communication between objects clearer.
*Separate different responsibilities.
*Make applications easier to extend.
*Provide commonly understood solutions to common problems.

Why Should We Use Patterns in JavaScript?

We use patterns because they give us proven ways to solve common programming problems.

Think of a pattern like a blueprint for building software. You don't have to reinvent the solution every time you face the same type of problem.

DOM IN JAVASCRIPT

Narmatha — Thu, 03 Sep 2026 16:25:30 +0000

WHAT IS DOM IN JAVASCRIPT?

DOM stands for Document Object Model.

The DOM is a programming representation of an HTML page. JavaScript uses the DOM to access, change, add, or remove HTML elements and their content/styles.

The browser converts this HTML into a DOM tree:

Document
│
└── html
│
├── h1
│ └── "Hello World"
│
└── button
└── "Click Me"

JavaScript can access these elements through the DOM.

Why Do We Need DOM?

Without the DOM, JavaScript would not have an easy way to interact with the HTML page.

We use the DOM to:

*Change HTML content
*Change CSS/styles
*Change attributes
*Add new elements
*Remove elements
*Handle button clicks
*Handle user input
*Create dynamic webpages
*Respond to user actions

For example, when you click a button and something changes on the webpage, JavaScript is usually interacting with the DOM.

Methods of DOM in JavaScript

DOM methods are functions provided by the browser to find, create, modify, and remove HTML elements.

1. Finding Elements

getElementById()

Finds an element using its id.

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

console.log(heading);
`

getElementsByClassName()

Finds elements using their class name.

Hello

Welcome

`let elements = document.getElementsByClassName("text");

console.log(elements);
`

getElementsByTagName()

Finds elements using their HTML tag.

`let paragraphs = document.getElementsByTagName("p");

console.log(paragraphs);`

querySelector()

Finds the first matching element using a CSS selector.

let heading = document.querySelector("#title");

Class:

`let element = document.querySelector(".text");

`Tag:

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

OPERATORS IN JAVASCRIPT

Narmatha — Thu, 03 Sep 2026 16:08:01 +0000

OPERATORS IN JAVASCRIPT:

Operators in JavaScript are special symbols or keywords used to perform operations on values and variables. They are used for calculations, assigning values, comparing values, and making logical decisions.

For example:

`let a = 10;
let b = 5;

let result = a + b;
console.log(result); // 15`

Types of Operators in JavaScript

JavaScript mainly provides the following types of operators:

1.Arithmetic Operators
2.Assignment Operators
3.Comparison Operators
4.Logical Operators
5.Increment and Decrement Operators
6.Ternary Operator
7.String Operators
8.Bitwise Operators
9.Type Operators

1. Arithmetic Operators

Used to perform mathematical calculations.
Operators: +, -, , /, %, *

Example:

`let a = 10;
let b = 5;

console.log(a + b); // 15`

2. Assignment Operators

Used to assign values to variables.
Operators: =, +=, -=, *=, /=, %=

Example:

`let a = 10;
a += 5;

console.log(a); // 15`

3.Comparison Operators

Comparison operators compare two values and return a Boolean

Example:

console.log(10 > 5); // true console.log(10 < 5); // false console.log(10 >= 10); // true console.log(5 <= 10); // true

4. Logical Operators

Used to combine multiple conditions.

Example:

AND &&

Both conditions must be true.

let age = 20;
let hasID = true;

console.log(age >= 18 && hasID);

Result:

true

Example:

let age = 20;

if (age >= 18 && age <= 60) {
console.log("Allowed");
}

OR ||

At least one condition must be true.

let isStudent = false;
let isEmployee = true;

console.log(isStudent || isEmployee); // true

NOT !

Reverses a Boolean value.

let loggedIn = true;

console.log(!loggedIn); // false

5.String Operators

The + operator can be used to join strings.

This is called concatenation.

Example:

`let firstName = "John";
let lastName = "Doe";

let fullName = firstName + " " + lastName;

console.log(fullName);
`

CONDITION STATEMENT IN JAVASCRIPT

Narmatha — Tue, 01 Sep 2026 16:02:28 +0000

CONDITION STATEMENT IN JAVASCRIPT

A conditional statement in JavaScript is a programming statement that is used to make decisions in a program based on whether a particular condition is true or false. It allows the program to control the flow of execution by checking a condition and then executing a specific block of code depending on the result of that condition.

IF STATEMENT:

The if statement is a conditional statement used to execute a block of code only when a specified condition is true.

Syntax

if (condition) { // code to execute if condition is true }

EXAMPLE

let age = 20;

if (age >= 18) { console.log("You are an adult"); }

IF ELSE STATEMENT:

The if...else statement in JavaScript is a conditional statement that is used to execute one block of code if a condition is true and another block of code if the condition is false.

Syntax:

`if (condition) {
// code if condition is true
} else {
// code if condition is false
}

EXAMPLE

`let age = 16;

if (age >= 18) {
console.log("You are an adult");
} else {
console.log("You are a minor");
}`

LOOP IN JAVASCRIPT

Narmatha — Tue, 01 Sep 2026 15:47:43 +0000

For Loop in JavaScript

A for loop in JavaScript is used to execute a block of code repeatedly as long as a given condition is true.

Instead of writing the same code many times, we can use a loop to repeat it automatically.

for (initialization; condition; increment/decrement) { // code to be executed }

for loop has three important parts:

1.Initialization – Runs only once at the beginning.
2.Condition – Checked before every iteration. If it is true, the loop runs.
3.Increment/Decrement – Changes the value after each iteration.

While loop in javascript

A while loop is used when you want to repeatedly execute a block of code as long as a condition is true.

Check condition → Execute code → Update something → Check again

1. Basic syntax

while (condition) { // code to execute }

for example

`let i = 1;

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

output

1
2
3
4
5

Primitive data types in javascript

Narmatha — Wed, 26 Aug 2026 08:02:53 +0000

PRIMITIVE DATA TYPES IN JAVASCRIPT

JavaScript has seven primitive data types: String, Number, BigInt, Boolean, Undefined, Null, and Symbol.Primitive types are the most basic building blocks of data in JavaScript.

 They represent a single value and are immutable, meaning their internal values cannot be changed after creation.

The 7 Primitive Data Types

1. String :

Represents textual data. Strings must be enclosed in single quotes ('), double quotes ("), or backticks (`).

javascript

let name = "Alice"; let greeting = 'Hello';

2. Number :

Represents both integers and floating-point (decimal) numbers. It also includes special values like NaN (Not a Number) an Infinity.

javascript

let age = 25; let weight = 50.1;

3. BigInt:

Large integers beyond the safe calculation limit of the standard Number type (ends with an n, e.g., 9007199254740991n).

4. Boolean:

logical entity with only two possible values: true or false.

javascript

let isCoding = true; let isTired = false;

5.undefined

Automatically assigned to a variable that has been declared but not yet given a value.

let x console.log(x);

6. Null

Represents an intentional absence of any object value. It is used to explicitly state that a variable is empty.

javascript

let emptyValue = null;