Forem: Hiral

Spread vs Rest Operators in JavaScript

Hiral — Wed, 08 Apr 2026 18:40:38 +0000

JavaScript gives us powerful tools to work with data more easily—and two of the most useful are the spread (...) and rest (...) operators.

Even though they look the same, they behave very differently depending on where you use them. Let’s break it down step by step.

What the Spread Operator Does
The spread operator is used to expand (spread out) values.
Think of it like unpacking items from a box.
Example with Arrays

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

console.log(newNumbers);
// [1, 2, 3, 4, 5]

Here, ...numbers takes each element and expands it into the new array.

What the Rest Operator Does

The rest operator does the opposite—it collects multiple values into one.
Think of it like packing items into a box.

function sum(...nums) {
  return nums.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4));
// 10

...nums collects all arguments into a single array.
Using Spread with Arrays and Objects
Array

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

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

console.log(combined);
// [1, 2, 3, 4]

Objects:

const user = { name: "Alice", age: 25 };

const updatedUser = {
  ...user,
  age: 26
};

console.log(updatedUser);
// { name: "Alice", age: 26 }

Spread is commonly used to copy and update data without modifying the original.

Use Cases:

Copying Arrays (Without Mutation)

const original = [1, 2, 3];
const copy = [...original];

Merging Objects

const defaults = { theme: "light" };
const settings = { theme: "dark", fontSize: 16 };

const finalSettings = { ...defaults, ...settings };

Passing Arguments to Functions

const nums = [5, 10, 15];

Math.max(...nums); // 15

Extracting Values with Rest

const [first, ...others] = [10, 20, 30, 40];

console.log(first);  // 10
console.log(others); // [20, 30, 40]

The new Keyword in JavaScript

Hiral — Tue, 07 Apr 2026 15:48:53 +0000

If you've ever written new Person("Alice") and wondered what's actually happening behind the scenes — this post is for you.

what is constructor function?
A constructor function is just a regular function, but by convention we capitalize its name to signal it should be called with new.

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

Inside it, this refers to the new object being built. That's the key idea.
What does new actually do?
When you write:

const alice = new Person("Alice", 30);

JavaScript silently does four things for you:

Creates a brand-new empty object

// internally: const this = {};

2.Links it to the constructor's prototype

// internally: this.__proto__ = Person.prototype;

This is how alice can call methods like greet() even though they aren't stored on alice itself.
3.Runs the constructor body with this as that new object

this.name = "Alice";

4.Returns the object automatically.You don't need a return statement — new handles it

Putting methods on the prototype
Instead of copying a method into every instance (wasteful!), you add it once to the prototype:

Person.prototype.greet = function() {
  console.log("Hi, I'm " + this.name);
};

const alice = new Person("Alice", 30);
const bob   = new Person("Bob",   25);

alice.greet(); // "Hi, I'm Alice"
bob.greet();   // "Hi, I'm Bob"

Both alice and bob share the same greet function. Neither instance stores a copy — they just look up the chain.
The prototype chain

When you call alice.greet(), JavaScript searches in this order:

Does alice have greet directly? → No
Does alice.proto (= Person.prototype) have greet? → Yes! Use it.

This chain of lookups is called the prototype chain.

Summary:

A constructor function is a blueprint for creating objects.
new creates an empty object, links its prototype, runs the constructor, and returns the result.
Own data lives on the instance; shared methods live on the prototype.
When a property isn't found on the instance, JavaScript walks up the prototype chain to find it.

Callbacks in JavaScript: Why They Exist

Hiral — Sun, 05 Apr 2026 21:56:45 +0000

Functions as Values in JavaScript
Before callbacks make sense, you need to accept one slightly mind-bending idea: in JavaScript, a function is just a value — exactly like a number or a string. You can store it in a variable, pass it to another function, or return it from one.

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

// We can pass it around like any value
const myFunc = greet;
myFunc("Alice")

What is a Callback Function?
A callback function is simply a function that is passed into another function and then executed later.

function greetUser(name, callback) { 
console.log("Hi " + name); 
callback(); 
} 
function sayBye() { 
console.log("Goodbye!"); 
} 
greetUser("Alice", sayBye);

Output:
Hi Alice
Goodbye!
Here, sayBye is the callback function.

Passing Functions as Arguments

Callbacks work because functions can be passed just like any other value

Example:

function processNumber(num, operation) {
  return operation(num);
}

function double(x) {
  return x * 2;
}

console.log(processNumber(5, double)); // Output: 10

You can also use anonymous functions:

processNumber(5, function(x) {
  return x + 3;
});

Or arrow functions:


processNumber(5, x => x - 1);

Why Callbacks Are Used (Especially in Asynchronous Programming)

JavaScript often deals with tasks that take time:

Fetching data from an API
Reading files
Waiting for user input

Instead of blocking the program, JavaScript uses callbacks to handle these tasks after they finish.
Example with setTimeout:

console.log("Start");

setTimeout(function() {
  console.log("This runs later");
}, 2000);

console.log("End");

Output:
Start
End
This runs later

The callback runs after 2 seconds, without stopping the rest of the code.

Template Literals in JavaScript

Hiral — Sat, 04 Apr 2026 21:29:41 +0000

when you first start javascript building string often involves using the + operator.While this works quickly but it become messy and hard to read as code grows.
Before ES6, developers created strings like this:


let name = "Alice";
let age = 25;

let message = "Hello, my name is " + name + " and I am " + age + " years old."

This approach has several drawbacks:

Hard to read: The sentence is broken into multiple parts.
Error-prone: Easy to forget spaces or quotes.
Messy with complex strings: Adding more variables makes it worse.
Difficult for multi-line strings: Requires \n or awkward formatting. Template Literal Syntax

Template literals were introduced in ES6 and use backticks (`) instead of quotes.

javascript let message =Hello, my name is Alice.;
Embedding Variables in Strings

Instead of breaking the string with +, you can directly insert variables using ${}:

`javascript
let name = "Alice";
let age = 25;

let message = Hello, my name is ${name} and I am ${age} years old.;
`

Cleaner and easier to read
Looks more like natural language
No need to worry about spacing issues Multi-line Strings Made Easy: With traditional concatenation:

javascript let text = "This is line one.\n" + "This is line two.\n" + "This is line three.";

With template literals:

javascript let text =This is line one.
This is line two.
This is line three.;

Some Use cases

Creating API URLs

javascript let userId = 42; let url =https://api.example.com/users/${userId}`;
`

Generating HTML templates

let html = <div class="user">${name}</div>;

Logging and debugging

javascript console.log(User ${name} logged in at ${time});plaintext

Array Flatten in JavaScript

Hiral — Fri, 03 Apr 2026 11:55:15 +0000

What is a Nested Array?

A nested array is simply an array that contains other arrays inside it.
This nesting can go to any depth (even infinitely).

[5, 6, [7, 8]]
[5, 6, [7, 8, [8, 9]]]

Why Do We Need to Flatten Arrays?

Working with deeply nested arrays in real-world applications can be difficult.
To make data easier to process, we flatten the array—i.e., convert it into a single-level array.

[5, 6, [7, 8]]            → [5, 6, 7, 8]
[5, 6, [7, 8, [8, 9]]]    → [5, 6, 7, 8, 8, 9]

Methods to Flatten an Array

Using Built-in flat() Method JavaScript provides a built-in method called flat().

let arr = [1, 2, [3, 4], [7, 8, [9, 10]]];
console.log(arr.flat(Infinity));
// Output: [1, 2, 3, 4, 7, 8, 9, 10]

flat() takes a depth level as an argument.
Infinity ensures the array is flattened completely.

Example with limited depth:

let arr1 = [1, 2, [3, 4], [7, 8, [9, 10, [5, 6]]]];
console.log(arr1.flat(2));
// Output: [1, 2, 3, 4, 7, 8, 9, 10, [5, 6]]

Using Recursion

This method manually traverses each element and flattens nested arrays.

const array = [[5, 6, [4, 5]], [7, 8], 9, 10];
let result = [];

function flattenArray(arr) {
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      flattenArray(arr[i]); // recursive call
    } else {
      result.push(arr[i]);
    }
  }
}

flattenArray(array);
console.log(result);
// Output: [5, 6, 4, 5, 7, 8, 9, 10]

Using Stack (Iterative Approach) This avoids recursion by using a stack.

let arr1 = [1, 2, [3, 4], [7, 8, [9, 10, [5, 6]]]];
let stack = [...arr1];
let result = [];

while (stack.length) {
  let item = stack.pop();

  if (Array.isArray(item)) {
    stack.push(...item);
  } else {
    result.push(item);
  }
}

console.log(result.reverse());
// Output: [1, 2, 3, 4, 7, 8, 9, 10, 5, 6]

Javascript Modules

Hiral — Mon, 23 Mar 2026 22:03:40 +0000

Modern JavaScript development depends on modules in which code is split into smaller, reusable and maintainable code.

First try to understand the problem,if you have single file
//app.js
function add(a,b) return a +b function multiply(a,b)return a*b

Now as code grows

Files becomes too large
Code becomes hard to read
Duplication arise
Resuing the code is painful This where modules comes into picture:

What is Module
A module is simply a file that contains code(function, variables, classes)that you export and reuse into another files.

Exporting function or variables

export const PI = 3.14
export function add(a,b){
return a+b
}

You can export multiple things from a module

Importing Modules

To use export Modules,you import it
// app.js

import { add, PI } from './math.js'; 
console.log(add(2, 3)); // 
5 console.log(PI); // 3.14

You must use exact name when importing modules.

Default vs Named Exports

Default Export:
A module can have one default export
// greet.js

export default function greet(name) {
  return `Hello, ${name}`;
}

Import it like this:

import greet from './greet.js';

console.log(greet('Alice'))

**Named Export**
// utils.js
`export const square = x => x * x;
export const cube = x => x * x * x;

Import:

import { square, cube } from './utils.js';`

In Short:

Modules help to organize code
Modules prevent naming conflicts
Modules helps in better readability
Modules can be reused in entire application

Kafka Explained

Hiral — Mon, 23 Mar 2026 21:39:24 +0000

Why Did Kafka Come Into the Picture?

Before jumping into understanding Kafka, let’s first understand why we even need it.

Imagine a delivery app like Zomato. A delivery partner is constantly moving, and their live location needs to be updated to the customer every second.

Now, think about how you would design this system:

Every second, the delivery partner’s app sends location data
That data is stored in a database
The system then fetches the latest data and sends it to the customer

This works fine for a small number of users.

👉 For example:

If there are 100 delivery partners, a database can handle it easily

But what happens when the system scales?

Thousands of delivery partners sending updates every second
Millions of database writes and reads
Increased latency and system overload

👉 At scale, this approach becomes inefficient and difficult to manage.

*Enter Kafka *

This is where Kafka comes in.

Kafka is a free, open-source event streaming platform designed to handle large volumes of real-time data efficiently.

Instead of directly writing to a database and pushing updates, Kafka introduces a better approach using producers and consumers.

Understanding with the Same Example

Let’s revisit the delivery scenario:

The delivery partner acts as a producer (sends data)
The customer app acts as a consumer (receives data)

How it works:

The delivery partner sends location updates to Kafka
Kafka stores and manages this stream of data
The customer application reads the updates from Kafka

Topics: Organizing the Data

In Kafka:

Data is sent to something called a topic
A topic is like a category (e.g., delivery-location)

👉 Producers send data to a topic, and consumers read from it

Partitions: Handling Scale

Each topic is divided into partitions.

Partitions allow Kafka to handle large volumes of data
They split the data into smaller chunks
Multiple partitions can work in parallel

👉 This is what makes Kafka scalable and fast

Consumer Groups: Sharing the Work

Kafka also introduces consumer groups.

A consumer group is a set of consumers working together
Each consumer reads from different partitions 👉 This helps distribute the workload efficiently

Fan-Out: One Message, Multiple Consumers

One powerful feature of Kafka is fan-out:

The same message can be consumed by multiple consumer groups
Each group processes the data independently

👉 Example:

One group updates the customer UI
Another group stores data for analytics
Another triggers notifications

Summary

Instead of overloading a database with constant updates, Kafka acts as a real-time data pipeline that:

Handles massive scale
Distributes workload efficiently
Allows multiple systems to use the same data independently

In simple terms, Kafka makes sure real-time data keeps flowing smoothly—even at massive scale.

The Magic of this, call(), apply(), and bind() in JavaScript

Hiral — Fri, 13 Mar 2026 20:42:07 +0000

JavaScript beginners often get confused about this. But the idea can be simplified.
Think of this as “who is calling the function.”

this Inside Normal Functions

In a regular function, this depends on how the function is called.

function showName() {
  console.log(this);
}
showName();

In browsers, this usually prints the global object (window).

Because the function was called without an object.

So the caller is the global environment.

this Inside Objects

When a function is inside an object, this refers to the object calling the method.

const person = {
  name: "Alice",
  greet: function () {
    console.log("Hello, my name is " + this.name);
  }
};
person.greet();

Because person is calling greet(), so this becomes person.

What call() Does

call() lets you manually choose what this should be.

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

const person = { name: "Alice" };

greet.call(person);

Even though greet is not inside the object, we force this to be person.

Passing Arguments with call()

function introduce(age, city) {
  console.log(this.name + " is " + age + " years old from " + city);
}

const user = { name: "Bob" };


introduce.call(user, 25, "London");

4. What apply() Does
apply() is almost the same as call().

The only difference:
Arguments are passed as an array

function introduce(age, city) {
  console.log(this.name + " is " + age + " years old from " + city);
}

const user = { name: "Charlie" };

introduce.apply(user, [30, "New York"]);

*What bind() Does
*
bind() does not call the function immediately.

Instead, it creates a new function with this fixed.

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

const user = { name: "David" };

const greetUser = greet.bind(user);

greetUser();

Output

Hello David

Here, bind() creates a new function that always uses user as this.

Function Declaration vs Function Expression: What’s the Difference?

Hiral — Fri, 13 Mar 2026 20:21:40 +0000

When writing programs, we often need to repeat the same logic multiple times. Instead of rewriting the same code again and again, we can place that logic inside a function.

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

Think of a function like a small machine:

You give it some inputs
It processes them
It gives you an output Why Functions Are Useful

Functions help us:

Reuse code
Organize programs into smaller pieces
Make code easier to read
Avoid repetition

For example, imagine we want to add two numbers many times in our program.

Without a function:

console.log(2 + 3)
console.log(10 + 5)
console.log(7 + 8)

With a function:

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

console.log(add(2, 3))
console.log(add(10, 5))
console.log(add(7, 8))

Function Declaration Syntax

A function declaration defines a function using the function keyword followed by a name.

function functionName(parameters) {
  // code to run
}
function greet(name) {
  return "Hello " + name
}

console.log(greet("Alice"))

Here:

greet is the function name
name is a parameter
The function returns a greeting message

*Function Expression Syntax
*
A function expression stores a function inside a variable.

const variableName = function(parameters) {
  // code
}

const greet = function(name) {
  return "Hello " + name
}

console.log(greet("Alice"))

This works the same as a function declaration, but the function is assigned to a variable.

*What is Hoisting? *

Hoisting means JavaScript moves certain declarations to the top of the file before running the code.

Function Declarations Are Hoisted

sayHello()

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

Even though the function is written after the call, JavaScript already knows about it.

Function Expressions Are NOT Hoisted
This will cause error:

sayHello()

const sayHello = function() {
  console.log("Hello")
}

Because the variable sayHello does not exist yet when the function is called.
When Should You Use Each Type?
Use Function Declarations When:

The function should be available anywhere in the file
You want simpler syntax
The function represents a core part of your program

function calculateTotal(price, tax) {
  return price + tax
}

Use Function Expressions When:

You want to store functions in variables
You want more control over when functions are created
You are writing modern JavaScript patterns

Example:

const calculateTotal = function(price, tax) {
  return price + tax
}

JavaScript Arrays 101

Hiral — Fri, 13 Mar 2026 20:09:05 +0000

Think of storing multiple values, how will you store it

let fruit1 = "Apple";
let fruit2 = "Banana";
let fruit3 = "Mango";
let fruit4 = "Orange";
let fruit5 = "Grapes";

This works, but it quickly becomes messy and difficult to manage. So you can use array to store

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

An array is a collection of values stored in a single variable in a specific order.
Now all fruits are stored inside one array called fruits.

How to create Array
Creating an array is simple. We use square brackets [ ].
let numbers = [10, 20, 30, 40];
let mixed = ["John", 25, true];

Accessing Array Elements (Using Index)

Each element in an array has a position number called an index.

Important rule:
Array indexing starts from 0, not 1.

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

console.log(fruits[0]); // Apple
console.log(fruits[1]); // Banana
console.log(fruits[2]); // Mango

Updating Elements in an Array

We can change values using the index.

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

fruits[1] = "Orange";

console.log(fruits);
output :["Apple", "Orange", "Mango"]

Array Length Property

The length property tells us how many elements are in the array.

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

console.log(fruits.length);

Looping Through an Array

Loops allow us to process every element automatically.

Example using a for loop:

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

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

Understanding Object-Oriented Programming in JavaScript

Hiral — Fri, 13 Mar 2026 19:44:54 +0000

Object Oriented Programming (oop) is a programming style that helps developer organise code using Objects and classes. It helps developer to write code that's easier to reuse, understand and maintain.

A simple real world analogy:
Imagine you are building a car:

A blueprint describes how a car should look and behave
Using blueprint you can manufacture cars Blueprint is a class. Car itself is a object.

What is class in Javascript?
A class is a template used to create objects.
properties-> information about object
Method-> action to preform

Example:

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }

  greet() {
    console.log("Hello, my name is " + this.name)
  }
}

Here:

Person is the class
name and age are properties
greet() is a method

Creating object using class
Once we define a class, we can create objects using the new keyword.

let person1 = new Person("Alice", 25)
let person2 = new Person("Bob", 30)

person1.greet()
person2.greet()

Output:

Hello, my name is Alice
Hello, my name is Bob

Each object stores its own data but uses the same class structure

The Constructor Method

The constructor is a special method that runs automatically when an object is created.

It is used to initialize object properties
Example:

class Car {
  constructor(brand, color) {
    this.brand = brand
    this.color = color
  }
}

Creating objects:

let car1 = new Car("Toyota", "Red")
let car2 = new Car("BMW", "Black")

Now each car object has its own brand and color.

Methods Inside a Class

Methods are functions defined inside a class that describe what an object can do.

Example:

class Car {
  constructor(brand) {
    this.brand = brand
  }

  start() {
    console.log(this.brand + " car started")
  }
}

let car = new Car("Toyota")
car.start()

Output:

Toyota car started
Methods allow objects to perform actions.

Basic Idea of Encapsulation

Encapsulation means keeping data and the functions that operate on that data together in one place (inside a class).

Instead of writing separate variables and functions, everything related to an object is grouped.
Example:

class BankAccount {
  constructor(owner, balance) {
    this.owner = owner
    this.balance = balance
  }

  deposit(amount) {
    this.balance += amount
  }
}

Here the balance data and deposit behavior are packaged together, making the code cleaner and safer.

Understanding Object-Oriented Programming (OOP) in JavaScript

Object-Oriented Programming (OOP) is a programming style that organizes code using objects and classes. It helps developers write code that is easier to reuse, understand, and maintain.

Instead of writing scattered functions and variables, OOP groups related data and behavior together into objects.

A Simple Real-World Analogy

Imagine you are building cars.

A blueprint describes how a car should look and behave.
Using that blueprint, you can manufacture many cars.

In programming:

Real World	Programming
Blueprint	Class
Actual Car	Object (Instance)

So a class is like a blueprint, and objects are the real things created from that blueprint.

Example:

Car Blueprint → Car1, Car2, Car3

Each car is built from the same design but can have different colors or speeds.

What is a Class in JavaScript?

A class is a template used to create objects.

It defines:

Properties → information about the object
Methods → actions the object can perform

Example:

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }

  greet() {
    console.log("Hello, my name is " + this.name)
  }
}

Here:

Person is the class
name and age are properties
greet() is a method

Creating Objects Using Classes

Once we define a class, we can create objects using the new keyword.

let person1 = new Person("Alice", 25)
let person2 = new Person("Bob", 30)

person1.greet()
person2.greet()

Output:

Hello, my name is Alice
Hello, my name is Bob

Each object stores its own data but uses the same class structure.

The Constructor Method

The constructor is a special method that runs automatically when an object is created.

It is used to initialize object properties.

Example:

class Car {
  constructor(brand, color) {
    this.brand = brand
    this.color = color
  }
}

Creating objects:

let car1 = new Car("Toyota", "Red")
let car2 = new Car("BMW", "Black")

Now each car object has its own brand and color.

Methods Inside a Class

Methods are functions defined inside a class that describe what an object can do.

Example:

class Car {
  constructor(brand) {
    this.brand = brand
  }

  start() {
    console.log(this.brand + " car started")
  }
}

let car = new Car("Toyota")
car.start()

Output:

Toyota car started

Methods allow objects to perform actions.

Basic Idea of Encapsulation

Encapsulation means keeping data and the functions that operate on that data together in one place (inside a class).

Instead of writing separate variables and functions, everything related to an object is grouped.

Example:

class BankAccount {
  constructor(owner, balance) {
    this.owner = owner
    this.balance = balance
  }

  deposit(amount) {
    this.balance += amount
  }
}

Here the balance data and deposit behavior are packaged together, making the code cleaner and safer.

Why OOP is Useful

OOP provides several benefits:

1. Code Reusability

You can create many objects from a single class.

2. Better Organization

Related code is grouped into classes.

3. Easier Maintenance

Changes made in one class automatically apply to all objects created from it.

Visualizing Class and Objects

        Class (Blueprint)
            Car
        /     |      \
     Car1   Car2    Car3

Car → Class
Car1, Car2, Car3 → Objects (instances)

All objects share the same structure but can contain different data.

Assignment

Create a Student class with the following features.

Requirements

Add properties:

name
age

Add a method:

printDetails() → prints student information

Create multiple student objects.

Example structure:

class Student {
  constructor(name, age) {
    this.name = name
    this.age = age
  }

  printDetails() {
    console.log("Name: " + this.name + ", Age: " + this.age)
  }
}

let student1 = new Student("John", 20)
let student2 = new Student("Emma", 22)

student1.printDetails()
student2.printDetails()

Summary

Object-Oriented Programming helps structure programs using classes and objects.

Key ideas:

Class → blueprint for objects
Object → instance created from a class
Constructor → initializes object data
Methods → actions objects can perform
Encapsulation → bundling data and functions together

By using OOP, developers can write cleaner, reusable, and more organized code.

Understanding Objects in JavaScript

Hiral — Fri, 13 Mar 2026 19:28:49 +0000

JavaScript objects are collection of key-value pairs.
Key is property name and value is data stored into it property.

eg: let person ={
"name":"John",
"age:12
}
Object help us organise data. Represent real world entities.

Create Object
Object can be created using {}. You can add as many properties in object
let person = {
name: "John",
age: 25,
city: "London"
};

Accessing Object
Their are 2 ways of accessing Object:

Dot Notation

console.log(person.name);
console.log(person.age);

2.Bracket Notation

console.log(person["name"]);
console.log(person["city"]);

Adding new properties

person.country = "UK";
console.log(person);

Delete Properties
You remove properties using delete keyword:

delete person.city;

**Looping through Object**

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

let arrPerson = Object.values(person)