DEV Community: Bhupesh Kumar

MongoDB Made Easy: A Beginner’s Guide to NoSQL

Bhupesh Kumar — Thu, 19 Jun 2025 03:16:51 +0000

Welcome to the ultimate MongoDB and Mongoose guide — built step-by-step for both beginners and intermediate developers looking to master database development in the Node.js ecosystem.

In this hands-on series, we’ll explore everything from the foundations of MongoDB to real-world application development using Mongoose, including setup, schema design, validations, middleware, transactions, performance tuning, deployment, and much more.

Whether you're building your first backend app or scaling a production-grade API, this guide will walk you through:

Core MongoDB operations using the shell
Creating schemas and models with Mongoose
Handling relationships and validations
Writing clean, production-ready CRUD APIs
Performance optimization & best practices
Full backend integration with Express.js
Deployment-ready strategies and tips

No fluff. Just practical, code-first explanations with real examples and structured sections.

Prerequisites:

Basic knowledge of JavaScript
Node.js installed on your machine
A terminal and code editor (e.g., VS Code)

Pro Tip: Bookmark this guide and revisit as you scale your backend knowledge. You’ll find clear explanations, code snippets, and mini challenges throughout.

Let’s dive into the world of fast, flexible, and scalable backend development with MongoDB + Mongoose

Installation Video

Youtube video (for Complete Installation help):

The MongoDB Shell

The MongoDB Shell (mongosh) is an interactive JavaScript interface to communicate with your MongoDB server. It lets you query, update, and manage your databases and collections.

Starting the Shell

If MongoDB is installed locally, open your terminal and run:

mongosh

Command	Description
`show dbs`	List all databases
`use <dbname>`	Switch to or create a database
`db.createCollection()`	Create a new collection
`db.<collection>.insertOne()`	Add a document
`db.<collection>.find()`	Retrieve documents
`db.<collection>.updateOne()`	Modify document
`db.<collection>.deleteOne()`	Remove document

How MongoDB Stores Data — BSON

MongoDB stores data in a format called BSON (Binary JSON).

What is BSON?

BSON stands for Binary JavaScript Object Notation.
It is a binary-encoded serialization format.
BSON extends the JSON format with additional data types such as:
- Date
- Binary
- Decimal128
- ObjectId

Why BSON and not JSON?

Feature	JSON	BSON
Format	Text-based	Binary
Performance	Slower for reading/writing	Faster due to binary format
Data Types	Limited types	Richer types (Date, Binary, etc.)
Size	Lightweight	Slightly heavier (due to metadata)

Key Point

While you write and read data using JSON-like syntax, MongoDB stores it in BSON behind the scenes to optimize for speed and flexibility.

Example

// JSON-style document
{
  name: "Bhupesh",
  age: 24,
  isAdmin: false,
  joinedAt: new Date(),
  _id: ObjectId("60ab1234567890abcdef1234")
}

When stored, this is automatically converted to BSON by MongoDB.

Documents and Collections in MongoDB

MongoDB is a NoSQL database that stores data in a flexible, JSON-like format.

What is a Document?

A Document is the basic unit of data in MongoDB.
It's similar to a row in relational databases.
It is written in JSON-like syntax but stored as BSON.
Documents can have nested structures (arrays, objects).

Example:

{
  _id: ObjectId("64f9d0b45ef65d..."),
  name: "Bhupesh",
  age: 24,
  skills: ["JavaScript", "Node.js", "MongoDB"],
  isAdmin: false
}

What is a Collection?

A Collection is a group of documents.
It is similar to a table in relational databases.
Documents in a collection don’t need to have the same structure.

Example:

Users Collection:

{ name: "Bhupesh", age: 24 }
{ name: "Alice", age: 30, city: "Toronto" }
{ name: "Dev", skills: ["Python", "SQL"] }

Key difference from SQL

MongoDB (NoSQL)	SQL (Relational DB)
Document	Row
Collection	Table
Field (key)	Column
BSON format	Tabular format
Schema-less	Fixed schema

Conclusion:

MongoDB’s flexibility allows each document in a collection to store different fields and structures, making it ideal for modern applications with evolving data needs.

Insert in MongoDB using `insertOne()`

The insertOne() method is used to insert a single document into a MongoDB collection.

Syntax:

db.collection.insertOne(document)

Example (Mongo Shell):

db.users.insertOne({
  name: "Bhupesh",
  age: 25,
  email: "bhupesh@example.com",
  isAdmin: true
});

This will insert one document into the users collection.

Example using Node.js with MongoDB Driver:

const { MongoClient } = require("mongodb");

async function run() {
  const uri = "mongodb://localhost:27017";
  const client = new MongoClient(uri);

  try {
    await client.connect();
    const db = client.db("myAppDB");
    const users = db.collection("users");

    const result = await users.insertOne({
      name: "Alice",
      age: 30,
      city: "Toronto"
    });

    console.log("Inserted ID:", result.insertedId);
  } finally {
    await client.close();
  }
}

run().catch(console.error);

Notes:

Automatically creates the collection if it doesn’t exist.
Adds a unique _id field if not specified.
Returns an object containing insertedId and acknowledged: true

Insert Multiple Documents using `insertMany()`

The insertMany() method is used to insert multiple documents into a MongoDB collection in one go.

Syntax:

db.collection.insertMany([document1, document2, ...])

Example (Mongo Shell):

db.users.insertMany([
  { name: "Bhupesh", age: 25 },
  { name: "Alice", age: 30 },
  { name: "John", age: 22 }
]);

This will insert all the objects into the users collection.

Find Documents in MongoDB

The find() method is used to retrieve documents from a MongoDB collection. You can query all documents or filter using criteria.

Syntax:

db.collection.find(query, projection)

Example 1: Find All Documents

db.users.find()

Returns all documents from the users collection.

Example 2: Find with Condition

db.users.find({ age: { $gt: 25 } })

Returns users whose age is greater than 25.

Example 3: Find Specific Fields Only

db.users.find({ age: { $gt: 25 } }, { name: 1, _id: 0 })

Returns only the name field (excluding _id).

Example 4: Find One Document

db.users.findOne({ name: "Bhupesh" })

Returns the first matching document.

MongoDB Query Operators

Query operators in MongoDB are used to filter documents based on specific conditions.

Comparison Operators

Operator	Description	Example
`$eq`	Equals	`{ age: { $eq: 25 } }`
`$ne`	Not equal	`{ status: { $ne: "inactive" }}`
`$gt`	Greater than	`{ age: { $gt: 30 } }`
`$lt`	Less than	`{ age: { $lt: 50 } }`
`$gte`	Greater than or equal to	`{ score: { $gte: 90 } }`
`$lte`	Less than or equal to	`{ score: { $lte: 60 } }`

Logical Operators

Operator	Description	Example
`$and`	Matches documents that satisfy all clauses	`{ $and: [ { age: { $gt: 18 } }, { age: { $lt: 60 } } ] }`
`$or`	Matches documents that satisfy any clause	`{ $or: [ { age: 20 }, { name: "Bhupesh" } ] }`
`$not`	Inverts the effect of a query expression	`{ age: { $not: { $gt: 18 } } }`
`$nor`	Matches none of the expressions	`{ $nor: [ { status: "inactive" }, { age: { $lt: 18 } } ] }`

Element Operators

Operator	Description	Example
`$exists`	Checks if the field exists	`{ email: { $exists: true } }`
`$type`	Checks the BSON type of a field	`{ age: { $type: "int" } }`

Array Operators

Operator	Description	Example
`$in`	Matches any value in the array	`{ age: { $in: [20, 25, 30] } }`
`$nin`	Matches none of the values in the array	`{ status: { $nin: ["inactive", "banned"] } }`
`$all`	Matches arrays that contain all specified elements	`{ tags: { $all: ["node", "js"] } }`
`$size`	Matches arrays with a specific number of elements	`{ tags: { $size: 3 } }`
`$elemMatch`	Matches documents that contain an array element that matches all criteria	`{ scores: { $elemMatch: { $gt: 80, $lt: 100 } } }`

Example Usage

db.users.find({
  $and: [
    { age: { $gt: 18 } },
    { status: { $ne: "inactive" } }
  ]
});

UPDATE in MongoDB

MongoDB provides methods to update documents in a collection.

`updateOne()`

Updates a single document that matches the filter.

db.users.updateOne(
  { name: "Bhupesh" },
  { $set: { age: 26 } }
);

This will update the age field of the first document where name is "Bhupesh"

updateMany()

Updates all documents that match the filter.

db.users.updateMany(
  { country: "Canada" },
  { $set: { isActive: true } }
);

This will update all users from Canada by adding or updating the isActive field.

Operator	Description	Example
`$set`	Sets the value of a field	`{ $set: { age: 30 } }`
`$inc`	Increments a field by a value	`{ $inc: { points: 10 } }`
`$unset`	Removes a field from a document	`{ $unset: { tempField: "" } }`
`$rename`	Renames a field	`{ $rename: { oldName: "newName" } }`

Nesting in MongoDB

MongoDB supports nested documents (also called embedded documents)—documents inside documents. This helps represent complex relationships directly within the document itself.

Example: Nested Document

const user = {
  name: "Bhupesh",
  age: 25,
  address: {
    street: "123 King St",
    city: "Toronto",
    country: "Canada"
  }
};

db.users.insertOne(user);

Here, address is a nested object inside the user document.

Accessing Nested Fields

Use dot notation to query or update nested fields.

// Find users in Toronto
db.users.find({ "address.city": "Toronto" });

// Update the country of a nested address
db.users.updateOne(
  { name: "Bhupesh" },
  { $set: { "address.country": "USA" } }
);

Nesting Arrays of Documents

MongoDB also allows arrays of nested documents:

const blog = {
  title: "My Blog Post",
  comments: [
    { user: "Alice", text: "Great post!" },
    { user: "Bob", text: "Thanks for sharing." }
  ]
};

db.blogs.insertOne(blog);

Querying Nested Arrays

You can also query nested arrays of documents:

db.blogs.find({ "comments.user": "Alice" });

Nesting in MongoDB helps reduce the need for joins and keeps related data together. Use it wisely for better performance and data organization!

DELETE in MongoDB

In MongoDB, you can delete documents from a collection using two main methods:

deleteOne()

Deletes the first document that matches the query criteria.

db.users.deleteOne({ name: "Bhupesh" });

If multiple documents match, only the first one will be deleted.

deleteMany()

Deletes all documents that match the query criteria.

db.users.deleteMany({ age: { $lt: 18 } });

Deletes all users under the age of 18.

Delete All Documents (Use Carefully)

db.users.deleteMany({});

This will remove all documents from the users collection.

Deleting by _id

db.users.deleteOne({ _id: ObjectId("60f6f6f6f6f6f6f6f6f6f6f6") });

You must use ObjectId() when deleting by _id.

MongoDB also supports soft deletes (e.g., marking as deleted with a flag), but you must implement this manually using a field like isDeleted: true.

What is Mongoose?

Mongoose is an Object Data Modeling (ODM) library for MongoDB and Node.js.

It provides a straightforward, schema-based solution to model your application data.

Why Use Mongoose?

Simplifies interaction with MongoDB using models.
Allows you to define schemas with field types and validations.
Provides middleware hooks and custom methods.
Supports relationships using population.
Handles complex querying and data manipulation easily.

Installation

npm install mongoose

Basic Setup Example

const mongoose = require('mongoose');

// Connect to MongoDB
mongoose.connect('mongodb://localhost:27017/myApp')
  .then(() => console.log('Connected to MongoDB'))
  .catch(err => console.log(err));

Define a Schema and Model

const userSchema = new mongoose.Schema({
  name: String,
  email: String,
  age: Number
});

const User = mongoose.model('User', userSchema);

Create and Save a Document

const user = new User({
  name: "Bhupesh",
  email: "bhupesh@example.com",
  age: 25
});

user.save()
  .then(doc => console.log("Saved:", doc))
  .catch(err => console.log(err));

Common Operations

User.find()
User.findById()
User.findOne()
User.updateOne()
User.deleteOne()

Installation and Setup of Mongoose

Mongoose helps Node.js apps connect and interact with MongoDB in a structured and efficient way.

Step 1: Install Mongoose

Use npm to install Mongoose in your Node.js project:

npm install mongoose

Step 2: Create Project Files

Your folder structure might look like this:

myApp/
├── node_modules/
├── index.js
├── package.json

Step 3: Connect to MongoDB

// index.js
const mongoose = require('mongoose');

// Connect to local MongoDB
mongoose.connect("mongodb://127.0.0.1:27017/myDatabase")
  .then(() => console.log("✅ Connected to MongoDB"))
  .catch((err) => console.error("❌ Connection error", err));

Replace myDatabase with your actual database name.

Mongoose Schema

A Mongoose Schema defines the structure of the documents within a MongoDB collection. It specifies the fields, data types, validations, and even default values.

Create a Basic Schema

const mongoose = require("mongoose");

const userSchema = new mongoose.Schema({
  name: String,
  email: String,
  age: Number
});

Add Validations and Options

const userSchema = new mongoose.Schema({
  name: {
    type: String,
    required: true,       // Mandatory field
    trim: true            // Removes whitespace
  },
  email: {
    type: String,
    required: true,
    unique: true,         // No duplicate emails
    lowercase: true       // Automatically converts to lowercase
  },
  age: {
    type: Number,
    min: 0,               // Minimum age validation
    default: 18           // Default value
  },
  createdAt: {
    type: Date,
    default: Date.now
  }
});

Convert Schema to Model

const User = mongoose.model("User", userSchema);

Now, User can be used to create, read, update, and delete users in the users collection.

Notes

A schema is just a blueprint; it needs to be compiled into a model.
Once compiled, the model gives you access to powerful Mongoose methods like find(), save(), deleteOne(), etc.
You can also define custom methods, virtuals, and middleware on schemas.

Mongoose Models

A Model is a wrapper for a Mongoose schema. It provides an interface to interact with documents in a MongoDB collection.

How to Create a Model

After defining a schema, use mongoose.model() to create a model:

const mongoose = require('mongoose');

// Define Schema
const userSchema = new mongoose.Schema({
  name: String,
  email: String,
  age: Number
});

// Create Model
const User = mongoose.model("User", userSchema);

"User" is the name of the model.
Mongoose will create a collection called users (lowercased and pluralized).

Task	Method
Create	`new User()` + `.save()`
Read	`find()`, `findOne()`
Update	`updateOne()`, `findByIdAndUpdate()`
Delete	`deleteOne()`, `findByIdAndDelete()`

Insert in Mongoose

Inserting data into MongoDB using Mongoose is simple and efficient using the Model instance or Model.create() method.

Method 1: Using `new Model()` and `.save()`

const mongoose = require('mongoose');

// Define schema
const userSchema = new mongoose.Schema({
  name: String,
  email: String,
  age: Number
});

// Create model
const User = mongoose.model("User", userSchema);

// Create a new user
const newUser = new User({
  name: "Bhupesh",
  email: "bhupesh@example.com",
  age: 25
});

// Save the user to the database
newUser.save()
  .then(result => console.log("✅ Saved:", result))
  .catch(err => console.log("❌ Error:", err));

Method 2: Using Model.create()

User.create({
  name: "Alice",
  email: "alice@example.com",
  age: 30
})
.then(result => console.log("✅ User created:", result))
.catch(err => console.log("❌ Error creating user:", err));

Method 3: Insert Many Documents at Once

User.insertMany([
  { name: "John", email: "john@example.com", age: 28 },
  { name: "Jane", email: "jane@example.com", age: 22 }
])
.then(result => console.log("✅ Users inserted:", result))
.catch(err => console.log("❌ Insertion error:", err));

Tips

Use .save() when you need to manipulate or validate the instance before saving.
Use .create() or .insertMany() for quicker, cleaner inserts.
Mongoose handles schema validations automatically before insertion.

Operation Buffering in Mongoose

Operation Buffering in Mongoose allows you to run database operations before a successful connection is established to MongoDB.

What Does That Mean?

You can perform operations (like .save() or .find()) immediately after defining your model—even before the connection to the database is fully established. Mongoose queues those operations and executes them once the connection is ready.

Example

const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({ name: String });
const User = mongoose.model("User", userSchema);

// Save user before connecting
const newUser = new User({ name: "Bhupesh" });
newUser.save().then(() => console.log("✅ Saved even before connection!"));

// Connect afterward
mongoose.connect("mongodb://127.0.0.1:27017/demoDB")
  .then(() => console.log("📡 Connected to MongoDB"))
  .catch(err => console.error("❌ Connection error:", err));

Why It’s Useful

Makes development smoother.
Prevents crashes from unintentional timing issues.
Helps with serverless platforms or apps with delayed DB readiness.

When to Avoid

In production apps where you want full control over database timing.
When you're handling connections manually.

Find in Mongoose

Mongoose provides several methods to retrieve documents from a MongoDB collection. The most commonly used methods are:

find()
findOne()
findById()

1. `find()`

Returns all documents that match the query as an array.

User.find({ age: { $gte: 18 } })
  .then(users => console.log(users))
  .catch(err => console.error(err));

2. findOne()

Returns the first document that matches the query.

User.findOne({ name: "Bhupesh" })
  .then(user => console.log(user))
  .catch(err => console.error(err));

Returns the first user with the name "Bhupesh".

3. findById()

Used to find a document using its _id.

User.findById("66507e7a342823aa9f34b215")
  .then(user => console.log(user))
  .catch(err => console.error(err));

Make sure to pass a valid ObjectId as a string.

Tip: Use Projections

You can specify which fields to return:

User.find({}, "name email")

Only returns the name and email fields for all users.

Tip: Use Filters and Sorts

User.find({ age: { $gt: 18 } })
  .sort({ name: 1 })   // ascending
  .limit(5)            // limit results
  .skip(10);           // skip first 10

Update in Mongoose

Mongoose provides several methods to update documents in a MongoDB collection.

Common Update Methods

Method	Description
`updateOne()`	Updates the first matched document
`updateMany()`	Updates all matched documents
`findByIdAndUpdate()`	Finds a document by `_id` and updates it
`findOneAndUpdate()`	Finds one doc matching query & updates

updateOne()

User.updateOne(
  { name: "Bhupesh" },
  { $set: { age: 26 } }
)
.then(res => console.log("Updated:", res))
.catch(err => console.error(err));

updateMany()

User.updateMany(
  { age: { $lt: 18 } },
  { $set: { minor: true } }
)
.then(res => console.log("Updated:", res))
.catch(err => console.error(err));

findByIdAndUpdate()

User.findByIdAndUpdate(
  "66507e7a342823aa9f34b215",
  { age: 30 },
  { new: true } // returns updated document
)
.then(user => console.log("Updated User:", user))
.catch(err => console.error(err));

findOneAndUpdate()

User.findOneAndUpdate(
  { email: "bhupesh@example.com" },
  { $inc: { age: 1 } },
  { new: true }
)
.then(user => console.log("Updated:", user));

Update Options

Option	Description
`new: true`	Returns updated doc instead of old version
`upsert`	Creates new doc if no match found
`runValidators: true`	Enforces schema validations during update

Tip

Always use $set when updating fields to avoid replacing the entire document.

{ $set: { name: "Alice" } }

Delete in Mongoose

Mongoose provides multiple methods to remove documents from a MongoDB collection:

deleteOne()

Deletes the first document that matches the query.

User.deleteOne({ name: "Bhupesh" })
  .then(result => console.log("✅ Deleted:", result))
  .catch(err => console.error("❌ Error:", err));

deleteMany()

Deletes all documents that match the query.

User.deleteMany({ age: { $lt: 18 } })
  .then(result => console.log("✅ Deleted minors:", result))
  .catch(err => console.error("❌ Error:", err));

findByIdAndDelete()

Finds a document by _id and deletes it.

User.findByIdAndDelete("66507e7a342823aa9f34b215")
  .then(deletedUser => console.log("✅ Deleted User:", deletedUser))
  .catch(err => console.error("❌ Error:", err));

findOneAndDelete()

Deletes the first matching document and returns it.

User.findOneAndDelete({ email: "test@example.com" })
  .then(deleted => console.log("✅ Deleted:", deleted))
  .catch(err => console.error("❌ Error:", err));

Notes

All methods return a promise.
findOneAndDelete() and findByIdAndDelete() return the deleted document.
deleteOne() and deleteMany() return a result object with deletedCount.

Schema Validations in Mongoose

Mongoose allows you to enforce data integrity through schema-based validations. This ensures that your documents meet certain criteria before being saved to the database.

Example Schema with Validations

const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  name: {
    type: String,
    required: true,         // Must be provided
    minlength: 3,           // At least 3 characters
    maxlength: 50           // Max 50 characters
  },
  email: {
    type: String,
    required: true,
    unique: true,           // No duplicates allowed
    match: /.+\@.+\..+/     // Must match email pattern
  },
  age: {
    type: Number,
    min: 18,                // Minimum age
    max: 100                // Maximum age
  },
  isAdmin: {
    type: Boolean,
    default: false
  }
});

Common Validation Options

Option	Description
`required`	Field must be present
`min` / `max`	For numbers: min and max values
`minlength` / `maxlength`	For strings: length limits
`match`	Must match a regex (e.g., email)
`enum`	Must be one of a set of allowed values
`default`	Value to use if none is provided
`unique`	Enforces uniqueness in MongoDB (index)

Custom Validation Function

const productSchema = new mongoose.Schema({
  price: {
    type: Number,
    validate: {
      validator: (val) => val > 0,
      message: 'Price must be greater than zero!'
    }
  }
});

Notes

Validations run on .save() and .create() by default.
Use { runValidators: true } when updating documents.
Unique is a MongoDB index, not a validation. Handle duplication errors manually if needed.

Mongoose SchemaType Options

Mongoose provides a set of SchemaType options that define how data is stored, validated, and handled inside MongoDB collections.

These options can be applied to individual fields in a schema.

Common SchemaType Options

Option	Description
`type`	Defines the data type (String, Number, Date, etc.)
`required`	Makes the field mandatory
`default`	Sets a default value if none is provided
`unique`	Creates a unique index (Note: not a validation)
`enum`	Restricts values to a fixed set (like categories or status)
`min` / `max`	For numbers (min and max values); For dates (earliest/latest)
`minlength` / `maxlength`	For strings (length restrictions)
`match`	Validates string against a regular expression
`validate`	Provides a custom validator function
`select`	Include or exclude field from query results (e.g. `select: false`)
`immutable`	Once set, the value cannot be changed after document creation
`get` / `set`	Custom getter/setter functions for transforming data

Validations During Update & Error Handling in Mongoose

By default, Mongoose does NOT run schema validations during updateOne(), updateMany(), or findByIdAndUpdate() unless explicitly told to do so.

Enabling Validations on Update

Use the { runValidators: true } option to enforce schema rules when updating.

Example

User.findByIdAndUpdate(
  "66507e7a342823aa9f34b215",
  { age: 15 }, // Fails if age < 18 (based on schema)
  { runValidators: true, new: true }
)
.then(updatedUser => console.log(updatedUser))
.catch(err => console.error("❌ Validation Error:", err.message));

Why It Matters?

Without runValidators, this update would bypass validation rules like:

min, max
enum, match
Custom validators

Mongoose Middleware (Hooks)

Mongoose Middleware, also known as hooks, allow you to run custom logic before or after certain operations like save, remove, update, or validate.

Why Use Middleware?

Logging
Data validation or formatting
Timestamps
Cascading deletes
Sending emails or notifications

Types of Middleware

Type	Triggered On
`pre`	Before the operation
`post`	After the operation

Middleware Applies To:

save
validate
remove
updateOne
deleteOne
find
findOne
findOneAndUpdate
findOneAndDelete

Example: Pre-save Hook

userSchema.pre("save", function (next) {
  console.log("📦 Before saving:", this.name);
  // modify data if needed
  this.name = this.name.trim();
  next();
});

Example: Post-save Hook

userSchema.post("save", function (doc, next) {
  console.log("✅ User saved:", doc.name);
  next();
});

Example: Pre-find Hook

userSchema.pre("find", function () {
  console.log("🔍 Running find query...");
  this.select("-password"); // exclude password from results
});

Example: Pre-remove Hook

userSchema.pre("remove", function (next) {
  console.log(`⚠️ User ${this.name} is being removed`);
  next();
});

Real-World Use Cases

Hashing passwords before save
Soft deletes (marking deleted instead of removing)
Creating audit logs
Formatting timestamps

Mongoose Middleware is a powerful way to plug in logic around lifecycle events of your documents.

Mongoose Instance Methods & Static Methods

Mongoose allows you to add custom methods to your models in two ways:

Instance Methods: Run on individual documents.
Static Methods: Run on the Model (i.e., the entire collection).

Instance Methods

These methods are defined on the document instance.

Example:

const userSchema = new mongoose.Schema({
  name: String,
  email: String
});

userSchema.methods.sayHello = function () {
  return `Hi, I’m ${this.name}`;
};

const User = mongoose.model("User", userSchema);

const user = new User({ name: "Bhupesh", email: "bhupesh@example.com" });
console.log(user.sayHello());  // Output: Hi, I’m Bhupesh

Use Cases

Formatting user data
Checking user roles or permissions
Document-specific logic

Static Methods

These methods are attached to the Model class, not the document.

Example:

userSchema.statics.findByEmail = function (email) {
  return this.findOne({ email });
};

const User = mongoose.model("User", userSchema);

User.findByEmail("bhupesh@example.com")
  .then(user => console.log(user))
  .catch(err => console.error(err));

Use Cases

Custom queries on the collection
Aggregation helpers
Global filters (e.g., find all active users)

Note

Use regular functions (not arrow functions) to access this.
this in instance methods → refers to the document.
this in static methods → refers to the model.

Model methods help organize and encapsulate business logic close to your data.

Mongoose Relationships (`ref` & `.populate()`)

In MongoDB (and Mongoose), relationships between documents are created using the ref option. This allows documents to reference other documents—similar to a foreign key in SQL.

Defining Relationships with `ref`

Let’s say we have two models: User and Post.

Example: One-to-Many (User → Posts)

// models/User.js
const mongoose = require("mongoose");

const userSchema = new mongoose.Schema({
  name: String,
  email: String
});

module.exports = mongoose.model("User", userSchema);

// models/Post.js
const mongoose = require("mongoose");

const postSchema = new mongoose.Schema({
  title: String,
  content: String,
  user: {
    type: mongoose.Schema.Types.ObjectId,
    ref: "User"   // 👈 references the User model
  }
});

module.exports = mongoose.model("Post", postSchema);

Using .populate()

The .populate() method replaces the referenced ObjectId with the actual document.

Post.find()
  .populate("user")  // replaces `user` ObjectId with full user object
  .then(posts => {
    console.log(posts[0].user.name);  // Access user's name
  });

Populate Specific Fields

Post.find()
  .populate("user", "name email -_id")  // include name & email, exclude _id
  .then(console.log);

Example: One-to-One

const profileSchema = new mongoose.Schema({
  bio: String,
  user: {
    type: mongoose.Schema.Types.ObjectId,
    ref: "User"
  }
});

Example: Many-to-Many

You can also have an array of references:

const courseSchema = new mongoose.Schema({
  name: String,
  students: [{
    type: mongoose.Schema.Types.ObjectId,
    ref: "User"
  }]
});

Notes

Always use .populate() on the query, not on the schema.
You can chain multiple .populate() calls for deeply nested population.
Relationships are manual in MongoDB—no cascading updates or deletes by default.

Mongoose ref and .populate() give you powerful control over document linking without losing MongoDB’s flexibility.

Indexes in Mongoose

Indexes in MongoDB improve the performance of read operations by allowing the database to locate data faster.

Mongoose lets you define indexes directly in your schema.

Why Use Indexes?

Improve query speed
Support uniqueness constraints
Optimize sorting, filtering, and pagination
Enable geospatial or text search

Defining Indexes in a Schema

const userSchema = new mongoose.Schema({
  name: {
    type: String,
    index: true // simple index
  },
  email: {
    type: String,
    unique: true // creates a unique index
  }
});

Compound Index

userSchema.index({ name: 1, email: -1 }); // ascending + descending

Checking Indexes in MongoDB

User.collection.getIndexes({ full: true }).then(console.log);

Creating Indexes Manually

userSchema.index({ age: 1 });
User.createIndexes(); // triggers index creation

Notes

Index creation is asynchronous.
Indexes can slow down write operations, so use them wisely.
MongoDB automatically creates an _id index for every document.

Dropping Indexes (if needed)

User.collection.dropIndex("name_1");

Indexes are essential for scaling MongoDB apps and keeping queries fast.

Mongoose Virtuals

Virtuals are properties that don’t get persisted in MongoDB but are computed dynamically when you access them.

They're useful for:

Derived values (e.g., full name from first + last name)
Relationships (for population)
Formatting data

Defining a Virtual

const userSchema = new mongoose.Schema({
  firstName: String,
  lastName: String
});

userSchema.virtual("fullName").get(function () {
  return `${this.firstName} ${this.lastName}`;
});

Now you can do:

const user = new User({ firstName: "Bhupesh", lastName: "Kumar" });
console.log(user.fullName);  // "Bhupesh Kumar"

Setting a Virtual (with Setter)

userSchema.virtual("info").set(function (v) {
  const parts = v.split(" ");
  this.firstName = parts[0];
  this.lastName = parts[1];
});

Usage:

const u = new User();
u.info = "John Doe";
console.log(u.firstName); // "John"

Virtuals in JSON

By default, virtuals don’t appear in .toJSON() or .toObject(). To include them:

const schema = new mongoose.Schema({ ... }, {
  toJSON: { virtuals: true },
  toObject: { virtuals: true }
});

Virtuals ≠ MongoDB Fields

Virtuals are:

Not stored in the DB
Only computed in JS code
Useful for display, derived data, or linking logic

Real-Life Uses

Full names, initials
isAdult from age
Slugs (/posts/my-awesome-title)
Counting embedded items

Virtuals help keep your DB lean while your app logic stays rich and expressive.

Aggregation Framework in Mongoose

Aggregation is a powerful way to transform and analyze data in MongoDB. It's used to group, filter, sort, project, and compute complex results.

Mongoose provides a .aggregate() method to use MongoDB’s aggregation pipeline.

Basic Syntax

Model.aggregate([
  { $match: { age: { $gte: 18 } } },
  { $group: { _id: "$country", total: { $sum: 1 } } },
  { $sort: { total: -1 } }
]).then(result => console.log(result));

Operator	Description
`$match`	Filters documents (like WHERE)
`$group`	Groups data by a field
`$project`	Includes/excludes fields
`$sort`	Sorts documents
`$limit`	Limits result count
`$skip`	Skips n documents
`$count`	Counts number of documents
`$sum`, `$avg`, `$min`, `$max`	Math operators for groups

Example: Average Age by Country

User.aggregate([
  { $group: { _id: "$country", avgAge: { $avg: "$age" } } }
]).then(console.log);

Real-World Use Cases

Report generation (sales per region)
Filtering + transforming dashboards
Grouping comments by user
Creating charts and summaries

Notes

Aggregations bypass Mongoose schema rules.
Always validate data before running aggregations.
Aggregation is read-only—use for querying, not updating.

Aggregation helps you unlock deep insights from your data without writing complex backend logic.

Lean Queries in Mongoose

By default, Mongoose returns full Mongoose documents with lots of features like getters, setters, virtuals, and instance methods. But sometimes, you just want plain JavaScript objects for performance.

That’s where .lean() comes in.

What is `.lean()`?

Calling .lean() tells Mongoose to skip the document enhancement and return plain JSON objects directly from MongoDB.

Example: Using `.lean()`

User.find({ isActive: true }).lean().then(users => {
  console.log(typeof users[0]); // "object"
  console.log(users[0] instanceof mongoose.Document); // false
});

Why use `.lean()`?

Feature	Benefit
Faster queries	No conversion to Mongoose document
Lower memory usage	Especially useful in large queries
Better for APIs	Lightweight JSON responses

When NOT to Use .lean()

If you need to use virtuals, getters/setters, or instance methods
If you rely on schema validation logic

Tip: .lean() with .populate()

Works fine! You can still populate referenced docs:

Post.find().populate("author").lean().then(posts => {
  console.log(posts[0].author.name);
});

Compare Performance

// Without lean (Mongoose doc)
const normal = await User.find();

// With lean (plain object)
const fast = await User.find().lean();

Using .lean() gives you a huge performance boost for read-heavy applications, especially APIs and dashboards.

Mongoose Transactions (ACID)

MongoDB supports multi-document ACID transactions on replica sets and sharded clusters. Mongoose enables you to use this feature with sessions to ensure operations are all-or-nothing.

Why Use Transactions?

Ensure atomicity (either all changes happen or none)
Maintain data integrity
Handle multi-document updates safely

Starting a Transaction in Mongoose

const session = await mongoose.startSession();
session.startTransaction();

try {
  await User.create([{ name: "Alice" }], { session });
  await Post.create([{ title: "Hello", author: "Alice" }], { session });

  await session.commitTransaction();  // ✅ Commit changes
} catch (err) {
  await session.abortTransaction();  // ❌ Rollback on error
  console.error(err);
} finally {
  session.endSession();              // 🧹 Always clean up
}

With async/await

const runTransaction = async () => {
  const session = await mongoose.startSession();
  try {
    await session.withTransaction(async () => {
      const user = await User.create([{ name: "John" }], { session });
      const post = await Post.create([{ title: "Welcome", author: user[0]._id }], { session });
    });
  } catch (err) {
    console.error("Transaction failed:", err);
  } finally {
    session.endSession();
  }
};

Requirements

MongoDB 4.0+ and replica set enabled (even a single-node replica set in dev)
Use { session } in each query involved in the transaction

Real-World Use Cases

Creating a user + default profile
Placing an order + updating inventory
Booking system: lock seat + confirm payment

Transactions are key for building reliable, enterprise-grade applications with MongoDB.

Mongoose Error Handling

Robust error handling is essential for building reliable applications. Mongoose provides a variety of error types to help identify and respond to issues.

Common Mongoose Errors

Error Type	Description
`ValidationError`	Schema validation failed
`CastError`	Invalid ObjectId or data type
`MongoServerError`	Duplicate key, indexing issues, etc.
`DocumentNotFoundError`	When using `.orFail()` and no document is found
`DisconnectedError`	Mongoose lost connection to MongoDB

Example: Basic Try-Catch Block

try {
  const user = await User.create({ email: "invalid" });
} catch (err) {
  console.error("Something went wrong:", err.message);
}

Handling ValidationError

try {
  await User.create({ name: "" }); // name is required
} catch (err) {
  if (err.name === "ValidationError") {
    console.error("Validation failed:", err.errors);
  }
}

Handling Invalid ObjectId (CastError)

try {
  const user = await User.findById("invalid_id");
} catch (err) {
  if (err.name === "CastError") {
    console.error("Invalid ID format!");
  }
}

Handling Duplicate Key (e.g., email already exists)

try {
  await User.create({ email: "test@example.com" }); // email is unique
} catch (err) {
  if (err.code === 11000) {
    console.error("Duplicate key error:", err.keyValue);
  }
}

Tips for Production

Avoid leaking sensitive error info to users.
Log full error stacks to your server logs.
Use asyncHandler or error-handling middleware in Express.

Optional: Using .orFail()

await User.findById(userId).orFail(new Error("User not found"));

Proper error handling makes your app more secure, stable, and easier to debug.

Plugins in Mongoose

Plugins are reusable pieces of schema logic in Mongoose. They allow you to DRY (Don't Repeat Yourself) your code by abstracting repeated patterns into reusable functions.

Why Use Plugins?

Add timestamps automatically
Enforce soft deletes
Add pagination or search functionality
Encrypt fields like passwords
Audit log tracking

Creating a Simple Plugin

// plugins/timestampPlugin.js
module.exports = function timestampPlugin(schema) {
  schema.add({
    createdAt: { type: Date, default: Date.now },
    updatedAt: { type: Date }
  });

  schema.pre("save", function (next) {
    this.updatedAt = Date.now();
    next();
  });
};

Using the Plugin in a Schema

const mongoose = require("mongoose");
const timestampPlugin = require("./plugins/timestampPlugin");

const blogSchema = new mongoose.Schema({
  title: String,
  content: String
});

blogSchema.plugin(timestampPlugin); // 👈 Apply plugin here

const Blog = mongoose.model("Blog", blogSchema);

Plugin Name	Feature
`mongoose-paginate-v2`	Adds pagination to models
`mongoose-unique-validator`	Validates uniqueness before saving
`mongoose-delete`	Soft delete functionality
`mongoose-autopopulate`	Auto-populates refs
`mongoose-slug-generator`	Generates URL slugs from titles

Install via npm:

npm install mongoose-paginate-v2

Use in schema:

const paginate = require("mongoose-paginate-v2");
schema.plugin(paginate);

Best Practices

Keep plugins modular and reusable
Prefix custom plugins with mongoose- if publishing
Avoid plugin conflicts (e.g., two plugins modifying the same hook)

Mongoose plugins supercharge your schemas by keeping code clean, DRY, and powerful.

Mongoose Performance Optimization Tips

As your app scales, it’s essential to make your MongoDB and Mongoose operations as efficient as possible. Here are practical tips to improve performance.

1. Use `.lean()` for Read-Only Queries

User.find({ isActive: true }).lean();

Returns plain JS objects (not full Mongoose documents)

Faster and less memory usage

2. Index Your Queries

const userSchema = new mongoose.Schema({
  email: { type: String, index: true }
});

Add indexes on frequently queried fields
Use explain() to check query performance

3. Select Only Needed Fields

User.find().select("name email");

Avoid fetching entire documents
Reduces network and memory usage

4. Pagination Instead of .skip() on Large Datasets

.skip() can be slow with large offsets
Prefer range-based pagination using _id or timestamps

User.find({ _id: { $gt: lastId } }).limit(10);

5. Use bulkWrite for Batch Operations

Model.bulkWrite([
  { updateOne: { filter: { _id }, update: { $set: { field: value } } } },
  { deleteOne: { filter: { _id } } }
]);

Ideal for large-scale updates/deletes
Much faster than running individual operations

6. Avoid Unnecessary Middleware & Virtuals

Disable unused features if performance matters

const schema = new mongoose.Schema({...}, { virtuals: false });

7. Monitor Query Performance

Use .explain() to see query execution stats

User.find({ email: "a@example.com" }).explain("executionStats");

8. Use Connection Pooling in Production

mongoose.connect(MONGO_URI, {
  maxPoolSize: 10, // Controls concurrent operations
});

Bonus: Enable Mongoose Debugging

mongoose.set("debug", true);

Logs queries to console
Useful for development

Optimizing Mongoose is about writing smarter queries, reducing load, and using MongoDB’s full power.

Mongoose Deployment & Production Tips

Before going live with your Node.js + Mongoose app, make sure your deployment is secure, stable, and optimized.

1. Use Environment Variables

Never hardcode credentials or database URLs.

# .env file
MONGO_URI=mongodb+srv://user:pass@cluster.mongodb.net/mydb

require("dotenv").config();
mongoose.connect(process.env.MONGO_URI);

2. Use Connection Options

Fine-tune performance and reliability with options.

mongoose.connect(process.env.MONGO_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  maxPoolSize: 10, // Connection pool
  serverSelectionTimeoutMS: 5000 // Fail fast on bad DB
});

3. Enable Monitoring

Use services like:
MongoDB Atlas performance tab
New Relic, Datadog, PM2 Metrics

mongoose.set("debug", true) (development only)

4. Use Replica Set for Production

Enables transactions
Improves availability and fault tolerance

Even in dev:

mongod --replSet rs0

Then run:

rs.initiate()

5. Error Handling Middleware (Express)

app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).send("Something went wrong!");
});

Prevents crashes
Centralizes error responses

6. Secure Your Database

Don’t expose MongoDB publicly
Whitelist IPs in MongoDB Atlas
Use SSL/TLS for connections

7. Backup & Disaster Recovery

Set up automatic backups (Atlas supports this)
Test your restore process

8. Restart Strategies

Use process managers like:
PM2
Docker containers + health checks
Auto-restart on crashes

9. Use Linting & Logging

Lint your code with ESLint
Log errors and queries for audit

npm install morgan

10. Testing Before Shipping

Use jest, supertest, or mocha to test routes and DB logic
Test all edge cases before deploying

Solid Mongoose apps are built not just on code, but on strong deployment practices and monitoring systems.

Final Thoughts

Congratulations on making it to the end of this comprehensive guide on MongoDB and Mongoose!

By now, you’ve covered:

MongoDB fundamentals (CRUD, BSON, documents, collections)
Mongoose setup and schema modeling
Data validations and error handling
Middleware, plugins, transactions, and performance tips
Real-world backend structure using Express + MongoDB
Deployment best practices and production strategies

What’s Next?

Now that you’ve got a strong foundation:

Start building your own backend projects with MongoDB
Try out more advanced features like aggregation pipelines, virtuals, and MongoDB Atlas Triggers
Experiment with caching, rate limiting, and authorization layers

Stay Connected

If this guide helped you, feel free to:

⭐ Bookmark & Share it with fellow developers
🗣 Drop your thoughts, suggestions, or questions in the comments
🛠️ Follow me for upcoming full-stack guides and project tutorials

💬 “The best way to learn is to build.” So go ahead — spin up a project, explore real datasets, and turn this knowledge into something awesome!

Keep building. Keep learning. See you in the next one! 👋

SQL for Everyone: The Ultimate Starter Guide

Bhupesh Kumar — Thu, 05 Jun 2025 19:47:27 +0000

Welcome to your all-in-one SQL learning journey! 🚀

Whether you're just starting with databases or revising for a backend development project, this guide will help you master SQL from the ground up.

🚀 Topics Covered

📌 What is SQL? Why use databases?
🧱 Tables, Data Types, Keys & Constraints
✍️ INSERT, UPDATE, DELETE
🔍 SELECT, WHERE, ORDER BY, GROUP BY, HAVING
🎯 Aggregate Functions
🔧 ALTER, TRUNCATE, SQL_SAFE_UPDATES
🔗 JOINs (INNER, LEFT, RIGHT, FULL, SELF)
🌀 Subqueries
👓 Views
⚡ Indexes
🔐 Transactions & ACID principles
🎭 CASE Statements
📚 UNION vs UNION ALL
🧠 EXISTS vs IN
🔍 BETWEEN, LIKE, IS NULL
🏗️ Common Table Expressions (CTEs) with WITH

🧠 Who Is This For?

Aspiring backend or full-stack developers
Students working on SQL-based projects
Engineers preparing for interviews
Anyone who wants to write faster, cleaner, and more efficient SQL queries

💡 How to Use

💻 Copy code snippets and run them in your SQL environment (MySQL, PostgreSQL, etc.)
🔄 Practice with real datasets or mock tables
🧠 Use this guide as your personal SQL reference handbook

Let’s break it down into simple concepts, illustrated examples, and hands-on practice to build your confidence step by step. Ready? Let’s dive in! ⛏️

What is a Database?

A database is an organized collection of data that can be easily accessed, managed, and updated. It allows software applications to store, retrieve, and manipulate data efficiently.

Key Features of a Database:

Persistent storage: Data is saved permanently (not lost after app closes).
Structured format: Organized using tables, collections, schemas, etc.
Efficient querying: Retrieve and filter data using query languages.
Scalable & secure: Can handle large amounts of data with access control.

Common Types of Databases:

Type	Description	Examples
Relational (SQL)	Uses tables with rows & columns	MySQL, PostgreSQL, SQLite
NoSQL	Flexible schema, often document-based	MongoDB, Firebase, Redis
In-Memory	Data stored in RAM for fast access	Redis, Memcached
Graph	Stores data as nodes and edges (relationships)	Neo4j

Why Use a Database?

Store user info (login/signup)
Manage blog posts, products, orders, etc.
Persist app data across sessions
Enable data analysis, reports, and business logic

Example Use Case

An e-commerce app uses a database to:

Save user accounts and passwords
Store product information and inventory
Track orders and payments
Display customer reviews

Databases are the backbone of modern applications — allowing apps to be dynamic, data-driven, and scalable!

SQL vs NoSQL Databases

Choosing the right type of database is crucial for building scalable and efficient applications. Here's a breakdown of SQL (Relational) vs NoSQL (Non-Relational) databases:

Key Differences

Feature	SQL (Relational)	NoSQL (Non-Relational)
📐 Structure	Table-based (rows & columns)	Document, key-value, graph, or wide-column
📋 Schema	Fixed schema (predefined)	Dynamic schema (flexible)
💬 Query Language	SQL (Structured Query Language)	Varies: MongoDB uses JSON-like queries
📶 Relationships	Strong support for joins & relations	Weak or no join support
⚙️ Scalability	Vertical (scale-up: stronger machine)	Horizontal (scale-out: more machines)
🧩 Best For	Complex queries, ACID compliance	Large datasets, real-time apps, flexibility
📚 Examples	MySQL, PostgreSQL, SQLite, MS SQL Server	MongoDB, Firebase, CouchDB, Redis

When to Use SQL

Banking, finance, or systems needing strong data integrity
Apps requiring multi-table joins
Structured data with clear relationships

When to Use NoSQL

Real-time analytics or big data
Content management systems, IoT, or chat apps
Rapid development with changing requirements

Example Comparison

SQL Table (User)

id	name	email
1	Alice	alice@mail.com

NoSQL Document (MongoDB)

{
  "_id": "1",
  "name": "Alice",
  "email": "alice@mail.com"
}

What is SQL?

SQL (Structured Query Language) is a standard programming language used to manage and manipulate relational databases.

Key Features

Create and modify database tables
Insert, update, and delete data
Retrieve specific data using queries
Enforce constraints, relationships, and data integrity

SQL is Used For:

Action	SQL Command
Create Table	`CREATE TABLE`
Insert Data	`INSERT INTO`
Retrieve Data	`SELECT`
Update Data	`UPDATE`
Delete Data	`DELETE`
Filter Data	`WHERE`, `LIKE`, etc.
Join Tables	`JOIN`

Example

-- Create a table
CREATE TABLE users (
  id INT PRIMARY KEY,
  name VARCHAR(100),
  email VARCHAR(100)
);

-- Insert data
INSERT INTO users (id, name, email) VALUES (1, 'Alice', 'alice@mail.com');

-- Retrieve data
SELECT * FROM users WHERE name = 'Alice';

Table in SQL

A table in SQL is a structured format to store rows of data in columns, like a spreadsheet. Each table represents a specific entity — such as users, products, or orders.

Table Structure

Rows: Each row (record) holds data for one item.
Columns: Each column represents a specific attribute (field) of the item.
Primary Key: Uniquely identifies each row.

Example Table: `users`

id	name	email
1	Alice	alice@mail.com
2	Bob	bob@mail.com

SQL Syntax: Create Table

CREATE TABLE users (
  id INT PRIMARY KEY,
  name VARCHAR(100),
  email VARCHAR(100)
);

Our First Database in SQL

Let’s create our first SQL database and table! This is your first real step into working with relational databases like MySQL, PostgreSQL, or SQLite.

Step 1: Create a Database

CREATE DATABASE myAppDB;

Step 2: Use the Database

USE myAppDB;

👉 Switches your current session to the newly created database.

Step 3: Create a Table

Let’s create a users table to store user information:

CREATE TABLE users (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(100) NOT NULL,
  email VARCHAR(100) UNIQUE NOT NULL,
  age INT
);

Step 4: Insert Data into the Table

INSERT INTO users (name, email, age)
VALUES ('Alice', 'alice@example.com', 25),
       ('Bob', 'bob@example.com', 30);

Step 5: View Data

SELECT * FROM users;

👉 This retrieves all records from the users table.

📋 Our First Table in SQL

Now that we’ve created our first database, let’s build our first table to store data!

What is a Table?

A table is a collection of related data organized in rows and columns.

Each column has a name and a data type (e.g., text, number, date).

Step-by-Step: Create a `users` Table

CREATE TABLE users (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(100) NOT NULL,
  email VARCHAR(100) UNIQUE NOT NULL,
  age INT,
  created_at DATE
);

Database Queries in SQL

A query is a request to the database to retrieve, insert, update, or delete data. SQL provides different commands to perform these actions efficiently.

Command	Purpose
SELECT	Retrieve data
INSERT	Add new data
UPDATE	Modify existing data
DELETE	Remove data
WHERE	Filter data
ORDER BY	Sort results
LIMIT	Limit number of rows

CREATE TABLE in SQL

The CREATE TABLE statement is used to define a new table and its structure in a relational database.

Basic Syntax

CREATE TABLE table_name (
  column1 datatype constraints,
  column2 datatype constraints,
  ...
);

Example: Creating a users Table

CREATE TABLE users (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(100) NOT NULL,
  email VARCHAR(100) UNIQUE NOT NULL,
  age INT,
  created_at DATE
);

Column Breakdown

Column Name	Data Type	Constraints	Description
`id`	`INT`	`PRIMARY KEY`, `AUTO_INCREMENT`	Unique ID for each user
`name`	`VARCHAR(100)`	`NOT NULL`	Required name field
`email`	`VARCHAR(100)`	`UNIQUE`, `NOT NULL`	Must be unique and not empty
`age`	`INT`	(optional)	User's age
`created_at`	`DATE`	(optional)	Date of account creation

Common Constraints

Constraint	Description
`PRIMARY KEY`	Uniquely identifies each row
`NOT NULL`	Field cannot be empty
`UNIQUE`	Prevents duplicate values in the column
`AUTO_INCREMENT`	Automatically increases the number
`DEFAULT`	Sets a default value

SQL Data Types

When creating tables in SQL, every column must be assigned a data type that defines what kind of data it can store — such as numbers, text, dates, or booleans.

Numeric Data Types

Data Type	Description
`INT`	Integer number (whole numbers)
`SMALLINT`	Smaller range of integer
`BIGINT`	Very large integers
`DECIMAL(p,s)`	Fixed-point numbers (e.g., money)
`FLOAT`	Approximate floating-point number
`DOUBLE`	Double precision float

String/Text Data Types

Data Type	Description
`CHAR(n)`	Fixed-length string (e.g., CHAR(10))
`VARCHAR(n)`	Variable-length string (e.g., VARCHAR(100))
`TEXT`	Large text field

Date and Time Data Types

Data Type	Description
`DATE`	Date only (YYYY-MM-DD)
`TIME`	Time only (HH:MM:SS)
`DATETIME`	Date and time
`TIMESTAMP`	Auto-records current time

Boolean Data Type

Data Type	Description
`BOOLEAN`	TRUE or FALSE

Some databases (like MySQL) use TINYINT(1) for BOOLEAN.

Other Data Types (Advanced Use)

Data Type	Description
`ENUM`	Set of predefined values
`BLOB`	Binary Large Object (images/files)
`JSON`	Stores JSON-formatted data
`UUID`	Universally Unique Identifier

Example: Using Data Types

CREATE TABLE products (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(100) NOT NULL,
  price DECIMAL(10, 2),
  in_stock BOOLEAN DEFAULT true,
  created_at DATETIME
);

🔐 What are SQL Constraints?

Constraints in SQL are rules applied to columns in a table to enforce data integrity, restrict invalid input, and maintain accuracy and reliability in the database.

Common SQL Constraints

Constraint	Description
`PRIMARY KEY`	Uniquely identifies each record in a table
`FOREIGN KEY`	Links a column to the `PRIMARY KEY` of another table (maintains relationships)
`NOT NULL`	Ensures a column cannot have a `NULL` (empty) value
`UNIQUE`	Ensures all values in a column are different
`DEFAULT`	Sets a default value if none is provided
`CHECK`	Limits values based on a condition
`AUTO_INCREMENT`	Automatically increases value for new records (commonly used for IDs)

Example: Applying Constraints

CREATE TABLE users (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(100) NOT NULL,
  email VARCHAR(100) UNIQUE,
  age INT CHECK (age >= 18),
  country VARCHAR(50) DEFAULT 'Canada'
);

FOREIGN KEY Example

CREATE TABLE orders (
  order_id INT PRIMARY KEY,
  user_id INT,
  FOREIGN KEY (user_id) REFERENCES users(id)
);

Why Use Constraints?

Prevent invalid data (e.g., negative age, duplicate emails)
Ensure relationships between tables stay consistent
Provide fallback values with DEFAULT
Avoid NULL errors and enforce required fields

Key Constraints in SQL

Key constraints are special rules that help uniquely identify rows and maintain relationships between tables in a database.

1. PRIMARY KEY

Uniquely identifies each record in a table
Cannot have NULL or duplicate values
Usually used on the id column

CREATE TABLE users (
  id INT PRIMARY KEY,
  name VARCHAR(100)
);

You can only have one PRIMARY KEY per table (can be a single column or a combination of columns).

2. FOREIGN KEY

Creates a relationship between two tables

The value must match a PRIMARY KEY in another table

Ensures referential integrity

CREATE TABLE orders (
  order_id INT PRIMARY KEY,
  user_id INT,
  FOREIGN KEY (user_id) REFERENCES users(id)
);

If a user_id in orders doesn’t exist in the users table, the database will throw an error.

3. COMPOSITE KEY

A PRIMARY KEY that consists of two or more columns

Ensures uniqueness across the combination of values

CREATE TABLE enrollments (
  student_id INT,
  course_id INT,
  PRIMARY KEY (student_id, course_id)
);

Useful when no single column is unique, but a combination is.

Primary Key vs Foreign Key in SQL

Both Primary Keys and Foreign Keys are types of constraints used to manage relationships and ensure data integrity in relational databases.

Primary Key

Uniquely identifies each row in a table.
Must be unique and NOT NULL.
A table can have only one primary key.
Often used on the id column.

Example:

CREATE TABLE users (
  id INT PRIMARY KEY,
  name VARCHAR(100),
  email VARCHAR(100)
);

id is the primary key — each user will have a unique ID.

Foreign Key

Establishes a link between two tables.
Points to a primary key in another table.
Ensures referential integrity (no invalid references).

Example:

CREATE TABLE orders (
  order_id INT PRIMARY KEY,
  user_id INT,
  FOREIGN KEY (user_id) REFERENCES users(id)
);

user_id in orders references id in users.
You can’t insert an order with a user_id that doesn’t exist in users.

INSERT INTO in SQL

The INSERT INTO statement is used to add new rows of data into an existing table.

Basic Syntax

INSERT INTO table_name (column1, column2, ...)
VALUES (value1, value2, ...);

Example: Inserting into users Table

CREATE TABLE users (
  id INT PRIMARY KEY,
  name VARCHAR(100),
  email VARCHAR(100)
);

INSERT INTO users (id, name, email)
VALUES (1, 'Alice', 'alice@mail.com');

Notes

Always match column names with their respective values.
You can omit columns that allow NULL or have default values.
If you’re using AUTO_INCREMENT for id, you can skip it:

SELECT Command in SQL

The SELECT command is used to retrieve data from a database table. It's one of the most commonly used SQL commands.

Basic Syntax

SELECT column1, column2, ...
FROM table_name;

Example: Selecting from a users Table

SELECT * FROM users;

Returns all columns and rows from the users table.

Select Specific Columns

SELECT name, email FROM users;

Fetches only the name and email columns.

SQL `WHERE` Clause

The WHERE clause in SQL is used to filter records based on specific conditions.

It helps retrieve only the rows that meet a defined criteria.

Basic Syntax

SELECT column1, column2, ...
FROM table_name
WHERE condition;

Example: Filter Users by Age

SELECT * FROM users
WHERE age > 25;

Returns users older than 25.

Operators in SQL `WHERE` Clause

Operators in the WHERE clause allow you to filter rows based on conditions. These can include comparisons, pattern matching, null checks, and logical combinations.

1. Comparison Operators

Operator	Description	Example
`=`	Equal to	`age = 30`
`!=`	Not equal to	`name != 'Alice'`
`<>`	Not equal (alternative)	`email <> 'x@mail.com'`
`>`	Greater than	`salary > 50000`
`<`	Less than	`age < 18`
`>=`	Greater than or equal to	`age >= 21`
`<=`	Less than or equal to	`score <= 100`

2. Logical Operators

Operator	Description	Example
`AND`	Both conditions must be true	`age > 25 AND country = 'Canada'`
`OR`	At least one condition must be true	`city = 'Delhi' OR city = 'Mumbai'`
`NOT`	Reverses the result of a condition	`NOT (age < 18)`

3. Special Operators

Operator	Description	Example
`BETWEEN`	Value within a range (inclusive)	`age BETWEEN 20 AND 30`
`IN`	Match any value in a list	`country IN ('India', 'Canada', 'USA')`
`LIKE`	Pattern match using wildcards	`name LIKE 'A%'` (starts with 'A')
`IS NULL`	Checks for NULL	`email IS NULL`
`IS NOT NULL`	Checks for non-NULL	`email IS NOT NULL`

Pattern Matching with `LIKE`

Pattern	Meaning
`'A%'`	Starts with A
`'%z'`	Ends with z
`'%test%'`	Contains 'test' anywhere
`'____'`	Exactly 4 characters
`'A_C'`	Starts with A, any one char, ends with C

Examples

-- Users older than 30
SELECT * FROM users WHERE age > 30;

-- Users named Alice or Bob
SELECT * FROM users WHERE name IN ('Alice', 'Bob');

-- Users with no email
SELECT * FROM users WHERE email IS NULL;

-- Users whose name starts with J
SELECT * FROM users WHERE name LIKE 'J%';

Frequently Used SQL Operators

These are the most commonly used operators when writing SQL queries, especially in the WHERE clause for filtering data.

1. Comparison Operators

Operator	Description	Example
`=`	Equal to	`age = 25`
`!=`	Not equal to	`city != 'Delhi'`
`<>`	Not equal to (same as `!=`)	`status <> 'Active'`
`>`	Greater than	`price > 100`
`<`	Less than	`age < 18`
`>=`	Greater than or equal to	`score >= 75`
`<=`	Less than or equal to	`stock <= 10`

2. Logical Operators

Operator	Description	Example
`AND`	Both conditions must be true	`age > 18 AND country = 'India'`
`OR`	At least one condition must be true	`state = 'NY' OR state = 'CA'`
`NOT`	Reverses the condition	`NOT (category = 'Electronics')`

3. Special Operators

Operator	Description	Example
`BETWEEN`	Within a range	`salary BETWEEN 50000 AND 80000`
`IN`	Match against a list	`department IN ('HR', 'IT', 'Sales')`
`LIKE`	Pattern matching	`name LIKE 'A%'`
`IS NULL`	Checks for empty (null) values	`email IS NULL`
`IS NOT NULL`	Checks for non-null values	`email IS NOT NULL`

Pattern Matching with `LIKE`

Pattern	Description
`'A%'`	Starts with A
`'%z'`	Ends with z
`'%tech%'`	Contains 'tech' anywhere
`'____'`	Exactly 4 characters

Example Usage

SELECT * FROM products
WHERE category = 'Electronics' AND price > 1000;

SELECT * FROM users
WHERE name LIKE 'J%' AND city IN ('Toronto', 'Vancouver');

SELECT * FROM orders
WHERE delivery_date IS NOT NULL;

LIMIT Clause in SQL

The LIMIT clause is used to restrict the number of rows returned by a query.

It's especially useful for pagination or when previewing large datasets.

Basic Syntax

SELECT column1, column2, ...
FROM table_name
LIMIT number;

Example: Get First 5 Rows

SELECT * FROM users
LIMIT 5;

Returns only the first 5 rows from the users table.

LIMIT with OFFSET

Use OFFSET to skip a specific number of rows before starting to return rows.

SELECT * FROM users
LIMIT 5 OFFSET 10;

Skips the first 10 rows and returns the next 5.

Pagination Example

-- Page 1: First 10 results
SELECT * FROM users LIMIT 10 OFFSET 0;

-- Page 2: Next 10 results
SELECT * FROM users LIMIT 10 OFFSET 10;

ORDER BY Clause in SQL

The ORDER BY clause is used to sort the result-set of a query by one or more columns.

Basic Syntax

SELECT column1, column2, ...
FROM table_name
ORDER BY column1 [ASC|DESC];

ASC → Ascending order (default)
DESC → Descending order

Example: Sorting Users by Age (Ascending)

SELECT * FROM users
ORDER BY age;

Sorts users by age in ascending order (youngest first).

Example: Sorting by Age (Descending)

SELECT * FROM users
ORDER BY age DESC;

Returns users sorted from oldest to youngest.

Aggregate Functions in SQL

Aggregate functions perform a calculation on a set of values and return a single value.

They are commonly used with the GROUP BY clause and help summarize data.

Common Aggregate Functions

Function	Description	Example Usage
`COUNT()`	Counts the number of rows	`COUNT(*)`, `COUNT(column_name)`
`SUM()`	Returns the total sum	`SUM(price)`
`AVG()`	Returns the average value	`AVG(score)`
`MIN()`	Returns the minimum value	`MIN(age)`
`MAX()`	Returns the maximum value	`MAX(salary)`

Example Table: `orders`

id	customer	amount
1	Alice	100
2	Bob	150
3	Alice	200
4	Charlie	50

Examples

Count Total Orders

SELECT COUNT(*) FROM orders;

Returns: 4

Total Sales

SELECT SUM(amount) FROM orders;

Returns: 500

GROUP BY Clause in SQL

The GROUP BY clause is used to group rows that have the same values in specified columns, often combined with aggregate functions like COUNT(), SUM(), AVG(), etc.

Basic Syntax

SELECT column_name, AGGREGATE_FUNCTION(column_name)
FROM table_name
GROUP BY column_name;

id	customer	amount
1	Alice	100
2	Bob	150
3	Alice	200
4	Charlie	50

Example: Total Spent by Each Customer

SELECT customer, SUM(amount) AS total_spent
FROM orders
GROUP BY customer;

customer	total_spent
Alice	300
Bob	150
Charlie	50

HAVING Clause in SQL

The HAVING clause is used to filter groups after aggregation — similar to WHERE, but works with GROUP BY.

Syntax

SELECT column_name, AGGREGATE_FUNCTION(column_name)
FROM table_name
GROUP BY column_name
HAVING condition;

HAVING vs WHERE

Clause	Filters	Used With Aggregates?
`WHERE`	Before grouping	❌ No
`HAVING`	After grouping	✅ Yes

id	customer	amount
1	Alice	100
2	Bob	150
3	Alice	200
4	Charlie	50

Example: Customers who Spent More Than 100

SELECT customer, SUM(amount) AS total_spent
FROM orders
GROUP BY customer
HAVING SUM(amount) > 100;

customer	total_spent
Alice	300
Bob	150

General Order of SQL Clauses

When writing SQL queries, there’s a logical order that SQL follows to execute the clauses — which may be different from the order we write them.

Logical Execution Order in SQL

Order	Clause	Purpose
1️⃣	`FROM`	Specifies the table(s) to retrieve data from
2️⃣	`JOIN`	Combines rows from multiple tables
3️⃣	`WHERE`	Filters rows based on a condition
4️⃣	`GROUP BY`	Groups rows for aggregation
5️⃣	`HAVING`	Filters aggregated data
6️⃣	`SELECT`	Specifies which columns to return
7️⃣	`DISTINCT`	Removes duplicate rows
8️⃣	`ORDER BY`	Sorts the result set
9️⃣	`LIMIT` / `OFFSET`	Limits number of rows returned

Example Query

SELECT customer, SUM(amount) AS total_spent
FROM orders
WHERE status = 'completed'
GROUP BY customer
HAVING SUM(amount) > 100
ORDER BY total_spent DESC
LIMIT 5;

Real-Life Analogy

Think of SQL as a pipeline:
Start by picking your data source (FROM)
Filter raw rows (WHERE)
Group them if needed (GROUP BY)
Filter the groups (HAVING)
Choose what to show (SELECT)
Sort it (ORDER BY)
Limit it (LIMIT)

UPDATE Statement in SQL

The UPDATE statement is used to modify existing records in a table.

Basic Syntax

UPDATE table_name
SET column1 = value1, column2 = value2, ...
WHERE condition;

Example: Update a User's Email

UPDATE users
SET email = 'newemail@example.com'
WHERE id = 5;

Updates the email of the user whose ID is 5.

`SET SQL_SAFE_UPDATES = 0;` in MySQL

What is `SQL_SAFE_UPDATES`?

In MySQL, the SQL_SAFE_UPDATES mode prevents accidental updates or deletions by requiring a WHERE clause or a LIMIT clause in UPDATE and DELETE statements.

Safe Updates Mode Enabled (`= 1`)

SET SQL_SAFE_UPDATES = 1;

DELETE Statement in SQL

The DELETE statement is used to remove rows from a table.

Basic Syntax

DELETE FROM table_name
WHERE condition;

Example: Delete a Specific User

DELETE FROM users
WHERE id = 3;

Removes the user with id = 3 from the users table.

ALTER TABLE in SQL

The ALTER TABLE statement is used to modify the structure of an existing table — including adding, deleting, or modifying columns.

Basic Syntax

ALTER TABLE table_name
action;

Add a Column

ALTER TABLE users
ADD phone_number VARCHAR(15);

Drop (Remove) a Column

ALTER TABLE users
DROP COLUMN phone_number;

Rename a Column (MySQL)

ALTER TABLE users
CHANGE COLUMN old_name new_name datatype;

-- Example:
ALTER TABLE users
CHANGE COLUMN fullname full_name VARCHAR(100);

Modify Column Data Type

ALTER TABLE users
MODIFY COLUMN age SMALLINT;

Changes the age column's data type.

Rename Table

RENAME TABLE old_table_name TO new_table_name;

-- Example:
RENAME TABLE customers TO clients;

Add Constraints (e.g., NOT NULL)

ALTER TABLE users
MODIFY COLUMN email VARCHAR(255) NOT NULL;

TRUNCATE TABLE in SQL

The TRUNCATE TABLE statement is used to remove all rows from a table very quickly — while keeping the table structure intact.

Basic Syntax

TRUNCATE TABLE table_name;

Example

TRUNCATE TABLE users;

Deletes all rows from the users table, but does not remove the table itself.

SQL Practice Section

Boost your SQL skills by solving the following practice exercises using a sample users and orders table.

Sample Tables

`users`

id	name	age	country
1	Alice	28	Canada
2	Bob	35	USA
3	Charlie	22	Canada
4	Diana	30	UK

`orders`

id	user_id	product	amount
1	1	Laptop	1200
2	1	Headphones	200
3	2	Monitor	300
4	3	Mouse	50

Beginner Practice

Select all columns from the users table.

SELECT * FROM users;

Select names of users who are over 25.

SELECT name FROM users
WHERE age > 25;

Find all orders with amount > 100.

SELECT * FROM orders
WHERE amount > 100;

Use ORDER BY to sort users by age in descending order.

SELECT * FROM users
ORDER BY age DESC;

Intermediate Practice

Count how many users are from Canada.

SELECT COUNT(*) AS canada_users
FROM users
WHERE country = 'Canada';

Get the total amount spent by each user.

SELECT user_id, SUM(amount) AS total_spent
FROM orders
GROUP BY user_id;

Find the average age of all users.

SELECT AVG(age) AS avg_age
FROM users;

List users who haven't placed an order. (Hint: LEFT JOIN)

SELECT u.*
FROM users u
LEFT JOIN orders o ON u.id = o.user_id
WHERE o.id IS NULL;

Advanced Practice

Write a query to display the highest order amount for each user.

SELECT user_id, MAX(amount) AS max_order
FROM orders
GROUP BY user_id;

Update Bob’s age to 36.

UPDATE users
SET age = 36
WHERE name = 'Bob';

Delete users from the UK.

DELETE FROM users
WHERE country = 'UK';

Truncate the orders table.

TRUNCATE TABLE orders;

Practice makes perfect. Try solving these using a SQL playground or your local database setup.

SQL JOINS

In relational databases, JOINS are used to combine rows from two or more tables based on a related column between them.

Sample Tables

`users` Table

id	name
1	Alice
2	Bob
3	Carol

`orders` Table

id	user_id	product
1	1	Laptop
2	2	Monitor
3	4	Mouse

INNER JOIN

Returns only matching rows from both tables.

SELECT users.name, orders.product
FROM users
INNER JOIN orders ON users.id = orders.user_id;

LEFT JOIN

Returns all rows from the left table and matching rows from the right table. Fills in NULL where there's no match.

SELECT users.name, orders.product
FROM users
LEFT JOIN orders ON users.id = orders.user_id;

RIGHT JOIN

Returns all rows from the right table and matching rows from the left table.

SELECT users.name, orders.product
FROM users
RIGHT JOIN orders ON users.id = orders.user_id;

FULL OUTER JOIN

Returns all rows from both tables, filling in NULL where there's no match.
Not supported in MySQL directly — use UNION.

SELECT users.name, orders.product
FROM users
LEFT JOIN orders ON users.id = orders.user_id
UNION
SELECT users.name, orders.product
FROM users
RIGHT JOIN orders ON users.id = orders.user_id;

SELF JOIN

Joins a table to itself. Useful for hierarchical data (e.g., employees & managers).

Example: Employees with Managers

SELECT a.name AS employee, b.name AS manager
FROM employees a
JOIN employees b ON a.manager_id = b.id;

When to use each join

Type	Use Case Example
INNER JOIN	Get orders made by users
LEFT JOIN	Show all users, even if they didn’t order
RIGHT JOIN	Show all orders, even without known users
FULL JOIN	Get complete list of users and orders
SELF JOIN	Compare rows in the same table (e.g., hierarchy)

SQL Subqueries

A subquery (also known as an inner query or nested query) is a query inside another query.

You can use subqueries in:

SELECT clause
FROM clause
WHERE clause

Subquery in SELECT

SELECT name,
  (SELECT COUNT(*) FROM orders WHERE orders.user_id = users.id) AS total_orders
FROM users;

Subquery in WHERE

SELECT name FROM users
WHERE id IN (
  SELECT user_id FROM orders WHERE product = 'Laptop'
);

Returns users who bought a Laptop.

Subquery in FROM

SELECT avg_orders.user_id, avg_orders.avg_amount
FROM (
  SELECT user_id, AVG(amount) AS avg_amount
  FROM orders
  GROUP BY user_id
) AS avg_orders
WHERE avg_orders.avg_amount > 100;

Gets users whose average order amount is greater than 100.

SubQuery vs Join

Feature	JOIN	Subquery
Speed	Often faster with large data	Slower for deeply nested logic
Readability	More intuitive for relations	Better for calculated/aggregated fields
Flexibility	Less flexible in nested logic	Powerful filtering, calculations

Views in SQL

A View is a virtual table based on the result of a SELECT query. It doesn't store data itself — it displays data from other tables.

Why Use Views?

Simplify complex queries
Enhance security (restrict access to certain columns)
Present data in a customized format

Create a View

CREATE VIEW user_orders AS
SELECT users.name, orders.product
FROM users
JOIN orders ON users.id = orders.user_id;

Query a View

SELECT * FROM user_orders;

Indexes in SQL

An Index is like a book’s table of contents — it helps the database find rows faster without scanning the entire table.

Why Use Indexes?

🔍 Speeds up SELECT queries using WHERE, JOIN, ORDER BY, etc.
⚠️ Slightly slows down INSERT, UPDATE, and DELETE (due to index maintenance)

Create an Index

CREATE INDEX idx_user_name
ON users(name);

Use it just like a regular table.

Using Indexes Automatically

Once created, the database engine decides when to use the index. You don’t have to change your SQL queries.

SELECT * FROM users WHERE name = 'Alice';

If name is indexed, this runs faster!

Best Practices

Tip	Reason
Index columns used in WHERE	Faster lookups
Avoid over-indexing	Wastes memory + slows writes
Use composite indexes wisely	Order matters (leftmost prefix)
Don’t index frequently updated columns	Poor performance

Transactions in SQL

A Transaction is a sequence of operations performed as a single logical unit of work. Either all operations succeed, or none take effect.

Why Use Transactions?

Maintain data integrity
Useful for banking, inventory, batch updates
Prevents partial updates if something goes wrong

ACID Properties

Property	Meaning
A — Atomicity	All or nothing
C — Consistency	DB remains valid before/after
I — Isolation	No interference from others
D — Durability	Changes survive failures

Transaction Syntax (MySQL)

START TRANSACTION;

UPDATE accounts SET balance = balance - 100 WHERE id = 1;
UPDATE accounts SET balance = balance + 100 WHERE id = 2;

COMMIT;

COMMIT saves changes to the database.

Rollback a Transaction

START TRANSACTION;

UPDATE accounts SET balance = balance - 100 WHERE id = 1;

-- Simulate error
ROLLBACK;

ROLLBACK undoes everything in the transaction block.

Autocommit Mode

In MySQL, autocommit is ON by default, meaning every query is treated as its own transaction.

Disable it manually if needed:

SET autocommit = 0;

Use Cases

Banking systems
E-commerce orders
Stock updates
Any multi-step update where failure in one step should undo all

CASE Statement in SQL

The CASE statement allows you to add conditional logic inside SQL queries — similar to if...else.

Basic Syntax

SELECT name,
  CASE
    WHEN age < 18 THEN 'Minor'
    WHEN age BETWEEN 18 AND 60 THEN 'Adult'
    ELSE 'Senior'
  END AS age_group
FROM users;

Example with SELECT

SELECT name, country,
  CASE country
    WHEN 'Canada' THEN 'CA'
    WHEN 'United States' THEN 'US'
    ELSE 'Other'
  END AS country_code
FROM users;

Transforms country names into short codes.

UNION vs UNION ALL in SQL

UNION and UNION ALL are used to combine the results of two or more SELECT queries into a single result set.

UNION

Removes duplicate rows
Sorts results by default
Slower than UNION ALL (because of deduplication)

SELECT name FROM customers
UNION
SELECT name FROM vendors;

Returns a combined list of unique names from both tables.

UNION ALL

Keeps all rows (including duplicates)
Faster (no deduplication)

SELECT name FROM customers
UNION ALL
SELECT name FROM vendors;

Returns all names, including duplicates.

EXISTS vs IN in SQL

Both EXISTS and IN are used in WHERE clauses to filter data based on subquery results, but they work differently under the hood.

IN — Check if a value is in a list

SELECT name FROM users
WHERE id IN (
SELECT user_id FROM orders
);

EXISTS — Checks if a row exists (faster with large datasets)

SELECT name FROM users u
WHERE EXISTS (
  SELECT 1 FROM orders o
  WHERE o.user_id = u.id
);

Returns users where at least one matching order exists.

Difference

Feature	IN	EXISTS
Works with	List of values	Subquery with correlated condition
Performance	Slower with large result sets	Faster with large, indexed tables
Subquery evaluated	First (gets full list)	Row-by-row (stops on first match)
Can return NULLs	May fail if subquery has NULLs	Works fine

Caution: NULL behavior

SELECT name FROM users
WHERE id IN (NULL); -- ❌ No results (not even NULL match)

SELECT name FROM users
WHERE EXISTS (SELECT 1); -- ✅ Always true if subquery returns a row

Common Table Expressions (CTEs) in SQL

A CTE (Common Table Expression) is a temporary named result set that you can reference within a SELECT, INSERT, UPDATE, or DELETE statement.

Defined using the WITH keyword.

Basic Syntax

WITH temp_table AS (
  SELECT user_id, COUNT(*) AS order_count
  FROM orders
  GROUP BY user_id
)
SELECT users.name, temp_table.order_count
FROM users
JOIN temp_table ON users.id = temp_table.user_id;

The CTE temp_table holds aggregated order data for each user.

Why Use CTEs?

Improves readability
Reuses logic without repeating subqueries
Helps break complex queries into parts

Recursive CTE Example (Advanced)

Use recursion to query hierarchical data (e.g., employees & managers):

WITH RECURSIVE employee_hierarchy AS (
  SELECT id, name, manager_id
  FROM employees
  WHERE manager_id IS NULL

  UNION ALL

  SELECT e.id, e.name, e.manager_id
  FROM employees e
  JOIN employee_hierarchy eh ON e.manager_id = eh.id
)
SELECT * FROM employee_hierarchy;

Builds a tree-like structure of employees reporting to managers.

CTE vs SubQuery

Feature	CTE	Subquery
Readability	✅ High	❌ Can get messy
Reuse	✅ Yes (name it once)	❌ No reuse
Recursion	✅ Supports recursive queries	❌ Not supported

🎉 Guide Complete!

You've made it to the end of this comprehensive SQL guide — great job! 🚀

Whether you're just starting out or brushing up your skills, remember:

🧠 Practice is the key to mastery.

Apply what you've learned by solving real-world problems, building projects, or exploring sample databases.

✅ Next Steps:

Revisit tricky topics
Solve all practice exercises

💬 Have questions or want more content like this?

Leave a comment or follow

Stay consistent, keep practicing, and happy querying! 🧑‍💻

Web Dev Day 8: Backend - NodeJS, Express, Ejs, REST (Part - 1)

Bhupesh Kumar — Tue, 03 Jun 2025 00:41:28 +0000

What is Node.js?

Node.js is a runtime environment that allows you to run JavaScript outside of the browser — on the server-side.

1. Simple Definition

Node.js lets you use JavaScript to build server-side applications, command-line tools, and backend services.

It’s built on Google Chrome’s V8 JavaScript engine, which makes it fast, efficient, and lightweight.

2. Key Features of Node.js

Feature	Description
🧠 JavaScript Runtime	Runs JS outside the browser
⚡ Non-blocking I/O	Handles many requests without waiting (asynchronous)
🧵 Single-threaded	Uses event loop & callbacks for concurrency
📦 npm	Built-in package manager with 2M+ packages
💡 Cross-platform	Works on Windows, macOS, Linux

3. What Can You Build with Node.js?

Web servers and APIs (REST, GraphQL)
Real-time apps (chat, live dashboards)
Command-line tools (CLI utilities)
Microservices
Backend logic for web/mobile apps
File system and automation scripts

4. Basic Node.js Code Example

// hello.js
console.log("Hello from Node.js!");

Run it with:

node hello.js

Output:

Hello from Node.js!

5. Node.js vs Browser JavaScript

Feature Browser JS Node.js
Environment Web browser Server, terminal, backend
Access to DOM ✅ Yes ❌ No
File system access ❌ No ✅ Yes
Modules ES modules or script tags CommonJS (require), ES modules
Purpose UI & frontend behavior Backend, APIs, CLI tools

6. What is npm?

npm = Node Package Manager
It comes with Node.js and lets you install libraries and frameworks.

Example:

npm install express

This installs Express.js, a popular web framework for Node.

7. Why Use Node.js?

JavaScript everywhere (frontend + backend)
Fast performance (V8 engine)
Scalable with event-driven model
Great for building APIs and real-time apps
Huge ecosystem with npm packages

Node.js REPL – Read Eval Print Loop

REPL stands for Read-Eval-Print Loop.

It’s an interactive environment that comes with Node.js where you can:

Type JavaScript code
Execute it immediately
See the result instantly

1. What is REPL?

REPL is like a JavaScript playground in your terminal.

It allows you to experiment with code, test logic, and explore Node.js features in real time.

2. How to Start the Node REPL

Open your terminal and type:

node

Working with Files in Node.js

Node.js provides the built-in fs (File System) module to let you read, write, update, and delete files directly from your code.

The `process` Object in Node.js

In Node.js, the global process object provides information and control over the current Node.js process.

1. What is `process`?

The process object is a built-in global object in Node.js.

It provides methods and properties to interact with the system, handle input/output, and control execution flow.

2. Accessing Command Line Arguments

console.log(process.argv);

process.argv is an array containing:

The Node executable path
The script file path
Any additional arguments

Example:

node app.js hello world

Output:

[
  '/usr/bin/node',
  '/path/to/app.js',
  'hello',
  'world'
]

You can access them like:

const args = process.argv.slice(2);
console.log("User input:", args);

Exporting in Node.js Files

In Node.js, modular programming is achieved using the CommonJS module system, which allows you to export and import code between files.

1. Why Use `exports`?

Organize code into smaller reusable files
Share functions, variables, classes, or objects
Keep your codebase clean and maintainable

2. Basic Export with `module.exports`

`math.js` (export file)

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

function subtract(a, b) {
  return a - b;
}

module.exports = {
  add,
  subtract
};

app.js (import file)

const math = require('./math');

console.log(math.add(5, 3));       // 8
console.log(math.subtract(10, 4)); // 6

Exporting from Directories in Node.js

In Node.js, when you organize code across multiple files inside a folder, you can simplify importing by exporting from the directory itself using an index.js file.

1. Why Export from a Directory?

Group related modules (e.g., User, Auth, Utils)
Avoid long import paths
Simplify the import statement with a single entry point

2. Directory Structure Example

/utils
├── add.js
├── subtract.js
└── index.js

`add.js`

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

module.exports = add;

subtract.js

function subtract(a, b) {
  return a - b;
}

module.exports = subtract;

index.js (in /utils folder)

const add = require('./add');
const subtract = require('./subtract');

module.exports = {
  add,
  subtract
};

3. Importing from the Directory

const utils = require('./utils');

console.log(utils.add(5, 3));       // 8
console.log(utils.subtract(10, 4)); // 6

Node will automatically look for index.js when you require('./folder').

What is npm?

npm stands for Node Package Manager.

It is the default package manager for Node.js, used to:

Install libraries and tools
Manage dependencies
Publish your own packages

1. Key Facts About npm

Feature	Description
🧠 Name	Node Package Manager
📂 Comes With	Node.js installation (`node -v`, `npm -v`)
🌍 Registry	https://www.npmjs.com (over 2 million packages)
📦 File Used	`package.json` to manage project dependencies
📥 Install Packages	`npm install <package-name>`
📤 Publish Package	`npm publish`

2. Installing a Package

In Node.js, you can install external libraries (packages) using npm (Node Package Manager).

npm install <package-name>

Adds it to the node_modules folder.
Adds it to dependencies in package.json (if --save or default).

Understanding `package.json` in Node.js

The package.json file is the heart of any Node.js project.

It stores metadata about the project and manages its dependencies, scripts, and configuration.

1. Why `package.json` Matters

📂 Describes your project (name, version, author, license)
📦 Tracks installed packages (dependencies & devDependencies)
⚙️ Defines scripts for tasks (start, test, build)
🧩 Required to publish a package to npm

2. How to Create `package.json`

npm init

3. Example package.json

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "A sample Node.js project",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js",
    "test": "echo \"No tests yet\""
  },
  "author": "Bhupesh Kumar",
  "license": "MIT",
  "dependencies": {
    "express": "^4.18.2"
  },
  "devDependencies": {
    "nodemon": "^2.0.22"
  }
}

Local vs Global Installation in npm

When installing packages with npm, you can choose between:

Local Installation: For a specific project
Global Installation: Available system-wide (all projects)

Local Installation

Command:

npm install <package-name>

Example:

npm install express

Where It Goes:

Installed inside the project’s node_modules/ folder
Listed in package.json under "dependencies" or "devDependencies"

Use When:

The package is only needed for a specific project
You want different versions in different projects

Global Installation

Command:

npm install -g <package-name>

Example:

npm install -g nodemon

Where It Goes:

Installed in a system-wide folder
Can be run from any terminal, any directory

Use When:

Package is a command-line tool (e.g., nodemon, http-server, eslint)
You want it available globally

Checking Install Type

List global packages:

npm list -g --depth=0

List local project packages:

npm list --depth=0

Importing Modules in Node.js

Node.js follows a modular architecture, where you can import and reuse code across files using the require() function or the modern import statement (ES Modules).

1. CommonJS Syntax (`require`)

Importing a File:

const math = require('./math');

2. ES Module Syntax (import)

Use this syntax when "type": "module" is set in package.json.

Import Default Export:

import express from 'express';

Import Named Export:

import { add, subtract } from './math.js';

Import Everything:

import * as utils from './utils.js';

What is Express.js?

Express.js is a minimal and flexible Node.js web application framework that provides a robust set of features for building web applications and APIs.

It simplifies the process of handling routes, requests, middleware, and server logic in Node.js.

1. Why Use Express?

Feature	Benefit
🧩 Middleware support	Add custom functionality easily
📦 Routing system	Handle URL endpoints with clean syntax
⚙️ Simplified server setup	No need to write verbose Node.js HTTP code
🌐 REST API building	Perfect for backend APIs and microservices
🛠 Integrations	Easily integrates with MongoDB, MySQL, templating engines

2. Installing Express

npm install express

3. Basic Express Server

const express = require('express');
const app = express();

// Route
app.get('/', (req, res) => {
  res.send('Hello from Express!');
});

// Start server
app.listen(3000, () => {
  console.log('🚀 Server running on http://localhost:3000');
});

Library vs Framework in JavaScript

Understanding the difference between a library and a framework is essential for every developer. They both help you write better code, but they do so in different ways.

1. Definition

Concept	Description
📚 Library	A collection of reusable functions or modules that you call as needed.
🏗 Framework	A structured platform that dictates the architecture and flow of your app.

2. Control Flow: Inversion of Control

This is the main difference:

Feature	Library	Framework
Who’s in charge?	You call the library code	Framework calls your code
Control Flow	You remain in control	Framework is in control

3. Examples

Library	Description
Lodash	Utility functions for arrays, objects, etc.
Axios	HTTP request library
jQuery	DOM manipulation library

Framework	Description
Express.js	Web framework for Node.js
Angular	Full-fledged frontend framework
Next.js	Framework for React apps

4. Real-life Analogy

A library is like ordering à la carte at a restaurant — you choose what you want and when.

A framework is like a fixed menu — it decides the courses and when you get them.

5. Summary Table

Feature	Library	Framework
Control	You call the code	It calls your code
Flexibility	High	Less, follows set structure
Learning curve	Generally lower	Can be higher
Examples	Lodash, Axios, jQuery	Express, Angular, Next.js

Final Thoughts

Use a library when you need specific functionality without strict rules.
Use a framework when you need a complete structure and guidelines for building your app.

✨ “Libraries are helpers. Frameworks are architects.”

Handling Requests in Express.js

Express.js makes it easy to handle different types of HTTP requests (GET, POST, PUT, DELETE, etc.) using intuitive routing methods.

1. Basic Structure of a Route

app.METHOD(PATH, HANDLER)

Sending a Response in Express.js

In Express.js, you use the res (response) object to send data back to the client.

This response could be text, HTML, JSON, status codes, or redirects.

1. `res.send()`

Sends a plain text or HTML response.

app.get('/', (req, res) => {
  res.send('Hello from Express!');
});

Routing in Express.js

Routing in Express refers to how an application responds to client requests for a particular endpoint (URI + HTTP method).

1. Basic Route Syntax

app.METHOD(PATH, HANDLER)

METHOD: HTTP verb like GET, POST, etc.
PATH: Route path
HANDLER: Callback function (req, res)

2. Example Routes

app.get('/', (req, res) => {
  res.send('Home Page');
});

app.post('/submit', (req, res) => {
  res.send('Form Submitted');
});

app.put('/update', (req, res) => {
  res.send('Update Successful');
});

app.delete('/delete', (req, res) => {
  res.send('Deleted Successfully');
});

3. Route Parameters

Used to capture values from the URL.

app.get('/users/:id', (req, res) => {
  res.send(`User ID: ${req.params.id}`);
});

4. Query Parameters

Used to pass optional key-value pairs in the URL.

app.get('/search', (req, res) => {
  res.send(`You searched for: ${req.query.q}`);
});

URL Example: /search?q=express

5. Multiple Handlers

app.get('/demo',
  (req, res, next) => {
    console.log('Middleware 1');
    next();
  },
  (req, res) => {
    res.send('Final Response');
  }
);

Installing and Using Nodemon in Node.js

Nodemon is a utility that automatically restarts your Node.js application whenever file changes are detected. It boosts productivity during development.

1. What is Nodemon?

Monitors your project files.
Automatically restarts the server on save.
Ideal for development (not used in production).

2. Installing Nodemon

Local Installation (recommended)

npm install --save-dev nodemon

Path Parameters in Express.js

Path parameters (also called route parameters) allow you to capture dynamic values from the URL path and use them inside your route handler.

1. What are Path Parameters?

Path parameters are defined using a colon (:) followed by a name in the route path.

They are useful for handling dynamic URLs, such as /users/123 or /products/456.

2. Basic Syntax

app.get('/users/:id', (req, res) => {
  const userId = req.params.id;
  res.send(`User ID is: ${userId}`);
});

Query Strings in Express.js

Query strings are key-value pairs added to the end of a URL to send optional parameters to the server.

They appear after a ? and are separated by &.

1. What is a Query String?

URL Example: http://localhost:3000/search?term=express&limit=10

Here:

term = express
limit = 10

2. Accessing Query Strings in Express

Use the req.query object to access query string parameters.

Example:

app.get('/search', (req, res) => {
  const { term, limit } = req.query;
  res.send(`Search Term: ${term}, Limit: ${limit}`);
});

If user visits:

http://localhost:3000/search?term=express&limit=5

Output:

Search Term: express, Limit: 5

Templating in Express.js

Templating allows you to generate dynamic HTML pages in Express by embedding server-side data into frontend code using template engines.

1. What is a Template Engine?

A template engine enables you to render dynamic content on the server before sending it to the client.

Popular engines include:

EJS (Embedded JavaScript)
Pug (formerly Jade)
Handlebars

2. Installing a Template Engine (Example: EJS)

EJS (Embedded JavaScript Templates) is a simple templating language that lets you generate HTML markup with plain JavaScript.

npm install ejs

3. Setting Up EJS with Express

const express = require('express');
const app = express();

// Set EJS as the template engine
app.set('view engine', 'ejs');

// Optional: set views folder
app.set('views', './views');

4. Creating a View File

Create a file: views/home.ejs

<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
</head>
<body>
  <h1>Hello, <%= user %>!</h1>
</body>
</html>

5. Rendering the View

app.get('/', (req, res) => {
  res.render('home', {
    title: 'Welcome Page',
    user: 'Bhupesh'
  });
});

Output HTML sent to browser:

<h1>Hello, Bhupesh!</h1>

Views Directory in Express.js

In Express.js, the views directory is where your template (view) files are stored when using a templating engine like EJS, Pug, or Handlebars.

1. Default Views Directory

By default, Express looks for views in a folder named views in the project root.

2. Customizing the Views Directory

You can change the default views folder using:

app.set('views', './templates');

Interpolation Syntax in EJS

Interpolation in EJS (Embedded JavaScript) allows you to embed dynamic data into your HTML templates. This makes it easy to render server-side data directly in your views.

1. Basic Interpolation

<h1>Hello, <%= name %>!</h1>

<%= %> outputs the value of a variable with HTML escaping.
Useful for injecting safe, dynamic content.

Example:

res.render('home', { name: 'Bhupesh' });

Rendered HTML:

<h1>Hello, Bhupesh!</h1>

Syntax	Purpose
`<%= %>`	Output with HTML escaping
`<%- %>`	Output without escaping (raw HTML)
`<% %>`	JavaScript logic (no output)

Passing Data to EJS Templates in Express.js

When using EJS as your view engine, you can easily pass data from your Express routes to the EJS template for dynamic rendering.

1. Basic Syntax

res.render('templateName', dataObject);

2. Example

Route (Express)

app.get('/', (req, res) => {
  res.render('home', { username: 'Bhupesh', loggedIn: true });
});

Template (views/home.ejs)

<h1>Welcome, <%= username %>!</h1>

<% if (loggedIn) { %>
  <p>You are logged in.</p>
<% } else { %>
  <p>Please log in to continue.</p>
<% } %>

Output in browser:

Welcome, Bhupesh!
You are logged in.

Concept	Syntax/Usage
Basic	`res.render('view', { key: value })`
Access in EJS	`<%= key %>`
Arrays/Objects	Loop through with `<% %>`
Conditional Logic	`<% if (...) { %>`

Conditional Statements in EJS

EJS (Embedded JavaScript) allows you to write JavaScript logic directly in your HTML templates using special tags.

1. Basic `if` Statement

<% if (user) { %>
  <h2>Welcome, <%= user %>!</h2>
<% } %>

Syntax	Purpose
`<% if () { %>`	Run JavaScript conditionally
`<% } else { %>`	Alternative block
`<%= %>`	Output escaped value
`<%- %>`	Output unescaped (raw HTML) value

Loops in EJS

EJS allows you to use JavaScript loops to dynamically render lists, tables, and repeated elements in your HTML.

1. `forEach` Loop

Commonly used to iterate over arrays in EJS templates.

<ul>
  <% items.forEach(item => { %>
    <li><%= item %></li>
  <% }) %>
</ul>

Classic for Loop

You can use a standard JavaScript for loop too:

<ul>
  <% for(let i = 0; i < items.length; i++) { %>
    <li><%= items[i] %></li>
  <% } %>
</ul>

Feature	Syntax Example
`forEach` loop	`<% items.forEach(item => { %>`
Classic `for` loop	`<% for (let i = 0; i < n; i++) { %>`
Output value	`<%= item %>`
JS logic only	`<% %>`

Serving Static Files in EJS with Express

To use images, CSS, JS, or other static assets in your EJS templates, Express provides a built-in way to serve static files using express.static().

1. Set Up the Static Directory

Create a folder named public (or any name you prefer):

project/
├── public/
│ ├── css/
│ │ └── style.css
│ ├── js/
│ │ └── script.js
│ └── images/
│ └── logo.png
├── views/
│ └── home.ejs
├── index.js
└── package.json

✅ 2. Serve Static Files with Express

In your index.js or app.js:

const express = require('express');
const app = express();

// Serve static files from the "public" directory
app.use(express.static('public'));

app.set('view engine', 'ejs');
app.set('views', './views');

app.get('/', (req, res) => {
  res.render('home');
});

3. Use Static Files in EJS

Linking a CSS File

<!-- views/home.ejs -->
<link rel="stylesheet" href="/css/style.css">

Adding a JS File

<script src="/js/script.js"></script>

Using an Image

<img src="/images/logo.png" alt="Logo">

EJS Includes

EJS supports file inclusion using the <%- include() %> syntax. This allows you to reuse common components like headers, footers, navbars, etc., across multiple pages.

1. Basic Syntax

<%- include('filename') %>

2. Example Folder Structure

project/
├── views/
│   ├── partials/
│   │   ├── header.ejs
│   │   └── footer.ejs
│   ├── pages/
│   │   └── home.ejs
│   └── layout.ejs
├── index.js

3. Using Partials in a Page

pages/home.ejs

<%- include('../partials/header') %>

<h2>Welcome to the Home Page</h2>
<p>This is dynamic content for the homepage.</p>

<%- include('../partials/footer') %>

GET and POST Requests in Express.js

Express.js supports different types of HTTP requests, with GET and POST being the most commonly used.

1. GET Request

Used to retrieve data from the server. Typically triggered by clicking a link or visiting a URL.

Route Definition:

app.get('/greet', (req, res) => {
  res.send('Hello from GET!');
});

Access Query Parameters:

// URL: /search?term=express
app.get('/search', (req, res) => {
  const { term } = req.query;
  res.send(`You searched for: ${term}`);
});

2. POST Request

Used to send data to the server, often from forms.

You must use express.urlencoded() middleware to parse form data.

Enable Form Data Parsing:

app.use(express.urlencoded({ extended: true }));

Route Definition:

app.post('/submit', (req, res) => {
  const { name } = req.body;
  res.send(`Form submitted by ${name}`);
});

HTML Form Example (EJS):

<form action="/submit" method="POST">
  <input type="text" name="name" placeholder="Enter your name" />
  <button type="submit">Submit</button>
</form>

Handling POST Requests in Express.js

A POST request is used to send data from the client to the server. It is commonly used in form submissions and APIs.

1. Enabling Body Parsing

To read form data or JSON from req.body, use the following middlewares:

const express = require('express');
const app = express();

// Middleware to parse URL-encoded form data
app.use(express.urlencoded({ extended: true }));

// Middleware to parse JSON data
app.use(express.json());

2. Basic POST Route

app.post('/submit', (req, res) => {
  const { name, email } = req.body;
  res.send(`Received: ${name}, ${email}`);
});

3. Example Form (HTML or EJS)

<form action="/submit" method="POST">
  <input type="text" name="name" placeholder="Enter your name" />
  <input type="email" name="email" placeholder="Enter your email" />
  <button type="submit">Submit</button>
</form>

What is REST?

REST stands for Representational State Transfer. It is a software architectural style used to design scalable, stateless, and cacheable web services.

Key Concepts of REST:

Client-Server Architecture
- Separation of concerns: client (frontend) handles UI, server (backend) handles data and logic.
Stateless
- Each request from the client contains all the information needed to process the request.
- The server does not remember any client context between requests.
Cacheable
- Responses must explicitly indicate if they are cacheable or not to improve performance.
Uniform Interface
- A consistent way of interacting with resources using standard HTTP methods:
  - GET: Retrieve data
  - POST: Create data
  - PUT: Update data
  - DELETE: Remove data
Layered System
- Architecture composed of hierarchical layers, allowing load balancers, security layers, etc.
Resource-Based
- Everything is considered a resource (e.g., users, posts, products).
- Resources are identified using URIs (Uniform Resource Identifiers).

Example of RESTful API:

GET /users → Get all users
GET /users/5 → Get user with ID 5
POST /users → Create a new user
PUT /users/5 → Update user with ID 5
DELETE /users/5 → Delete user with ID 5

REST vs RESTful

REST is the architectural style.
RESTful APIs are web services that follow the REST principles.

Summary

Term	Meaning
REST	Design principle for APIs
Stateless	No session data stored on server
Resource	Data like users, posts, etc. accessed via URI
HTTP Methods	GET, POST, PUT, DELETE, etc.

CRUD Operations in Web Development

CRUD stands for the four basic types of operations you can perform on persistent data in most applications:

Create | Read | Update | Delete

These operations are the foundation of working with databases, APIs, and RESTful services.

1. Create (POST)

Used to add new data to a database or resource.

Example (REST API):

POST /users

Sample Request Body:

{
  "name": "Bhupesh",
  "email": "bhupesh@example.com"
}

2. Read (GET)

Used to retrieve data from the server.

GET /users          // Get all users
GET /users/123      // Get user with ID 123

3. Update (PUT / PATCH)

Used to modify existing data.

PUT: Replaces the entire resource
PATCH: Updates part of the resource

PUT /users/123

Sample Request Body:

{
  "name": "Bhupesh Kumar",
  "email": "bhupesh@example.com"
}

4. Delete (DELETE)

Used to remove data from the server.

Example:

DELETE /users/123

Creating RESTful APIs with Express.js

A RESTful API uses HTTP methods to perform CRUD operations on resources. Express.js makes it easy to build these APIs in Node.js.

Step 1: Setup

1. Initialize Project

npm init -y
npm install express

2. Create app.js

const express = require('express');
const app = express();
const PORT = 3000;

app.use(express.json()); // Middleware to parse JSON

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

Step 2: Define In-Memory Data

let users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bhupesh" }
];

Step 3: Create RESTful Routes

1. GET All Users

app.get('/users', (req, res) => {
  res.json(users);
});

2. GET User by ID

app.get('/users/:id', (req, res) => {
  const user = users.find(u => u.id === parseInt(req.params.id));
  user ? res.json(user) : res.status(404).send("User not found");
});

3. POST Create New User

app.post('/users', (req, res) => {
  const newUser = {
    id: users.length + 1,
    name: req.body.name
  };
  users.push(newUser);
  res.status(201).json(newUser);
});

4. PUT Update User

app.put('/users/:id', (req, res) => {
  const user = users.find(u => u.id === parseInt(req.params.id));
  if (user) {
    user.name = req.body.name;
    res.json(user);
  } else {
    res.status(404).send("User not found");
  }
});

5. DELETE User

app.delete('/users/:id', (req, res) => {
  users = users.filter(u => u.id !== parseInt(req.params.id));
  res.send("User deleted");
});

Index Route in RESTful APIs

What is an Index Route?

The index route is the endpoint that returns a list of all resources of a particular type.

It usually responds to a GET request at the root of a resource path.

Create and New Routes in RESTful APIs

In a RESTful API, "Create" and "New" routes are used to add new resources to a collection.

1. New Route

The New route is used to display a form (typically in server-rendered apps) to collect data for creating a new resource.

🚫 Not commonly used in API-only backends — more relevant for apps using templating engines like EJS or Pug.

Route Pattern:

GET /users/new

Redirects in Express.js

In Express.js, the res.redirect() method is used to redirect the client to a different URL.

Syntax

res.redirect([statusCode], path)

Example

app.get('/', (req, res) => {
  res.send('Welcome to the homepage!');
});

app.get('/home', (req, res) => {
  res.redirect('/');  // Redirect to homepage
});

Show Route in RESTful APIs

The Show Route is used to retrieve and display a single resource based on its unique identifier (usually an id).

Purpose

Fetch details of a specific item
Common in detail views (e.g., user profile, blog post, product page)

URL Pattern

GET /resources/:id

Example

app.get('/users/:id', (req, res) => {
  const userId = parseInt(req.params.id);
  const user = users.find(u => u.id === userId);

  if (user) {
    res.json(user);
  } else {
    res.status(404).send("User not found");
  }
});

Creating Unique IDs for Posts using UUID in Express.js

To uniquely identify each post or record in your API, you can use UUIDs (Universally Unique Identifiers) instead of simple numeric IDs.

Why Use UUID?

Universally unique across systems
Safer than incremental IDs
Great for distributed applications

Step 1: Install UUID Library

npm install uuid

Step 2: Import and Use UUID

const express = require('express');
const { v4: uuidv4 } = require('uuid');

const app = express();
app.use(express.json());

let posts = [];

Step 3: Create a Post with UUID

app.post('/posts', (req, res) => {
  const newPost = {
    id: uuidv4(),
    title: req.body.title,
    content: req.body.content
  };

  posts.push(newPost);
  res.status(201).json(newPost);
});

Step 4: Show a Post by UUID

app.get('/posts/:id', (req, res) => {
  const post = posts.find(p => p.id === req.params.id);
  if (post) {
    res.json(post);
  } else {
    res.status(404).json({ message: "Post not found" });
  }
});

Example Output

{
  "id": "a12f4a1b-9f34-432a-b23d-8dfd0fe7a239",
  "title": "My First Post",
  "content": "This is my first post using UUID!"
}

Update Route in RESTful APIs

The Update Route allows you to modify an existing resource. It uses either the PUT or PATCH HTTP method.

When to Use PUT vs PATCH

Method	Description
`PUT`	Replaces the entire resource
`PATCH`	Updates part of the resource (partial)

URL Pattern

PUT /posts/:id
PATCH /posts/:id

Example in Express.js

Assume we are working with an array of posts:

let posts = [
  { id: "1", title: "Old Title", content: "Old content" }
];

PUT Example (Full Update)

app.put('/posts/:id', (req, res) => {
  const post = posts.find(p => p.id === req.params.id);
  if (post) {
    post.title = req.body.title;
    post.content = req.body.content;
    res.json(post);
  } else {
    res.status(404).json({ message: "Post not found" });
  }
});

PATCH Example (Partial Update)

app.patch('/posts/:id', (req, res) => {
  const post = posts.find(p => p.id === req.params.id);
  if (post) {
    if (req.body.title) post.title = req.body.title;
    if (req.body.content) post.content = req.body.content;
    res.json(post);
  } else {
    res.status(404).json({ message: "Post not found" });
  }
});

Sample Request Body (for PUT)

{
  "title": "Updated Title",
  "content": "Updated content goes here"
}

Edit Route in RESTful APIs

The Edit Route is typically used in server-rendered applications (like those using EJS or Pug) to display a form pre-filled with existing data, allowing a user to make changes to a resource.

⚠️ Note: This is different from the Update Route, which actually performs the data update.

Purpose

Render a form to edit a resource (like a post or user)
Pre-populate form fields with current data

URL Pattern

GET /posts/:id/edit

Example in Express.js with EJS

app.get('/posts/:id/edit', (req, res) => {
  const post = posts.find(p => p.id === req.params.id);
  if (post) {
    res.render('editPost', { post });
  } else {
    res.status(404).send("Post not found");
  }
});

Sample EJS Template (editPost.ejs)

<h1>Edit Post</h1>
<form action="/posts/<%= post.id %>?_method=PUT" method="POST">
  <input type="text" name="title" value="<%= post.title %>" required />
  <textarea name="content"><%= post.content %></textarea>
  <button type="submit">Update</button>
</form>

Make sure to use middleware like method-override to support PUT/DELETE via forms.

Destroy Route in RESTful APIs

The Destroy Route allows you to delete a specific resource from the server/database. It uses the DELETE HTTP method.

Purpose

Permanently remove an item (e.g., post, user, product)
Triggered by user action (e.g., clicking a delete button)

URL Pattern

DELETE /posts/:id

Example in Express.js

Assume an in-memory posts array:

let posts = [
  { id: "1", title: "Post 1" },
  { id: "2", title: "Post 2" }
];

Destroy Route

app.delete('/posts/:id', (req, res) => {
  const postId = req.params.id;
  const postIndex = posts.findIndex(p => p.id === postId);

  if (postIndex !== -1) {
    posts.splice(postIndex, 1);
    res.send(`Post ${postId} deleted`);
  } else {
    res.status(404).send("Post not found");
  }
});

If using an HTML form to trigger this, you'll need method-override.

That's a Wrap for Part 1!

We’ve officially wrapped up Part 1 of our backend journey, covering:

🌐 Node.js fundamentals and REPL
📦 npm, modules, and project structure
🚀 Express.js for building web servers
📄 EJS templating for dynamic content
🛠️ RESTful routing (Index, Show, Create, Edit, Update, Destroy)

Whether you're building APIs or full-stack web apps, these core concepts are the foundation for becoming a strong backend developer.

🧠 Tip: Keep experimenting with small projects as you go. It’s the best way to learn!

📢 Stay tuned for Part 2, where we dive deeper into backend magic with databases, authentication, and more real-world features! 🔥

💬 Got feedback or suggestions? Drop a comment and let’s grow together.

🚀 Happy Coding!

simonsays-js: A Fun Memory Game Built with JavaScript!

Bhupesh Kumar — Sun, 27 Apr 2025 21:51:10 +0000

Hey everyone!👋

I'm excited to share my latest project: Simon Says JS — a colorful memory game built using pure HTML, CSS, and JavaScript. 🎨🧠

In this post, I'll walk you through the project overview, key features, and how you can try it out!

Project Overview

The Simon Says game is a classic memory challenge where you need to repeat an increasingly long sequence of colors correctly.

I built a modern, mobile-responsive version from scratch to sharpen my front-end skills like:

DOM manipulation
Event handling
CSS animations
Game logic building

Live Demo:

👉 Play Simon Says JS here!

Source Code:

👉 GitHub Repository

🛠️ Features

🎨 Colorful animated buttons
📈 Dynamic level progression
🔊 Button click sounds and Game Over sounds
🏆 High score tracking with LocalStorage
📱 Fully mobile responsive
✨ Smooth transitions and UI animations
🖥️ Clean design with modern fonts and gradient backgrounds

🎮 How to Play

Press the Start button to begin the game.
Watch carefully as the game flashes a random color.
Click the colored buttons in the same sequence shown.
Each new level adds one more color to the sequence.
If you make a mistake, it's Game Over — your score and High Score will be displayed.
Press Start again to try and beat your High Score! 🏆

📸 Sneak Peek (Screenshots)

Desktop View:
Mobile View:

📂 Tech Stack Used

HTML5 — for structure
CSS3 — for styles, responsive layout, transitions
JavaScript (Vanilla) — for game logic and user interaction
Google Fonts — for modern typography
LocalStorage API — to save High Scores

✨ Challenges and Learning Points

Handling real-time event listening for multiple buttons
Managing sequence arrays and checking user input dynamically
Adding smooth CSS transitions for better UX
Working with LocalStorage to persist data across browser sessions
Making the page fully responsive for mobile screens

🚀 Future Improvements

🎮 Add difficulty levels (Easy, Medium, Hard)
🔊 Add background music with mute/unmute button
🏆 Create a leaderboard system
📱 Make it a Progressive Web App (PWA) for offline play
✨ Add new bonus game modes like "Reverse Simon"

🙌 Final Thoughts

Building Simon Says JS was a great way to practice and apply front-end skills, especially DOM manipulation and game logic.

I'm really proud of how polished and mobile-friendly it turned out!

I'd love your feedback and ideas for future upgrades! 🚀

If you like it, feel free to ⭐ the GitHub repo!

Thanks for reading! 🙏

🚀 Challenge your memory now: Play Simon Says JS!

Web Dev Day 7: JavaScript Guide Part 2

Bhupesh Kumar — Thu, 06 Mar 2025 19:23:55 +0000

What is the DOM in JavaScript?

The Document Object Model (DOM) is a programming interface that allows JavaScript to interact with, manipulate, and update web pages dynamically.

It represents an HTML document as a tree structure, where each HTML element is a node.

1. Understanding the DOM Structure

Consider this HTML document:

<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
</head>
<body>
    <h1 id="heading">Hello, DOM!</h1>
    <p class="text">This is a paragraph.</p>
</body>
</html>

How the DOM Represents This Page:

Document
 ├── html
 │    ├── head
 │    │    ├── title
 │    ├── body
 │         ├── h1 (id="heading")
 │         ├── p (class="text")

2. Accessing the DOM Using JavaScript

Selecting Elements by ID (getElementById)

let heading = document.getElementById("heading");
console.log(heading.textContent);  
// Output: "Hello, DOM!"

Selecting Elements by Class (getElementsByClassName

let paragraphs = document.getElementsByClassName("text");
console.log(paragraphs[0].textContent);  
// Output: "This is a paragraph."

Selecting Elements by Tag Name (getElementsByTagName)

let allHeadings = document.getElementsByTagName("h1");
console.log(allHeadings[0].textContent);  
// Output: "Hello, DOM!"

Modern Way: Using querySelector and querySelectorAll

let heading = document.querySelector("#heading"); // Selects by ID
let paragraph = document.querySelector(".text"); // Selects first element with class
let allParagraphs = document.querySelectorAll(".text"); // Selects all elements with class

console.log(heading.textContent);  
// Output: "Hello, DOM!"

3. Modifying the DOM (Changing Content)

Changing Inner HTML

document.getElementById("heading").innerHTML = "<span style='color:red'>Hello, JS!</span>";

Changing Text Content

document.getElementById("heading").textContent = "Hello, JavaScript!";

4. Manipulating DOM Elements

Adding a New Element (createElement & appendChild)

let newPara = document.createElement("p");
newPara.textContent = "This is a new paragraph!";
document.body.appendChild(newPara);

Removing an Element (removeChild)

let element = document.getElementById("heading");
element.parentNode.removeChild(element);

Changing CSS Styles Using JavaScript

document.getElementById("heading").style.color = "blue";

5. Handling Events in the DOM

Adding an Event Listener

document.getElementById("heading").addEventListener("click", function() {
    alert("Heading clicked!");
});

Removing an Event Listener

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

let heading = document.getElementById("heading");
heading.addEventListener("click", greet);
heading.removeEventListener("click", greet);

Manipulating Attributes in JavaScript (DOM)

JavaScript provides methods to add, modify, and remove attributes of HTML elements dynamically.

1. Accessing Attributes

`getAttribute()`

Gets the value of an attribute.

let link = document.querySelector("a");
console.log(link.getAttribute("href"));  
// Output: The URL inside the `href` attribute

`setAttribute()`

Sets or updates an attribute.

let link = document.querySelector("a");
link.setAttribute("href", "https://example.com");
console.log(link.getAttribute("href"));  
// Output: "https://example.com"

`hasAttribute()`

Checks if an element has a specific attribute.

let button = document.querySelector("button");

if (button.hasAttribute("disabled")) {
    console.log("Button is disabled");
} else {
    console.log("Button is enabled");
}

`removeAttribute()`

Removes an attribute from an element.

let input = document.querySelector("input");
input.removeAttribute("disabled");

2. Working with class Attributes

`classList.add()`

Adds a class to an element.

let box = document.querySelector(".box");
box.classList.add("active");

`classList.remove()`

Removes a class.

box.classList.remove("active");

`classList.toggle()`

Toggles a class on/off.

box.classList.toggle("hidden");

`classList.contains()`

Checks if an element has a class.

console.log(box.classList.contains("hidden"));  
// Output: true or false

3. Working with data-* Attributes

Custom attributes (data-*) store additional data in elements.

Getting data-* Attributes

let button = document.querySelector("button");
console.log(button.getAttribute("data-user-id"));  
// Output: User ID stored in `data-user-id`

Using dataset for Easier Access

console.log(button.dataset.userId);  
// Output: User ID stored in `data-user-id`

Setting data-* Attributes

button.dataset.status = "active";
console.log(button.dataset.status);  
// Output: "active"

4. Enabling/Disabling Elements (disabled Attribute)

let button = document.querySelector("button");

// Disable the button
button.setAttribute("disabled", true);

// Enable the button
button.removeAttribute("disabled");

Manipulating Styles in JavaScript (DOM)

JavaScript allows you to dynamically change CSS styles on HTML elements using the style property or CSS classes.

1. Changing Inline Styles

You can modify CSS properties using the .style property.

let box = document.querySelector(".box");
box.style.backgroundColor = "blue";
box.style.color = "white";
box.style.padding = "20px";

2. Modifying Multiple Styles Using cssText

box.style.cssText = "background: red; color: white; padding: 15px;";

3. Using classList for CSS Manipulation

Instead of modifying styles directly, use CSS classes for better control.

Adding a Class

box.classList.add("highlight");

Removing a Class

box.classList.remove("highlight");

Toggling a Class (On/Off)

box.classList.toggle("hidden");

Checking if an Element Has a Class

console.log(box.classList.contains("hidden"));  
// Output: true or false

Navigating the Page Using JavaScript (DOM Navigation)

JavaScript provides various DOM navigation methods to move between elements on a web page.

Accessing Parent, Child, and Sibling Elements

Getting the Parent Element (`parentNode` & `parentElement`)

let child = document.querySelector(".child");
console.log(child.parentNode);   
console.log(child.parentElement);

Feature                 Method
Get Parent Element  parentNode, parentElement
Get Child Elements  firstElementChild, lastElementChild
Get Sibling Elements    nextElementSibling, previousElementSibling
Scroll to Section   scrollIntoView()
Redirect to URL         window.location.href
Reload Page         window.location.reload()
Navigate History    window.history.back() / forward()

Adding Elements to a Page Using JavaScript (DOM Manipulation)

JavaScript allows you to dynamically create and add elements to the webpage using the DOM API.

1. Creating and Appending an Element

`createElement()` + `appendChild()`

let newPara = document.createElement("p"); // Create <p> element
newPara.textContent = "This is a new paragraph!"; // Add text

document.body.appendChild(newPara); // Append to body

2. Adding an Element Inside a Specific Parent

let parentDiv = document.getElementById("container");

let newDiv = document.createElement("div");
newDiv.textContent = "Hello, this is a new div!";
newDiv.classList.add("new-box");

parentDiv.appendChild(newDiv);

3. Using insertBefore() (Insert at a Specific Position)

let list = document.getElementById("list");
let newItem = document.createElement("li");
newItem.textContent = "New Item";

let firstItem = list.firstElementChild; // Get first item
list.insertBefore(newItem, firstItem);  // Insert before it

Feature                        Method
Create an Element          createElement("tag")
Add Text                   element.textContent = "Text"
Append to End                  appendChild(element)
Insert Before                  insertBefore(newElement, referenceElement)
Insert at Specific Position    insertAdjacentHTML(position, html)
Prepend Element                prepend(element)
Clone Element                  cloneNode(true)

Removing Elements from a Page Using JavaScript (DOM Manipulation)

JavaScript allows you to remove elements dynamically from the DOM using various methods.

Removing an Element Using `remove()`

let element = document.getElementById("box");
element.remove();

2. Removing a Child Element Using removeChild()

let parent = document.getElementById("container");
let child = document.getElementById("child");

parent.removeChild(child);

Feature                       Method
Remove an element         element.remove()
Remove a child                parent.removeChild(child)
Remove first/last child       firstElementChild.remove() / lastElementChild.remove()
Remove all children       innerHTML = ""
Remove using parent       parentNode.removeChild(element)
Remove multiple elements      querySelectorAll().forEach(el => el.remove())

DOM Events in JavaScript

DOM Events allow JavaScript to detect and respond to user interactions such as clicks, key presses, and mouse movements.

1. Adding an Event Listener (`addEventListener`)

let button = document.getElementById("myButton");

button.addEventListener("click", function() {
    console.log("Button clicked!");
});

`onclick` and `onmouseenter` Events in JavaScript

JavaScript provides event handlers like onclick and onmouseenter to detect user interactions such as clicks and mouse movements.

1. `onclick` Event (Detects Clicks)

The onclick event fires when an element is clicked.

Using onclick with HTML (Inline)

<button onclick="alert('Button clicked!')">Click Me</button>

Using onclick in JavaScript (Better Approach)

let button = document.getElementById("myButton");

button.onclick = function() {
    alert("Button clicked!");
};

Using addEventListener("click") (Best Practice)

let btn = document.getElementById("myButton");

btn.addEventListener("click", () => {
    alert("Button clicked using addEventListener!");
});

2. onmouseenter Event (Mouse Hover)

The onmouseenter event fires when the mouse enters an element.

Example: Changing Background Color on Hover

let box = document.getElementById("box");

box.onmouseenter = function() {
    box.style.backgroundColor = "yellow";
};

box.onmouseleave = function() {
    box.style.backgroundColor = "white";
};

`addEventListener()` in JavaScript

The addEventListener() method allows JavaScript to attach event listeners to HTML elements dynamically.

It is the preferred method for handling events because it supports multiple handlers.

Basic Syntax

element.addEventListener("event", function);

Event Listeners for Elements in JavaScript

JavaScript event listeners allow you to detect user interactions on elements like buttons, links, inputs, and forms.

1. Adding an Event Listener (`addEventListener()`)

element.addEventListener("event", function);

`this` in Event Listeners in JavaScript

The this keyword behaves differently in event listeners based on how the function is defined.

1. `this` in a Regular Function (Refers to the Element)

When using a regular function, this refers to the element that triggered the event.

let button = document.getElementById("myButton");

button.addEventListener("click", function() {
    console.log(this);  // Logs the button element
    this.style.backgroundColor = "blue"; // Changes button color
});

Keyboard Events in JavaScript

JavaScript keyboard events allow you to detect when a user presses or releases a key.

1. Types of Keyboard Events

Event	Description
`keydown`	Fires when a key is pressed down
`keyup`	Fires when a key is released
`keypress`	(Deprecated) Similar to `keydown`, but does not detect `Shift`, `Ctrl`, `Alt`, etc.

Best Practice: Use keydown and keyup instead of keypress.

2. Detecting Key Press (`keydown`)

document.addEventListener("keydown", (event) => {
    console.log(`Key pressed: ${event.key}`);
});

Form Events in JavaScript

JavaScript form events allow you to detect user interactions with form elements, such as input fields, checkboxes, and buttons.

1. Common Form Events

| Event | Description |
|-------|------------|
| `submit` | Fires when a form is submitted |
| `focus` | Fires when an input field gains focus |
| `blur` | Fires when an input field loses focus |
| `change` | Fires when an input value changes (for dropdowns, checkboxes, etc.) |
| `input` | Fires when the user types in an input field |
| `reset` | Fires when the form is reset |

2. Prevent Default Form Submission (`submit` Event)

let form = document.getElementById("myForm");

form.addEventListener("submit", (event) => {
    event.preventDefault(); // Prevent page reload
    console.log("Form submitted!");
});

Extracting Form Data in JavaScript

JavaScript allows you to retrieve form input values dynamically for validation, processing, or sending data to a server.

1. Extracting Data Using `querySelector`

document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault(); // Prevent page reload

    let name = document.querySelector("#name").value;
    let email = document.querySelector("#email").value;
    let message = document.querySelector("#message").value;

    console.log(`Name: ${name}, Email: ${email}, Message: ${message}`);
});

2. Extracting Data Using elements[]

document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault();

    let form = event.target;
    let name = form.elements["name"].value;
    let email = form.elements["email"].value;

    console.log(`Name: ${name}, Email: ${email}`);
});

3. Extracting Checkbox and Radio Button Values

document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault();

    let agree = document.querySelector("#agree").checked;
    let gender = document.querySelector('input[name="gender"]:checked').value;

    console.log(`Agreement: ${agree}, Gender: ${gender}`);
});

Feature                    Method
Get Input Value            document.querySelector("#id").value
Get Checkbox Value     document.querySelector("#id").checked
Get Selected Radio Value document.querySelector('input[name="name"]:checked').value
Get Dropdown Value     document.querySelector("#id").value
Extract All Form Data      new FormData(form).entries()
Send Data to Server    fetch("URL", { method: "POST", body: formData })

`change` Event in JavaScript

The change event fires when a form input loses focus after a value change.

It is commonly used for dropdowns, checkboxes, radio buttons, and text inputs.

1. Basic Syntax

element.addEventListener("change", function(event) {
    console.log(event.target.value);
});

`input` Event in JavaScript

The input event fires whenever the value of an input field changes, making it ideal for live updates.

1. Basic Syntax

element.addEventListener("input", function(event) {
    console.log(event.target.value);
});

Event Bubbling in JavaScript

Event bubbling is a concept in the DOM where an event starts from the target element and propagates upwards to its ancestors.

1. How Event Bubbling Works

Consider the following HTML:

<div id="parent">
    <button id="child">Click Me</button>
</div>

Now, let's add event listeners:

document.getElementById("child").addEventListener("click", () => {
    console.log("Child clicked!");
});

document.getElementById("parent").addEventListener("click", () => {
    console.log("Parent clicked!");
});

Clicking the button logs:

Child clicked!
Parent clicked!

The event starts at the child (button) and bubbles up to the parent (div).

2. Stopping Event Bubbling (stopPropagation())

Use event.stopPropagation() to prevent bubbling:

document.getElementById("child").addEventListener("click", (event) => {
    event.stopPropagation();
    console.log("Child clicked!");
});

document.getElementById("parent").addEventListener("click", () => {
    console.log("Parent clicked!");
});

Now, clicking the button only logs:

Child clicked!

The parent event is NOT triggered.

Event Delegation in JavaScript

Event Delegation is a technique in JavaScript where a single event listener is added to a parent element to handle events on multiple child elements, even if they are added dynamically.

1. Why Use Event Delegation?

🔹 Without Event Delegation (Adding Event Listeners to Each Button)

let buttons = document.querySelectorAll(".btn");

buttons.forEach(button => {
    button.addEventListener("click", () => {
        console.log("Button clicked!");
    });
});

Does not work for dynamically added elements.

2. Using Event Delegation

document.getElementById("parent").addEventListener("click", (event) => {
    if (event.target.matches(".btn")) {
        console.log(`Button Clicked: ${event.target.textContent}`);
    }
});

Why Use?

Only one event listener is needed.
Works for both existing and dynamically added elements.

JavaScript Call Stack

The Call Stack in JavaScript is a mechanism that the JavaScript engine uses to keep track of function calls.

It follows the Last In, First Out (LIFO) principle.

1. What is the Call Stack?

When you invoke a function, JavaScript adds it (pushes) onto the stack.
When the function returns, JavaScript removes it (pops) from the stack.
The most recent function call is always at the top of the stack.

2. How It Works

Example:

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

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

welcome();

Visualizing the JavaScript Call Stack

1. Basic Example

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

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

welcome();

Call Stack Step-by-Step:

Initially:

(empty)

Call welcome()

| welcome |

Inside welcome(), call greet()

| greet |
| welcome |

greet() logs "Hello" and finishes

| welcome |

welcome() logs "Welcome!" and finishes

(empty)

Final Output in Console:

Hello!
Welcome!

2. Nested Function Calls Example

function first() {
    console.log("First");
    second();
}

function second() {
    console.log("Second");
    third();
}

function third() {
    console.log("Third");
}

first();

Call Stack Timeline:

Moment	Call Stack
Start	(empty)
Call `first()`	`first()`
Inside `first()`, call `second()`	`second()` ➔ `first()`
Inside `second()`, call `third()`	`third()` ➔ `second()` ➔ `first()`
`third()` completes	`second()` ➔ `first()`
`second()` completes	`first()`
`first()` completes	(empty)

Final Output in Console:

First
Second
Third

3. Visual Representation (Graphical)

Time ➡️
----------------------------------------------------

Step 1: Call first()

[ first ]

Step 2: first() calls second()

[ second ]
[ first ]

Step 3: second() calls third()

[ third ]
[ second ]
[ first ]

Step 4: third() finishes

[ second ]
[ first ]

Step 5: second() finishes

[ first ]

Step 6: first() finishes

(empty)

Breakpoints in JavaScript (Debugging with DevTools)

Breakpoints are a powerful feature that allows you to pause code execution at a specific line, so you can inspect values, control flow, and debug issues step-by-step.

JavaScript is Single-Threaded

JavaScript is a single-threaded programming language, meaning it can only execute one task at a time in a single line of execution.

1. What Does Single-Threaded Mean?

Only one command is being processed at a time.
One call stack and one memory heap are used.
No two pieces of code run simultaneously in the same thread.

Analogy:

Imagine a cashier at a store who can only serve one customer at a time.

The next customer must wait until the current one is fully processed.

2. How JavaScript Executes Code

Step	Description
1	Code enters the Call Stack one function at a time.
2	Each function completes before the next one is run.
3	If a function is waiting (e.g., timer, fetch API), it is offloaded to the Web APIs and comes back later via the Event Loop.

JavaScript is fast not because it is multi-threaded, but because it handles asynchronous tasks smartly using the Event Loop.

Example with Asynchronous Behavior (Still Single-Threaded)

console.log("Start");

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

console.log("End");

Callback Hell in JavaScript

Callback Hell refers to a situation in JavaScript where multiple nested callbacks make code difficult to read, understand, and maintain.

1. What is a Callback?

A callback is a function passed as an argument to another function, and it is executed after some operation completes.

Example:

function fetchData(callback) {
    setTimeout(() => {
        console.log("Data fetched");
        callback();
    }, 1000);
}

fetchData(() => {
    console.log("Callback executed");
});

2. What is Callback Hell?

When callbacks are nested inside other callbacks, it leads to deeply indented, hard-to-maintain code:

Example:

setTimeout(() => {
    console.log("Step 1");
    setTimeout(() => {
        console.log("Step 2");
        setTimeout(() => {
            console.log("Step 3");
            setTimeout(() => {
                console.log("Step 4");
            }, 1000);
        }, 1000);
    }, 1000);
}, 1000);

Step 1
Step 2
Step 3
Step 4

Promises in JavaScript

A Promise in JavaScript is an object that represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.

1. Why Promises?

Before Promises, callbacks were used to handle asynchronous code, which led to callback hell.

Promises solve this by offering a cleaner, chainable syntax.

2. States of a Promise

A Promise can be in one of three states:

State	Description
Pending	Initial state, neither fulfilled nor rejected
Fulfilled	Operation completed successfully
Rejected	Operation failed

3. Creating a Promise

const myPromise = new Promise((resolve, reject) => {
    let success = true;

    if (success) {
        resolve("Data loaded!");
    } else {
        reject("Error loading data.");
    }
});

`.then()` and `.catch()` in JavaScript Promises

JavaScript Promises come with .then() and .catch() methods to handle asynchronous operations successfully or with errors.

`.then()` – Handling Success

The .then() method is used to specify what to do when the Promise is fulfilled.

Syntax:

promise.then(onFulfilled);

let successPromise = new Promise((resolve, reject) => {
    resolve("Task Successful!");
});

successPromise.then(result => {
    console.log(result); // Output: Task Successful!
});

.catch() – Handling Errors

The .catch() method is used to handle rejections (errors) in Promises.

Syntax:

promise.catch(onRejected);

Example:

let failurePromise = new Promise((resolve, reject) => {
    reject("❌ Task Failed!");
});

failurePromise
    .then(result => {
        console.log(result);
    })
    .catch(error => {
        console.log(error); // Output: ❌ Task Failed!
    });

Chaining .then() and .catch()

You can chain multiple .then() calls. If any error occurs, it will be caught in .catch().

Example:

new Promise((resolve, reject) => {
    resolve(10);
})
.then(num => {
    return num * 2;
})
.then(result => {
    console.log("Result:", result); // Output: Result: 20
})
.catch(err => {
    console.error("Error:", err);
});

Promise Chaining in JavaScript

Promise chaining allows you to run multiple asynchronous operations in sequence, where the output of one .then() becomes the input of the next.

1. What is Promise Chaining?

You can return a value or another Promise from .then() and chain further .then() calls:

fetchData()
  .then(processData)
  .then(displayData)
  .catch(handleError);

2. Basic Example:

new Promise((resolve, reject) => {
    resolve(2);
})
.then(num => {
    console.log("Step 1:", num); // Step 1: 2
    return num * 2;
})
.then(num => {
    console.log("Step 2:", num); // Step 2: 4
    return num * 3;
})
.then(num => {
    console.log("Step 3:", num); // Step 3: 12
});

3. Returning a New Promise in the Chain

function delayedStep(value, delay) {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log("Step:", value);
            resolve(value);
        }, delay);
    });
}

delayedStep(1, 1000)
  .then(() => delayedStep(2, 1000))
  .then(() => delayedStep(3, 1000))
  .then(() => console.log("All steps done!"));

Step: 1
Step: 2
Step: 3
All steps done!

Results and Errors in JavaScript Promises

JavaScript Promises allow you to handle successful results and errors in asynchronous operations in a clean, chainable way.

Handling Results with `.then()`

The .then() method is used to receive the result when a Promise is fulfilled.

Example:

let promise = new Promise((resolve, reject) => {
    resolve("Data loaded successfully!");
});

promise.then(result => {
    console.log("✅ Result:", result);
});

Handling Errors with .catch()

The .catch() method is used to catch errors when a Promise is rejected or if an error is thrown in a .then() chain.

Example:

let errorPromise = new Promise((resolve, reject) => {
    reject("Server error occurred.");
});

errorPromise
  .then(result => {
      console.log("This will not run.");
  })
  .catch(error => {
      console.log("❌ Error:", error);
  });

Returning Values from .then()

Each .then() passes its return value to the next .then() in the chain:

Promise.resolve(5)
  .then(num => num * 2)
  .then(result => {
      console.log("✅ Final Result:", result); // 10
  });

async Functions in JavaScript

async functions make writing asynchronous code in JavaScript simpler and more readable, by allowing the use of await to pause execution until a Promise is resolved or rejected.

1. What is an `async` Function?

An async function always returns a Promise.
Inside an async function, you can use the await keyword to wait for a Promise to resolve.

Basic Syntax:

async function myFunction() {
    // code
}

2. Example: Returning a Promise Automatically

async function greet() {
    return "Hello!";
}

greet().then(result => {
    console.log(result); // Output: Hello!
});

The return value is automatically wrapped in a Promise.

`await` Keyword in JavaScript

The await keyword is used inside async functions to pause the execution until a Promise is resolved or rejected.

1. What Does `await` Do?

Waits for the result of a Promise.
Pauses execution of the surrounding async function.
Resumes when the Promise is resolved (or throws an error if rejected).

2. Basic Syntax

let result = await promise;

await can only be used inside an async function (or top-level in modules).

3. Example with Delay

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function run() {
    console.log("⏱️ Waiting...");
    await delay(2000);
    console.log("✅ Done after 2 seconds");
}

run();

await delay(2000) pauses for 2 seconds before continuing.

4. Awaiting a Fetch Call

async function getUser() {
    const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
    const user = await response.json();
    console.log("👤 User:", user);
}

getUser();
📌 await makes asynchronous HTTP calls look like synchronous code.

Handling Rejections with `await` in JavaScript

When using await with Promises in async functions, you must handle rejections to prevent your app from crashing or behaving unexpectedly.

Why Handle Rejections?

If a Promise is rejected, await will throw an error.
Without handling, it may cause uncaught exceptions.

1. Using `try...catch` with `await`

The most common and reliable way to handle rejections is with a try...catch block.

Example:

async function fetchData() {
    try {
        const response = await fetch("https://invalid.api.url");
        const data = await response.json();
        console.log("✅ Data:", data);
    } catch (error) {
        console.error("❌ Error fetching data:", error.message);
    }
}

fetchData();

Why Use?

Gracefully catches any errors (like network failures, API issues, etc.).

2. Custom Rejection Handling

You can manually reject Promises and catch them:

function getUser(id) {
    return new Promise((resolve, reject) => {
        if (id > 0) {
            resolve({ id, name: "Alice" });
        } else {
            reject("Invalid user ID");
        }
    });
}

async function loadUser() {
    try {
        const user = await getUser(-1);
        console.log("User:", user);
    } catch (err) {
        console.error("❌ Rejection:", err);
    }
}

loadUser();

3. Optional: Handle with .catch() after await

You can also use .catch() inline with await, though it's less common than try...catch.

const response = await fetch("/api/data").catch(err => {
    console.error("❌ Fetch error:", err.message);
});

📌 Note: Further code will still execute even if this fails — be cautious.

What is an API?

API stands for Application Programming Interface.

An API is a set of rules that allows one software application to communicate with another. It defines how requests and responses should be formatted, much like a contract between two programs.

1. Simple Definition

An API is like a waiter in a restaurant who takes your order (request), tells the kitchen (server), and brings back your food (response).

2. Real-World Analogy

You use an API every day:

Weather app fetches weather → it calls a weather API.
Instagram posts are loaded → it uses Instagram’s API.
Google Maps in your food app? → powered by the Maps API.

3. Types of APIs

Type	Description
Web API	Communication over the internet (HTTP/S)
Browser API	Built into the browser (e.g., `DOM`, `fetch()`)
Library API	Functions exposed by a library (e.g., jQuery)
Operating System API	Interfaces for OS features (e.g., file system)

4. Web API Example (Using Fetch)

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("❌ Error:", error));

5. How Does an API Work?

Client (Frontend) ➡️ Sends Request ➡️
           Server (API) ➡️ Processes & Sends Response ➡️
                          Client uses the result

6. Common Data Format: JSON

Most modern APIs communicate using JSON (JavaScript Object Notation).

Example API Response:

{
  "name": "Alice",
  "age": 30,
  "location": "Canada"
}

7. HTTP Methods Used in APIs

Method  Purpose
GET Read data
POST    Create data
PUT Update data
DELETE  Remove data

What is JSON?

JSON stands for JavaScript Object Notation.

It is a lightweight data format used for storing and exchanging data between servers and clients in a human-readable format.

1. Simple Definition

JSON is a text format for representing structured data (like objects and arrays) in a way that's easy to read and easy for machines to parse.

2. JSON Syntax Basics

Data is in key-value pairs
Data is separated by commas
Curly braces {} hold objects
Square brackets [] hold arrays
Keys and string values must be in double quotes

Example JSON:

{
  "name": "Alice",
  "age": 25,
  "isStudent": false,
  "skills": ["JavaScript", "Python"],
  "address": {
    "city": "Toronto",
    "country": "Canada"
  }
}

3. JSON vs JavaScript Object

Feature JSON    JavaScript Object
Quotes on keys  Required ("key")    Optional (key or "key")
Comments    ❌ Not allowed ✅ Allowed
Methods ❌ Not supported   ✅ Can include functions

4. JSON in APIs

APIs typically send and receive data in JSON format.

Example with Fetch:

fetch("https://api.example.com/user")
  .then(response => response.json())
  .then(data => {
    console.log(data.name); // Accessing JSON property
  });

6. Real-World Use Cases

API responses
Config files
Storing data in localStorage
Data exchange in mobile/web apps

Accessing JSON Data in JavaScript

JSON (JavaScript Object Notation) is a format used to exchange data. Once parsed into a JavaScript object, you can access its data using dot notation or bracket notation.

1. Parsing JSON to JavaScript

Before you access data, you must parse the JSON string into a JavaScript object:

let jsonString = '{"name": "Alice", "age": 25, "skills": ["JS", "Python"]}';

let user = JSON.parse(jsonString);

2. Accessing JSON Object Properties

Dot Notation (most common):

console.log(user.name);  // "Alice"
console.log(user.age);   // 25

Bracket Notation (useful for dynamic keys or invalid identifiers):

console.log(user["skills"]);        // ["JS", "Python"]
console.log(user["name"]);          // "Alice"

let key = "age";
console.log(user[key]);             // 25

3. Accessing Nested JSON Data

{
  "name": "Bob",
  "address": {
    "city": "Toronto",
    "postal": "M4B1B3"
  }
}

JavaScript Example:

let data = JSON.parse('{"name":"Bob","address":{"city":"Toronto","postal":"M4B1B3"}}');

console.log(data.address.city);     // "Toronto"
console.log(data["address"]["postal"]); // "M4B1B3"

4. Accessing JSON Arrays

{
  "users": [
    { "id": 1, "name": "Alice" },
    { "id": 2, "name": "Bob" }
  ]
}

JavaScript Example:

let data = JSON.parse('{"users":[{"id":1,"name":"Alice"},{"id":2,"name":"Bob"}]}');

console.log(data.users[0].name);   // "Alice"
console.log(data.users[1]["id"]);  // 2

5. Looping Through JSON Data

Using forEach:

data.users.forEach(user => {
    console.log(user.name);  // "Alice", "Bob"
});

Using for...of:

for (let user of data.users) {
    console.log(user.id);   // 1, 2
}

6. Accessing Before Parsing = ❌ Error

let jsonData = '{"name": "John"}';

console.log(jsonData.name); // ❌ undefined

✅ Correct:

let parsed = JSON.parse(jsonData);
console.log(parsed.name);   // ✅ "John"

Top API Testing Tools for Developers

API testing is essential for verifying that your backend services are working correctly, securely, and efficiently.

These tools help send requests, inspect responses, automate tests, and document APIs.

1. Postman

Postman is the most popular API testing tool with a user-friendly UI.

Features:

Create and send HTTP requests (GET, POST, PUT, DELETE)
Organize requests in collections and folders
Add environments and variables
Automate tests with JavaScript
View detailed request/response logs

Best For:

Manual and automated API testing
Collaborating with teams

🔗 https://www.postman.com

2. Insomnia

Insomnia is a sleek, fast alternative to Postman with a focus on simplicity.

Features:

Support for REST, GraphQL, gRPC
Environment variables
JSON schema validation
Plugin support and dark mode

Best For:

Developers who prefer a minimal, keyboard-friendly tool

🔗 https://insomnia.rest

3. Swagger (OpenAPI)

Swagger UI and SwaggerHub help you document and test REST APIs.

Features:

Live API documentation
Send requests from the UI
Auto-generate client SDKs
API mocking

Best For:

Testing APIs from OpenAPI specs
API-first development

🔗 https://swagger.io/tools/swagger-ui/

4. Hoppscotch (formerly Postwoman)

Hoppscotch is a fast, open-source, browser-based API client.

Features:

Lightweight and blazing fast
Send requests for REST, GraphQL, WebSocket
Open source and privacy-focused

Best For:

Quick in-browser testing without installation

🔗 https://hoppscotch.io

5. REST Assured (Java)

REST Assured is a Java library for automating API tests.

Features:

Fluent syntax for writing tests
Integrates with JUnit/TestNG
Validates responses, headers, status codes

Best For:

Backend developers using Java

🔗 https://rest-assured.io

6. cURL (Command-Line)

cURL is a command-line tool to send HTTP requests from the terminal.

Features:

Lightweight, no UI
Works on Linux, Mac, Windows
Perfect for scripting and automation

Example:

curl -X POST https://api.example.com/data -H "Content-Type: application/json" -d '{"name":"Alice"}'

7. JMeter

Apache JMeter is great for performance and load testing APIs.

Features:

Simulate heavy traffic on APIs
Record and replay requests
Built-in reports and graphs

What is AJAX?

AJAX stands for Asynchronous JavaScript and XML.

It is a technique that allows web pages to send and receive data from a server asynchronously, without reloading the entire page.

1. Simple Definition

AJAX enables your website to communicate with the server in the background, updating parts of a web page without refreshing the whole page.

2. Real-World Examples of AJAX

Submitting a form without reloading the page
Auto-search suggestions (like Google search)
Live data updates (chat apps, news feeds)
Loading content on scroll (infinite scroll)

3. Key Components of AJAX

Component	Role
JavaScript	Controls the logic
XMLHttpRequest or `fetch()`	Sends requests to the server
JSON/XML/HTML	Formats the data being sent/received
DOM	Updates the web page without reloading

4. Modern AJAX with `fetch()`

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

No page reload, but user data is fetched and shown!

HTTP Verbs (Methods) Explained

HTTP verbs (also known as HTTP methods) define the type of action to perform when making requests to a server.

They are used in REST APIs to map CRUD operations (Create, Read, Update, Delete).

1. Common HTTP Verbs

Verb	Purpose	CRUD Equivalent	Typical Use
`GET`	Retrieve data	Read	Fetching user info, posts
`POST`	Create new data	Create	Submitting forms, creating users
`PUT`	Replace existing data	Update	Full update of a resource
`PATCH`	Partially update data	Update	Update specific fields
`DELETE`	Remove data	Delete	Deleting a user or a record

Adding Information in URLs (Query Parameters & URL Path)

In web development, you often need to send information to the server through the URL.

This can be done using:

Query Parameters
Path Parameters

1. Query Parameters (Key-Value Pairs)

Query parameters are added to the URL after a ?, using & to separate multiple values.

Syntax:

https://example.com/api/users?name=Alice&age=25

JavaScript Example with `fetch()`:

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

fetch(`https://example.com/api/users?name=${name}&age=${age}`)
  .then(res => res.json())
  .then(data => console.log(data));

📌 Use when sending optional or filter data

2. Path Parameters (Clean URLs)

Path parameters are embedded directly in the URL path, often used for resource IDs.

Syntax:

https://example.com/api/users/123

JavaScript Example:

let userId = 123;

fetch(`https://example.com/api/users/${userId}`)
  .then(res => res.json())
  .then(data => console.log(data));

📌 Use when accessing specific resources (e.g., user, product, post).

3. When to Use Which?

Use Case    Path Parameter  Query Parameter
Get user by ID  /users/123  ❌
Filter/search users /users?name=John    ✅
Paginate data   /products?page=2    ✅
Fetch related resource  /users/123/posts    ✅ or Path-based

HTTP Headers Explained

HTTP headers are key-value pairs sent between the client and server in every HTTP request and response.

They provide metadata about the request/response and are essential for things like authentication, content type, caching, etc.

1. Types of HTTP Headers

Type	Purpose
Request Headers	Sent by the client (browser, app) to the server
Response Headers	Sent by the server back to the client
General Headers	Used by both request and response
Entity Headers	Define body content information (length, type, etc.)

2. Common Request Headers

Header	Description
`Accept`	Specifies the media types the client can handle
`Content-Type`	Type of data being sent (e.g., `application/json`)
`Authorization`	Authentication credentials (e.g., Bearer token)
`User-Agent`	Info about the client/browser
`Cache-Control`	Caching behavior

Example of Request Headers in `fetch()`

fetch("https://api.example.com/data", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer your_token_here"
  },
  body: JSON.stringify({ name: "Alice" })
});

Your First API Request Using `fetch()` in JavaScript

The fetch() method is a modern way to make HTTP requests in JavaScript.

It returns a Promise, making it ideal for handling asynchronous API calls like GET, POST, PUT, and DELETE.

1. Basic Syntax

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

Your First API Request Using `fetch()` with `async/await`

Using async/await with fetch() provides a cleaner, more readable way to make asynchronous API requests in JavaScript.

1. Basic Syntax

async function fetchData() {
  try {
    const response = await fetch("https://example.com/api");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("❌ Error:", error.message);
  }
}

Axios in JavaScript – HTTP Requests Made Easy

Axios is a popular JavaScript library used to make HTTP requests from the browser or Node.js.

It provides a simple, Promise-based API with powerful features for working with APIs.

✅ 1. Why Use Axios?

Compared to the native fetch() API, Axios offers:

🔁 Automatic JSON data transformation
🌐 Better error handling
📦 Built-in request/response interceptors
🕒 Timeout support
🌍 Supports older browsers (unlike fetch)
🧼 Cleaner syntax

2. Installing Axios

In a browser (CDN):

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

In a Node.js project:

npm install axios

Sending Headers with API Requests in JavaScript

HTTP headers are used to pass additional information between the client and server.

This includes data like content type, authentication tokens, API keys, etc.

You can send headers using both fetch() and Axios.

1. Sending Headers with `fetch()`

fetch("https://api.example.com/data", {
  method: "GET",
  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer your_token_here"
  }
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("❌ Error:", error));

2. Sending Headers with Axios

Axios has a more concise syntax for headers:

axios.get("https://api.example.com/data", {
  headers: {
    "Authorization": "Bearer your_token_here"
  }
});

Activity: Using Query Strings to Filter API Results

In this activity, you’ll learn how to use query strings in API requests to filter data, search records, and pass parameters through the URL.

Objective

Make API requests that use query strings to filter user data based on:

Name
Limit of records
Sort order

1. What is a Query String?

A query string is part of a URL that passes key-value pairs to the server.

It starts with a ? and uses & to separate multiple parameters.

Example:

https://api.example.com/users?name=Alice&limit=5

2. Sample API (You Can Use)

You can test this with the JSONPlaceholder API:

https://jsonplaceholder.typicode.com/users

This API doesn't support query filters, but we’ll simulate how it would work.

3. Activity Instructions

Step 1: Basic GET Request

fetch("https://jsonplaceholder.typicode.com/users")
  .then(res => res.json())
  .then(data => console.log("All users:", data));

Step 2: Filter with a Query String

Let’s simulate filtering by name (e.g., ?name=Leanne):

let name = "Leanne";

fetch(`https://jsonplaceholder.typicode.com/users?name=${encodeURIComponent(name)}`)
  .then(res => res.json())
  .then(data => {
    console.log(`Users matching name '${name}':`, data);
  });

Step 3: Add More Query Parameters

let name = "Leanne";
let sortBy = "username";

fetch(`https://jsonplaceholder.typicode.com/users?name=${name}&sort=${sortBy}`)
  .then(res => res.json())
  .then(data => console.log(data));

📌 Even though JSONPlaceholder won’t apply the filter or sort, the URL structure is valid.

4. Activity Challenge

Write a function that accepts filters and returns the request URL:

function buildQueryURL(baseURL, filters) {
  const query = new URLSearchParams(filters).toString();
  return `${baseURL}?${query}`;
}

const url = buildQueryURL("https://jsonplaceholder.typicode.com/users", {
  name: "Ervin",
  limit: 3,
  sort: "email"
});

console.log("Request URL:", url);

Output:

Request URL: https://jsonplaceholder.typicode.com/users?name=Ervin&limit=3&sort=email

Object-Oriented Programming (OOP) in JavaScript

JavaScript supports OOP principles like Encapsulation, Inheritance, Abstraction, and Polymorphism through objects and classes.

1. Objects

Basic object with properties and methods:

const user = {
  name: "Bhupesh",
  age: 25,
  greet() {
    console.log(`Hello, ${this.name}`);
  }
};

user.greet(); // Hello, Bhupesh

2. Constructor Function

Before ES6, constructor functions were used to create multiple instances.

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

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

const p1 = new Person("Alice", 30);
p1.greet(); // Hi, I'm Alice

3. ES6 Classes

Modern syntax for creating blueprints:

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

  greet() {
    console.log(`Hi, I'm ${this.name}`);
  }
}

const person1 = new Person("Bob", 28);
person1.greet(); // Hi, I'm Bob

4. Inheritance

One class can extend another:

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const d = new Dog("Rex");
d.speak(); // Rex barks.

5. Encapsulation

Keep data protected using closures or #privateFields (modern JS):

class BankAccount {
  #balance = 0; // private field

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

  getBalance() {
    return this.#balance;
  }
}

const acc = new BankAccount();
acc.deposit(100);
console.log(acc.getBalance()); // 100

6. Polymorphism

Methods behave differently based on the object context:

class Shape {
  draw() {
    console.log("Drawing a shape...");
  }
}

class Circle extends Shape {
  draw() {
    console.log("Drawing a circle...");
  }
}

let shape1 = new Shape();
let shape2 = new Circle();

shape1.draw(); // Drawing a shape...
shape2.draw(); // Drawing a circle...

Object Prototypes in JavaScript

JavaScript uses prototypal inheritance, meaning objects can inherit properties and methods from a prototype.

1. What is a Prototype?

Every JavaScript object has a hidden internal property called [[Prototype]], accessible via:

Object.getPrototypeOf(obj)

2. Prototype Chain

When you access a property or method on an object, JS looks up the prototype chain:

const user = {
  name: "Alice"
};

console.log(user.toString()); // inherited from Object.prototype

3. ES6 Classes Use Prototypes Under the Hood

class User {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, ${this.name}`);
  }
}

const u1 = new User("John");
u1.greet(); // Hello, John

Here, greet() is on User.prototype.

Factory Functions in JavaScript

A Factory Function is a function that returns a new object. It allows you to create multiple similar objects without using classes or constructor functions.

1. Basic Syntax

function createUser(name, age) {
  return {
    name,
    age,
    greet() {
      console.log(`Hi, I'm ${this.name} and I'm ${this.age} years old.`);
    }
  };
}

const user1 = createUser("Bhupesh", 25);
const user2 = createUser("Alice", 30);

user1.greet(); // Hi, I'm Bhupesh and I'm 25 years old.
user2.greet(); // Hi, I'm Alice and I'm 30 years old.

`new` Operator in JavaScript

The new operator in JavaScript is used to create instances of objects from constructor functions or classes.

1. How `new` Works

When you use the new keyword with a constructor function:

function Person(name) {
  this.name = name;
  this.sayHi = function () {
    console.log(`Hi, I'm ${this.name}`);
  };
}

const p1 = new Person("Bhupesh");
p1.sayHi(); // Hi, I'm Bhupesh

2. What new Does Internally

Using new Person("Bhupesh") is like doing the following steps manually:

Create a blank object: {}
Set its prototype: proto = Person.prototype
Bind this to the new object
Run the constructor function
Return the new object

3. Using new with ES6 Classes

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

  drive() {
    console.log(`${this.brand} is driving.`);
  }
}

const car1 = new Car("Tesla");
car1.drive(); // Tesla is driving.

4. Without new — Common Mistake

If you forget new, this becomes undefined or refers to the global object (in non-strict mode):

function Animal(name) {
  this.name = name;
}

const a = Animal("Tiger");
console.log(a); // undefined

Classes in JavaScript

JavaScript introduced the class syntax in ES6 (ECMAScript 2015) as a cleaner, more familiar way to create objects and handle inheritance.

Under the hood, JavaScript classes are syntactic sugar over its prototype-based inheritance model.

1. Basic Class Declaration

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

  greet() {
    console.log(`Hi, I'm ${this.name} and I'm ${this.age} years old.`);
  }
}

const p1 = new Person("Bhupesh", 25);
p1.greet(); // Hi, I'm Bhupesh and I'm 25 years old.

2. Using super() to Access Parent Class

class Employee {
  constructor(name) {
    this.name = name;
  }
}

class Manager extends Employee {
  constructor(name, department) {
    super(name); // Call parent constructor
    this.department = department;
  }

  info() {
    console.log(`${this.name} manages ${this.department}`);
  }
}

3. Class Fields (Public and Private)

class Counter {
  count = 0; // Public field
  #secret = 42; // Private field (ES2022+)

  increment() {
    this.count++;
  }

  revealSecret() {
    return this.#secret;
  }
}

4. Static Methods

Static methods are called on the class, not instances.

class MathUtils {
  static square(x) {
    return x * x;
  }
}

console.log(MathUtils.square(4)); // 16

Feature	Syntax Example
Class declaration	`class MyClass {}`
Constructor	`constructor(args) { ... }`
Method	`methodName() {}`
Inheritance	`class B extends A`
Call parent	`super()`
Static method	`static myMethod()`
Private field	`#myPrivate = value`

JS (OOP) Summary Sheet

Q1. What is Object-Oriented Programming (OOP)?

A:

Object-Oriented Programming (OOP) is a programming paradigm based on the concept of objects and classes. It structures code into reusable blueprints (classes) that can be used to create individual instances (objects).

Q2. What are some benefits of using OOP in JavaScript?

🧱 Improved code organization
🔁 Reusability of code
🔧 Easier code maintenance
🌐 Real-world modeling using objects

Q3. What is the difference between an object and a class in JavaScript?

Object: An instance containing properties and methods.
Class: A blueprint for creating objects.

Objects are created from classes or constructor functions.

Q4. What is a constructor function in JS?

A:

A constructor function is a special function used to create and initialize objects in JavaScript. When called with the new keyword, it sets up properties and methods for the new object.

Q5. What is a prototype chain in JavaScript?

A:

Every JavaScript object has a prototype, and that prototype is also an object. This forms a prototype chain, which continues until it reaches null.

let obj = {};
console.log(Object.getPrototypeOf(obj)); // => Object.prototype

Q6. What is the difference between a constructor and a class in JS?

Constructor Function: A function used to create and initialize an object.
Class: A syntactic sugar introduced in ES6 that makes constructor functions easier to work with.

Both serve the same purpose, but class syntax is cleaner and more intuitive.

Q7. Why is the new keyword used in JavaScript?

A:
The new keyword is used to:

Create a new object
Set the constructor's this to that object
Return the newly created object

Q8. What is Inheritance in OOP?

A:
Inheritance allows a class to inherit properties and methods from another class. This promotes reusability and models real-world relationships.

class Animal {
  speak() {
    console.log("Animal speaks");
  }
}

class Dog extends Animal {
  speak() {
    console.log("Dog barks");
  }
}

Q9. What is the super keyword in JS?

A:
super is used to:

Access and call functions on an object’s parent class.
Must be used before this in derived class constructors.

class Parent {
  constructor(name) {
    this.name = name;
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name); // Calls Parent constructor
    this.age = age;
  }
}

Q10. What will be the output of the following?

class Box {
  area() {
    return "Box area is 100";
  }
}

class Square extends Box {
  area() {
    return "Square area is 16";
  }
}

const obj = new Square();
console.log(obj.area());

A:
Output: Square area is 16
➡ Because the child class method overrides the parent class method.

That’s a wrap on JavaScript Guide – Part 2!

🚀 Build a Simple To-Do App with JavaScript – A Step-by-Step Guide

Bhupesh Kumar — Sat, 15 Feb 2025 22:54:14 +0000

Managing daily tasks can be overwhelming, but what if you could build your own To-Do App?

In this beginner-friendly guide, we will walk through every step to create a fully functional To-Do App using HTML, CSS, and JavaScript.

What You’ll Learn:

How to build a simple To-Do App UI
Using JavaScript to add, view, complete, and delete tasks
Storing tasks persistently using localStorage
Writing clean HTML, CSS, and JavaScript code
Organizing your project for scalability & maintainability

GitHub Repo: To-Do App

📂 Step 1: Project Setup

Before we start coding, let's set up our project structure.

Create a folder named to-do-app
Inside this folder, create the following files:

to-do-app/

index.html → Main HTML structure
styles.css → Styles for the app
script.js → JavaScript logic
README.md → Documentation

Now, let’s start coding! 🚀

📜 Step 2: Creating the HTML Structure

We need a basic UI for our app, with buttons for adding, viewing, completing, and deleting tasks.

📌 Create an index.html file and add this code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minimal To-Do App</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="container">
        <h2>📝 To-Do App</h2>
        <p>Manage your tasks easily.</p>
        <div class="menu">
            <button class="view" onclick="viewTasks()">📋 View Tasks</button>
            <button class="add" onclick="addTask()">➕ Add Task</button>
            <button class="complete" onclick="completeTask()">✅ Complete Task</button>
            <button class="delete" onclick="deleteTask()">❌ Delete Task</button>
            <button class="exit" onclick="exitApp()">🚪 Exit</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

Understanding the Code

Buttons call JavaScript functions to perform actions.
CSS is linked (styles.css) for styling the app.
JavaScript is linked (script.js) to add functionality.

🎨 Step 3: Styling the App

Now, let’s make our app look clean and modern.

📌 Create a styles.css file and add this code:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');

body {
    font-family: 'Inter', sans-serif;
    background-color: #f4f4f9;
    text-align: center;
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Centered App Container */
.container {
    background: #ffffff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 90%;
}

h2 {
    color: #333;
}

p {
    font-size: 14px;
    color: #666;
}

/* Buttons */
button {
    padding: 12px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    width: 100%;
    border-radius: 8px;
    font-weight: 600;
    outline: none;
    transition: all 0.3s ease-in-out;
}

.view { background-color: #3498db; color: white; }
.add { background-color: #2ecc71; color: white; }
.complete { background-color: #f1c40f; color: black; }
.delete { background-color: #e74c3c; color: white; }
.exit { background-color: #95a5a6; color: white; }

button:hover {
    opacity: 0.85;
    transform: translateY(-2px);
}

Key Takeaways

Uses Inter font for modern typography.
Adds hover effects on buttons.
Applies a centered white card layout for a clean UI.

🚀 Step 4: Adding JavaScript Logic

Now, let's add functionality to our To-Do App.

This guide explains the JavaScript logic used in the To-Do App. Each function plays an important role in managing tasks, storing them, and ensuring they persist even after refreshing the page.

The To-Do App allows users to:

Add tasks via prompt()
View tasks using alert()
Mark tasks as completed
Delete tasks
Store tasks persistently using localStorage

JavaScript is responsible for managing tasks, storing data, and handling user interactions.

Storing and Loading Tasks (`localStorage`)

Before working with tasks, they need to persist across browser sessions.

When the app loads, it retrieves saved tasks from localStorage, ensuring they don't disappear after a refresh.
If no tasks exist, an empty array is initialized.
localStorage.getItem("tasks") fetches saved tasks, and JSON.parse() converts the stored string back into an array.
localStorage.setItem("tasks", JSON.stringify(tasks)) updates the task list whenever a change is made.

Viewing Tasks (`viewTasks()`)

This function displays all tasks in an alert box so users can see their to-do list.

If the task list is empty, an alert notifies the user that no tasks exist.
The function loops through all tasks and formats them:
- Completed tasks show a checkmark [✔].
- Pending tasks show an empty box [ ].
Finally, the formatted list is displayed in an alert box.

Key Concepts

Loops (forEach) iterate over the task list.
Ternary Operator (? :) checks if a task is completed.

Adding a Task (`addTask()`)

Users can add a new task to their list using this function.

A prompt() asks the user for task input.
The task is stored as an object with { text: "task name", completed: false }.
The task is pushed into the array and saved in localStorage to ensure persistence.

Key Concepts

User input is taken via prompt().
Objects store task details (text and completion status).
.push() method adds a new task to the array.

Marking a Task as Completed (`completeTask()`)

Users can mark tasks as completed or undo completion.

The task list is displayed.
The user enters the task number they want to complete.
The task’s completion status is toggled (if incomplete, it becomes complete and vice versa).
The updated list is saved in localStorage.

Key Concepts

Boolean toggling (!variable) flips true to false and vice versa.
parseInt() converts user input into a number.

Deleting a Task (`deleteTask()`)

Users can remove a task from their to-do list.

The task list is displayed so users can see the task numbers.
The user enters the task number they want to delete.
The task is removed using .splice().
The updated task list is saved to localStorage.

Key Concepts

.splice(index, 1) removes one item at the given index.

Saving Tasks (`saveTasks()`)

Whenever the task list is updated (added, completed, or deleted), it needs to be saved.

Converts the tasks array into a JSON string using JSON.stringify().
Saves it in localStorage using setItem().

Key Concept

localStorage only supports string data, so arrays and objects need conversion.

Exiting the App (`exitApp()`)

This function simply displays a thank-you message when users exit the app.

Key Concept

Uses alert() to show a simple exit message.

Summary

By understanding this JavaScript code, you now know:

How JavaScript manipulates and stores data
How localStorage keeps data persistent
How user input is handled with prompt()
How tasks are dynamically updated in an array

Now, you fully understand the To-Do App’s JavaScript logic. Below is the full JavaScript code for reference:

📌 Create a script.js file and add:

// Load tasks from localStorage
let tasks = JSON.parse(localStorage.getItem("tasks")) || [];

// Function to display tasks
function viewTasks() {
    if (tasks.length === 0) {
        alert("No tasks yet. Add one!");
        return;
    }
    let taskList = "Your To-Do List:\n";
    tasks.forEach((task, index) => {
        let status = task.completed ? "[✔]" : "[ ]";
        taskList += `${index + 1}. ${status} ${task.text}\n`;
    });
    alert(taskList);
}

// Function to add a task
function addTask() {
    let taskText = prompt("Enter your task:");
    if (taskText) {
        tasks.push({ text: taskText, completed: false });
        saveTasks();
        alert("Task added successfully!");
    }
}

// Function to mark a task as completed
function completeTask() {
    viewTasks();
    let taskNumber = parseInt(prompt("Enter task number to mark as completed:"));
    if (!isNaN(taskNumber) && taskNumber > 0 && taskNumber <= tasks.length) {
        tasks[taskNumber - 1].completed = !tasks[taskNumber - 1].completed;
        saveTasks();
        alert("Task updated!");
    }
}

// Function to delete a task
function deleteTask() {
    viewTasks();
    let taskNumber = parseInt(prompt("Enter task number to delete:"));
    if (!isNaN(taskNumber) && taskNumber > 0 && taskNumber <= tasks.length) {
        tasks.splice(taskNumber - 1, 1);
        saveTasks();
        alert("Task deleted!");
    }
}

// Function to save tasks to localStorage
function saveTasks() {
    localStorage.setItem("tasks", JSON.stringify(tasks));
}

🎯 Summary

By completing this guide, you now have:

A working To-Do App
Basic JavaScript skills
LocalStorage implementation
A clean, responsive UI

🚀 Try it out, experiment, and enhance your skills! 😊

Web Dev Day 6: JavaScript Guide Part 1

Bhupesh Kumar — Sun, 09 Feb 2025 00:37:54 +0000

What is a Variable?

A variable in JavaScript is a named container that holds a value. It allows us to store, update, and retrieve data dynamically.

JavaScript provides three ways to declare variables:

var (old syntax)
let (modern)
const (for constants)

let name = "Bhupesh"; 
const age = 25; 
var country = "Canada";

Data Types in JS

JavaScript has primitive and non-primitive data types.

Primitive Data Types

These are immutable and stored directly in memory:

String → "Hello"
Number → 42
Boolean → true, false
Undefined → let x; (not assigned)
Null → let y = null; (empty value)
BigInt → 12345678901234567890123n
Symbol → Symbol('unique')

Non-Primitive Data Types

These are reference types and stored as objects:

Objects → { name: "John", age: 30 }
Arrays → ["apple", "banana", "cherry"]
Functions →

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

Numbers in JavaScript

JavaScript has only one type for numbers: floating-point numbers.

Example:

let a = 10;       // Integer
let b = 10.5;     // Float
let c = 1e3;      // Scientific notation (1000)

Special Number Values:

Infinity → console.log(1 / 0);
-Infinity → console.log(-1 / 0);
NaN (Not-a-Number) → console.log("hello" * 2);

Operations in JavaScript

JavaScript supports the following operators:

Arithmetic Operators: +, -, *, /, %, **
Comparison Operators: ==, ===, !=, !==, >, <, >=, <=
Logical Operators: &&, ||, !
Bitwise Operators: &, |, ^, ~, <<, >>
Ternary Operator: condition ? trueValue : falseValue

Example:

console.log(5 + 2);  // 7
console.log(10 / 2); // 5
console.log(3 ** 2); // 9 (Exponentiation)

NaN in JavaScript

NaN stands for "Not-a-Number." It occurs when an operation does not yield a valid number.

Example:

console.log("hello" * 2); // NaN
console.log(0 / 0);       // NaN

Operator Precedence in JavaScript

Operator precedence determines how expressions are evaluated in JavaScript.

Operator Type	Operators	Precedence
Parentheses	`()`	Highest
Exponentiation	`**`	2
Multiplication, Division, Modulus	`*`, `/`, `%`	3
Addition, Subtraction	`+`, `-`	4
Relational	`<`, `>`, `<=`, `>=`	5
Equality	`==`, `===`, `!=`, `!==`	6
Logical AND	`&&`	7
Logical OR	`

Example:

{% raw %}

console.log(5 + 3 * 2);    // 11 (Multiplication first)
console.log((5 + 3) * 2);  // 16 (Parentheses first)

`let` Keyword

The let keyword was introduced in ES6. It has the following properties:

Block-scoped (Only accessible within the block {} it is declared in).
Can be reassigned but cannot be redeclared within the same scope.

Example:

let x = 10;
x = 20;  // ✅ Allowed

let x = 30; // ❌ Error (Cannot redeclare)

`const` Keyword

The const keyword has the following properties:

Block-scoped (Like let, it is confined within the block {} it is declared in).
Cannot be reassigned after declaration.
Cannot be redeclared in the same scope.
Must be initialized when declared.

Example:

const PI = 3.1416;
PI = 3.14; // ❌ Error (Cannot reassign)

`var` Keyword (Old Syntax)

The var keyword is function-scoped, meaning:

Can be redeclared and reassigned.
Not recommended in modern JavaScript due to scoping issues.

Example:

var name = "Alice";
var name = "Bob";  // ✅ Allowed (but not good practice)

Assignment Operators in JavaScript

Assignment operators are used to assign values to variables.

Operator	Example	Meaning
`=`	`x = 5`	Assigns `5` to `x`
`+=`	`x += 2`	`x = x + 2`
`-=`	`x -= 3`	`x = x - 3`
`*=`	`x *= 4`	`x = x * 4`
`/=`	`x /= 5`	`x = x / 5`
`%=`	`x %= 2`	`x = x % 2`

Unary Operators in JavaScript

Unary operators operate on a single operand.

Operator	Description	Example	Output
`+` (Unary plus)	Converts value to a number	`+"42"`	`42`
`-` (Unary minus)	Negates a number	`-10`	`-10`
`++` (Increment)	Increases value by `1`	`let x = 1; x++`	`2`
`--` (Decrement)	Decreases value by `1`	`let y = 2; y--`	`1`
`typeof`	Returns the type of a value	`typeof 42`	`"number"`

Identifiers Rule in JavaScript

Identifiers are names used for variables, functions, and objects. JavaScript follows these rules:

Valid Identifiers:

Can include letters, digits, underscores (_), and dollar signs ($).
Cannot start with a digit.
JavaScript is case-sensitive.

Valid Identifiers:

let firstName;
let _privateVar;
let $price;

Invalid Identifiers in JavaScript

JavaScript has strict rules for naming identifiers. The following are invalid identifiers:

let 2name;    // ❌ Error (Cannot start with a digit)
let my-name;  // ❌ Error (Hyphens are not allowed)

camelCase Naming Convention in JavaScript

JavaScript follows the camelCase naming convention, where:

The first word is lowercase.
Each subsequent word starts with an uppercase letter.

Example:

let userName;
let totalAmount;
let firstName;

Boolean in JavaScript

A Boolean represents either true or false.

Example:

let isLoggedIn = true;
let hasDiscount = false;

Boolean Conversion:

console.log(Boolean(0));        // false
console.log(Boolean("Hello"));  // true

What is TypeScript?

TypeScript is a superset of JavaScript that:

Adds static typing to JavaScript.
Prevents runtime errors by catching issues during development.
Compiles to JavaScript, making it compatible with all JS environments.

Static vs. Dynamic Typing:

TypeScript is statically typed, meaning variable types are checked at compile time.
JavaScript is dynamically typed, meaning types are inferred at runtime.

Example:

let age: number = 25;  // TypeScript

String in JavaScript

A string is a sequence of characters enclosed in quotes ("" or '').

Example:

let greeting = "Hello, World!";
console.log(greeting.length); // 13

String Indices in JavaScript

Each character in a string has an index, starting from 0.

Example:

let str = "JavaScript";
console.log(str[0]);             // "J"
console.log(str[str.length - 1]); // "t"

String Concatenation in JavaScript

Concatenation is the process of joining two or more strings together.

Methods of Concatenation:

Using the + operator (Most common)
Using the .concat() method (Less common)

Example:

console.log("Hello" + " " + "World"); // "Hello World"
console.log("Hi".concat(" there!"));  // "Hi there!"

`null` and `undefined` in JavaScript

In JavaScript, null and undefined are special values that represent the absence of a value, but they have different meanings.

`undefined`

A variable is undefined when it is declared but not assigned a value.
It is the default value of an uninitialized variable.

Example:

let x;
console.log(x); // undefined

`null` in JavaScript

In JavaScript, null represents an intentional absence of any object value.

It signifies that a variable intentionally holds no value.
null must be explicitly assigned.

Example:

let y = null;
console.log(y); // null

`console.log()` in JavaScript

console.log() is a built-in JavaScript method used to print output to the console.

Usage:

console.log("Hello, World!"); // Output: Hello, World!
console.log(5 + 3);          // Output: 8

Linking a JavaScript File to HTML

To use JavaScript in an HTML file, you need to link an external JavaScript file using the <script> tag.

How to Link an External JavaScript File

Create an HTML file (index.html)
Create a JavaScript file (script.js)
Link the JavaScript file in the HTML file

Example:

`index.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Linking</title>
</head>
<body>
    <h1>Welcome to JavaScript</h1>

    <!-- Linking JavaScript -->
    <script src="script.js"></script>
</body>
</html>

Template Literals in JavaScript

Template literals (also called template strings) allow for easier string manipulation using backticks () instead of quotes.

Syntax:

This is a template literal

String Interpolation
Use ${} to insert variables or expressions directly into a string.

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

console.log(`My name is ${name} and I am ${age} years old.`);
// Output: My name is Alice and I am 25 years old.

Multi-line Strings
Template literals allow multi-line strings without needing \n.

let message = `This is line 1
This is line 2
This is line 3`;

console.log(message);

Expression Evaluation
You can use expressions inside ${}.

let a = 5, b = 10;

console.log(`The sum of ${a} and ${b} is ${a + b}.`);
// Output: The sum of 5 and 10 is 15.

Operators in JavaScript

JavaScript supports various operators to perform operations on variables and values.

Arithmetic Operators

Used to perform mathematical operations.

Operator	Description	Example	Output
`+`	Addition	`5 + 3`	`8`
`-`	Subtraction	`10 - 4`	`6`
`*`	Multiplication	`2 * 5`	`10`
`/`	Division	`10 / 2`	`5`
`%`	Modulus (Remainder)	`10 % 3`	`1`
`**`	Exponentiation (Power)	`3 ** 2`	`9`

Example:

console.log(5 + 2);  // 7
console.log(10 / 2); // 5
console.log(3 ** 2); // 9 (Exponentiation)

Assignment Operators in JavaScript

Assignment operators are used to assign values to variables.

List of Assignment Operators

Operator	Example	Meaning
`=`	`x = 5`	Assigns `5` to `x`
`+=`	`x += 2`	`x = x + 2`
`-=`	`x -= 3`	`x = x - 3`
`*=`	`x *= 4`	`x = x * 4`
`/=`	`x /= 5`	`x = x / 5`
`%=`	`x %= 2`	`x = x % 2`

🔹 Example Usage

let x = 10;
x += 5;   // x = 15
x *= 2;   // x = 30
console.log(x); // Output: 30

Comparison Operators in JavaScript

Comparison operators are used to compare values and return a Boolean (true or false).

List of Comparison Operators

Operator	Description	Example	Output
`==`	Equal to (loose comparison)	`5 == "5"`	`true`
`===`	Strictly equal (Type + Value)	`5 === "5"`	`false`
`!=`	Not equal	`5 != "5"`	`false`
`!==`	Strictly not equal	`5 !== "5"`	`true`
`>`	Greater than	`10 > 5`	`true`
`<`	Less than	`3 < 5`	`true`
`>=`	Greater than or equal to	`10 >= 10`	`true`
`<=`	Less than or equal to	`3 <= 5`	`true`

Example Usage

console.log(5 == "5");  // true (loose comparison)
console.log(5 === "5"); // false (strict comparison)

`5 == '5'` in JavaScript

In JavaScript, the expression 5 == '5' evaluates to true.

This happens because == is the loose equality operator, which performs type coercion before comparing values.

Loose Equality (`==`) vs. Strict Equality (`===`)

Expression	Result	Explanation
`5 == '5'`	`true`	Loose equality (`==`) converts types before comparison. The string `'5'` is converted to a number `5`.
`5 === '5'`	`false`	Strict equality (`===`) does not perform type conversion. Since `5` (number) and `'5'` (string) have different types, the result is `false`.

Example Usage

console.log(5 == '5');  // true (loose comparison with type coercion)
console.log(5 === '5'); // false (strict comparison without type coercion)

Logical Operators in JavaScript

Logical operators are used to combine conditions and return a Boolean (true or false).

List of Logical Operators

Operator	Description	Example	Output
`&&`	Logical AND	`true && false`	`false`
`		`	Logical OR
`!`	Logical NOT	`!true`	`false`

Example Usage

console.log(true && false);  // false
console.log(true || false);  // true
console.log(!true);          // false

Bitwise Operators in JavaScript

Bitwise operators are used to perform binary calculations by manipulating bits directly.

List of Bitwise Operators

Operator	Description	Example
`&`	AND	`5 & 1`
'	'	OR
`^`	XOR	`5 ^ 1`
`~`	NOT	`~5`
`<<`	Left shift	`5 << 1`
`>>`	Right shift	`5 >> 1`

Example Usage

console.log(5 & 1);  // 1  (AND operation)
console.log(5 | 1);  // 5  (OR operation)
console.log(5 ^ 1);  // 4  (XOR operation)
console.log(~5);     // -6 (NOT operation)
console.log(5 << 1); // 10 (Left shift)
console.log(5 >> 1); // 2  (Right shift)

Ternary Operator in JavaScript

The ternary operator is a shorthand for if...else statements.

It allows writing conditional logic in a compact and readable way.

Syntax:

condition ? trueValue : falseValue;

Comparisons for Non-Numbers in JavaScript

JavaScript allows comparisons not only for numbers but also for strings, Booleans, and other data types.

When comparing non-numeric values, JavaScript applies type conversion rules.

Comparing Strings

JavaScript compares strings lexicographically (alphabetical order) based on Unicode values.
Uppercase letters (A-Z) come before lowercase letters (a-z).

Example:

console.log("apple" > "banana");  // false (because "a" comes before "b")
console.log("Zoo" > "apple");     // false (uppercase "Z" comes before lowercase "a")
console.log("Hello" > "hello");   // false (uppercase "H" < lowercase "h")

Comparing Booleans in JavaScript

In JavaScript, Booleans (true and false) are converted to numbers when used in comparisons:

false is treated as 0
true is treated as 1

Example:

console.log(true > false);  // true (1 > 0)
console.log(false == 0);    // true (false → 0)
console.log(true == 1);     // true (true → 1)
console.log(false < true);  // true (0 < 1)

Comparing `null` and `undefined` in JavaScript

JavaScript treats null and undefined differently in comparisons.

Example:

console.log(null == undefined);  // true (special case)
console.log(null === undefined); // false (strict comparison)
console.log(null > 0);           // false
console.log(null == 0);          // false
console.log(null >= 0);          // true (strange behavior)
console.log(undefined > 0);      // false
console.log(undefined == 0);     // false
console.log(undefined >= 0);     // false

Comparing Objects in JavaScript

In JavaScript, objects are not directly comparable.

They are compared by reference, not by value.

Example:

let obj1 = { name: "Alice" };
let obj2 = { name: "Alice" };

console.log(obj1 == obj2);  // false (different memory references)
console.log(obj1 === obj2); // false (even though they look the same)

Conditional Statements in JavaScript

Conditional statements allow a program to make decisions based on conditions.

JavaScript provides multiple ways to handle conditions.

`if` Statement

The if statement executes code only if a condition is true.

Syntax:

if (condition) {
    // Code to execute if the condition is true
}

`if...else` Statement in JavaScript

The if...else statement executes one block of code if the condition is true and another block if it is false.

Example:

let age = 16;

if (age >= 18) {
    console.log("You can vote.");
} else {
    console.log("You cannot vote.");
}
// Output: "You cannot vote."

`if...else if...else` Statement in JavaScript

The if...else if...else statement is used when multiple conditions need to be checked sequentially.

JavaScript evaluates each condition in order, and the first condition that evaluates to true gets executed.

Example:

let score = 85;

if (score >= 90) {
    console.log("Grade: A");
} else if (score >= 80) {
    console.log("Grade: B");
} else if (score >= 70) {
    console.log("Grade: C");
} else {
    console.log("Grade: F");
}
// Output: "Grade: B"

Ternary Operator (`? :`) in JavaScript

The ternary operator is a shorter and more concise way to write an if...else statement.

It is useful for simple conditions where you want to assign a value or execute a statement based on a condition.

Syntax:

condition ? trueValue : falseValue;

`switch` Statement in JavaScript

The switch statement is used when a variable needs to be compared against multiple values.

It is often used as a cleaner alternative to multiple if...else if...else statements.

Syntax:

switch (expression) {
    case value1:
        // Code to execute if expression === value1
        break;
    case value2:
        // Code to execute if expression === value2
        break;
    default:
        // Code to execute if no cases match
}

Nested `if...else` in JavaScript

A nested if...else statement is an if...else inside another if or else.

It allows checking multiple conditions in a hierarchical manner.

Syntax:

if (condition1) {
    if (condition2) {
        // Code to execute if both conditions are true
    } else {
        // Code to execute if condition1 is true but condition2 is false
    }
} else {
    // Code to execute if condition1 is false
}

Logical Operators in JavaScript

Logical operators are used to combine multiple conditions and return a Boolean (true or false).

They are essential for making decisions in conditional statements.

List of Logical Operators

Operator	Description	Example	Output
`&&`	Logical AND	`true && false`	`false`
`		`	Logical OR
`!`	Logical NOT	`!true`	`false`

Example Usage

console.log(true && false);  // false
console.log(true || false);  // true
console.log(!true);          // false

Truthy and Falsy Values in JavaScript

In JavaScript, every value is either "truthy" or "falsy" when evaluated in a Boolean context.

Truthy values behave like true when used in a condition.
Falsy values behave like false when used in a condition.

Falsy Values

A falsy value is a value that evaluates to false in a Boolean context.

JavaScript has exactly 8 falsy values:

Falsy Value	Description
`false`	Boolean `false` itself
`0`	Number zero
`-0`	Negative zero
`0n`	BigInt zero
`""`	Empty string
`null`	Absence of a value
`undefined`	Uninitialized variable
`NaN`	Not-a-Number

Example:

if (0) {
    console.log("Truthy");
} else {
    console.log("Falsy");
}
// Output: "Falsy"

if ("") {
    console.log("Truthy");
} else {
    console.log("Falsy");
}
// Output: "Falsy"

Truthy Values in JavaScript

A truthy value is any value that is not falsy.

In JavaScript, all values are truthy unless they are in the list of falsy values (false, 0, "", null, undefined, NaN, etc.).

Common Truthy Values

Truthy Value	Example
Non-empty strings	`"hello"`, `"false"`, `"0"`
Numbers except `0`	`42`, `-1`, `3.14`
Non-empty arrays	`[]`
Non-empty objects	`{}`
Functions	`function() {}`
Special values	`" "` (space), `"0"` (string zero)

Example:

if ("Hello") {
    console.log("Truthy");
} else {
    console.log("Falsy");
}
// Output: "Truthy"

if (42) {
    console.log("Truthy");
} else {
    console.log("Falsy");
}
// Output: "Truthy"

Alerts and Prompts in JavaScript

JavaScript provides built-in methods to interact with users using alerts, prompts, and confirmations.

`alert()`

The alert() method displays a pop-up message to the user.

Syntax:

alert("This is an alert!");

`prompt()` in JavaScript

The prompt() method is used to ask the user for input via a pop-up dialog.

It returns the user input as a string, or null if the user clicks "Cancel".

Syntax:

let userInput = prompt("Enter your name:");

`confirm()` in JavaScript

The confirm() method displays a pop-up asking for user confirmation.

It returns:

true if the user clicks "OK".
false if the user clicks "Cancel".

Syntax:

let result = confirm("Are you sure?");

String Methods in JavaScript

JavaScript provides many built-in methods to manipulate and work with strings.

These methods help in searching, replacing, slicing, and modifying strings efficiently.

Common String Methods

Method	Description	Example
`.length`	Returns the string length	`"Hello".length` → `5`
`.toUpperCase()`	Converts to uppercase	`"hello".toUpperCase()` → `"HELLO"`
`.toLowerCase()`	Converts to lowercase	`"HELLO".toLowerCase()` → `"hello"`
`.charAt(index)`	Returns character at index	`"JavaScript".charAt(4)` → `"S"`
`.indexOf("str")`	Returns first occurrence index	`"hello".indexOf("l")` → `2`
`.lastIndexOf("str")`	Returns last occurrence index	`"hello".lastIndexOf("l")` → `3`
`.includes("str")`	Checks if string contains substring	`"hello".includes("he")` → `true`
`.startsWith("str")`	Checks if string starts with substring	`"hello".startsWith("he")` → `true`
`.endsWith("str")`	Checks if string ends with substring	`"hello".endsWith("lo")` → `true`
`.slice(start, end)`	Extracts substring (end not included)	`"JavaScript".slice(0, 4)` → `"Java"`
`.substring(start, end)`	Similar to `.slice()`, but can't accept negative indexes	`"JavaScript".substring(0, 4)` → `"Java"`
`.substr(start, length)`	Extracts substring of specific length	`"JavaScript".substr(4, 6)` → `"Script"`
`.replace("old", "new")`	Replaces first match	`"hello world".replace("world", "JS")` → `"hello JS"`
`.replaceAll("old", "new")`	Replaces all occurrences	`"apple apple".replaceAll("apple", "banana")` → `"banana banana"`
`.split("delimiter")`	Splits into an array	`"one,two,three".split(",")` → `["one", "two", "three"]`
`.trim()`	Removes spaces from start & end	`" hello ".trim()` → `"hello"`
`.repeat(n)`	Repeats string n times	`"Hi ".repeat(3)` → `"Hi Hi Hi "`

Example Usage:

let text = "JavaScript is fun!";

console.log(text.length);          // 18
console.log(text.toUpperCase());   // "JAVASCRIPT IS FUN!"
console.log(text.toLowerCase());   // "javascript is fun!"
console.log(text.charAt(0));       // "J"
console.log(text.includes("fun")); // true
console.log(text.startsWith("Java")); // true
console.log(text.endsWith("fun!"));  // true
console.log(text.slice(0, 10));     // "JavaScript"
console.log(text.replace("fun", "awesome")); // "JavaScript is awesome!"
console.log(text.split(" "));      // ["JavaScript", "is", "fun!"]
console.log("  hello  ".trim());   // "hello"

`trim()` Method in JavaScript

The trim() method removes whitespace from both ends of a string (start & end), without affecting the spaces inside the string.

Syntax:

string.trim();

Strings are Immutable in JavaScript

In JavaScript, strings are immutable, meaning they cannot be changed after they are created.

Any operation that appears to modify a string actually returns a new string, leaving the original string unchanged.

Example:

let str = "Hello";
str[0] = "J";  // Attempt to change the first letter
console.log(str);  
// Output: "Hello" (unchanged)

String Methods with Arguments in JavaScript

Many string methods in JavaScript accept arguments, allowing you to manipulate strings dynamically.

Common String Methods with Arguments

Method	Description	Example
`.charAt(index)`	Returns the character at a specific index	`"JavaScript".charAt(4)` → `"S"`
`.slice(start, end)`	Extracts a substring (end not included)	`"JavaScript".slice(0, 4)` → `"Java"`
`.substring(start, end)`	Extracts substring (similar to `.slice()`)	`"JavaScript".substring(4, 10)` → `"Script"`
`.substr(start, length)`	Extracts a substring of specific length	`"JavaScript".substr(4, 6)` → `"Script"`
`.replace("old", "new")`	Replaces the first occurrence	`"hello world".replace("world", "JS")` → `"hello JS"`
`.replaceAll("old", "new")`	Replaces all occurrences	`"apple apple".replaceAll("apple", "banana")` → `"banana banana"`
`.split("delimiter")`	Splits into an array based on a delimiter	`"one,two,three".split(",")` → `["one", "two", "three"]`
`.repeat(n)`	Repeats the string n times	`"Hi ".repeat(3)` → `"Hi Hi Hi "`

`indexOf()` Method in JavaScript

The indexOf() method returns the first occurrence index of a specified substring within a string.

If the substring is not found, it returns -1.

Syntax:

string.indexOf(searchValue, startIndex);

Method Chaining in JavaScript

Method chaining is a technique in JavaScript where multiple methods are called on an object in a single statement.

This makes the code cleaner and more readable.

Example:

let text = "  JavaScript Method Chaining  ";

let result = text.trim().toUpperCase().replace("CHAINING", "MAGIC");

console.log(result);
// Output: "JAVASCRIPT METHOD MAGIC"

`slice()` Method in JavaScript

The slice() method extracts a portion of a string and returns a new string without modifying the original string.

Syntax:

string.slice(startIndex, endIndex);

`replace()` Method

The replace() method searches for a specified substring and replaces it with a new value.

By default, it only replaces the first occurrence unless you use replaceAll().

Syntax:

string.replace(searchValue, newValue);

`repeat()` Method in JavaScript

The repeat() method creates a new string by repeating the original string n times.

Syntax:

string.repeat(n);

Array Data Structure in JavaScript

An array in JavaScript is a data structure that allows storing multiple values in a single variable.

It can hold elements of different data types, including numbers, strings, objects, and even other arrays.

Creating an Array

Using Square Brackets `[]` (Most Common)

let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits);
// Output: ["Apple", "Banana", "Cherry"]

Creating an Array Using `new Array()` in JavaScript

JavaScript allows you to create arrays using the new Array() constructor.

This method is less commonly used than square brackets [], but it's useful in certain cases.

Syntax:

let arrayName = new Array(element1, element2, ...);

Mixed Arrays in JavaScript

A mixed array in JavaScript is an array that contains multiple data types, including:

Numbers
Strings
Booleans
Objects
Arrays
Functions

Creating a Mixed Array

JavaScript allows arrays to hold multiple data types in the same array.

let mixedArray = [42, "Hello", true, { name: "Alice" }, [1, 2, 3], function() { return "Hi!"; }];

console.log(mixedArray);
// Output: [42, "Hello", true, {name: "Alice"}, [1, 2, 3], function]

Accessing Characters in a String Inside an Array

In JavaScript, when you store a string inside an array, you can access individual characters using indexing.

Example:

let arr = ["bhupesh", 1, 2];

console.log(arr[0][0]); // "b"
console.log(arr[0][1]); // "h"
console.log(arr[0][2]); // "u"

Arrays are Mutable in JavaScript

In JavaScript, arrays are mutable, meaning their elements can be modified, added, or removed without changing their reference in memory.

Example: Modifying an Array

let numbers = [1, 2, 3, 4];

numbers[1] = 99;  // Changing the value at index 1

console.log(numbers);
// Output: [1, 99, 3, 4]

Array Methods in JavaScript

JavaScript provides various built-in array methods to manipulate and process arrays efficiently.

Common Array Methods

Method	Description	Example
`.push(value)`	Adds an element to the end	`arr.push("Mango")`
`.pop()`	Removes the last element	`arr.pop()`
`.unshift(value)`	Adds an element to the beginning	`arr.unshift("First")`
`.shift()`	Removes the first element	`arr.shift()`
`.indexOf(value)`	Returns index of value	`arr.indexOf("Apple")`
`.includes(value)`	Checks if array contains value	`arr.includes("Banana")` → `true`
`.slice(start, end)`	Returns a portion of an array	`arr.slice(1, 3)`
`.splice(start, deleteCount, item)`	Removes or adds elements	`arr.splice(2, 1, "New")`
`.reverse()`	Reverses the array	`arr.reverse()`
`.sort()`	Sorts array alphabetically	`arr.sort()`
`.concat(arr2)`	Combines two arrays	`arr.concat(arr2)`
`.join(separator)`	Converts array to string	`arr.join(", ")`
`.map(fn)`	Creates a new array by applying function	`arr.map(x => x * 2)`
`.filter(fn)`	Returns elements that match a condition	`arr.filter(x => x > 5)`
`.reduce(fn, initialValue)`	Reduces array to a single value	`arr.reduce((sum, num) => sum + num, 0)`
`.forEach(fn)`	Iterates over each element	`arr.forEach(x => console.log(x))`

Example Usage:

Adding & Removing Elements

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

fruits.push("Mango");  // Adds to the end
fruits.unshift("Mango"); // Adds to the beginning

console.log(fruits);
// Output: ["Mango", "Apple", "Banana", "Cherry"]

Extracting a Portion of an Array (`slice()`)

The slice() method extracts a portion of an array without modifying the original array.

Example:

let colors = ["Red", "Green", "Blue", "Yellow"];

let slicedColors = colors.slice(1, 3);
console.log(slicedColors);
// Output: ["Green", "Blue"]

Modifying an Array Using `splice()` in JavaScript

The splice() method allows you to add, remove, or replace elements in an array by modifying the original array.

Syntax:

array.splice(startIndex, deleteCount, item1, item2, ...);

Transforming an Array Using `map()` in JavaScript

The map() method creates a new array by applying a function to each element of an existing array.

It does not modify the original array.

Syntax:

array.map(function(element, index, array) {
    return modifiedElement;
});

Filtering an Array (`filter()`)

The filter() method returns a new array containing only elements that match a specified condition.

Syntax:

array.filter(function(element, index, array) {
    return condition;
});

Reducing an Array Using `reduce()` in JavaScript

The reduce() method reduces an array to a single value by applying a function.

It is commonly used for summation, finding maximum/minimum values, and more.

Syntax:

array.reduce(function(accumulator, element, index, array) {
    return newAccumulator;
}, initialValue);

Issue with Sorting Numbers Using `sort()` in JavaScript

By default, the sort() method in JavaScript treats numbers as strings,

leading to incorrect sorting results.

Incorrect Sorting (Default Behavior)

Example:

let numbers = [10, 5, 40, 25, 1];

console.log(numbers.sort());
// Output: [1, 10, 25, 40, 5] (Incorrect)

The sort() method converts numbers to strings before sorting.
When sorting strings, JavaScript compares character by character (lexicographical order).
Since "1" comes before "5", "10" is placed before "5".

Array References in JavaScript

In JavaScript, arrays are reference types, meaning they are stored by reference rather than by value.

This affects how arrays are assigned, compared, and modified.

Example: Arrays Are Stored by Reference

let arr1 = [1, 2, 3];
let arr2 = arr1;  // Both variables point to the same array

arr2.push(4);

console.log(arr1); // Output: [1, 2, 3, 4]
console.log(arr2); // Output: [1, 2, 3, 4]

Constant Arrays in JavaScript (`const` Arrays)

In JavaScript, arrays declared with const are not immutable.

You cannot reassign a const array, but you can modify its contents.

Declaring a Constant Array

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

console.log(numbers); 
// Output: [1, 2, 3, 4]

Nested Arrays in JavaScript (Multi-Dimensional Arrays)

A nested array (or multi-dimensional array) is an array that contains other arrays as elements.

These are useful for representing grids, tables, or hierarchical data structures.

Creating a Nested Array

let matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

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

`for` Loops in JavaScript

A for loop in JavaScript is used to execute a block of code multiple times.

It is commonly used for iterating over arrays, objects, and performing repetitive tasks.

Basic Syntax:

for (initialization; condition; iteration) {
    // Code to execute
}

Nested `for` Loops in JavaScript

A nested for loop is a loop inside another loop.

It is commonly used for working with multi-dimensional arrays, tables, and grids.

Basic Syntax:

for (initialization; condition; iteration) {
    for (initialization; condition; iteration) {
        // Code to execute
    }
}

`while` Loops in JavaScript

A while loop in JavaScript executes a block of code repeatedly as long as the condition remains true.

It is useful when the number of iterations is not known beforehand.

Basic Syntax:

while (condition) {
    // Code to execute
}

`break` Keyword in JavaScript

The break keyword in JavaScript is used to exit a loop or switch statement prematurely.

It immediately stops execution and exits the loop.

Basic Syntax:

for (initialization; condition; iteration) {
    if (exitCondition) {
        break;  // Exit the loop
    }
}

Looping Through Arrays in JavaScript

JavaScript provides multiple ways to iterate over arrays using different loops.

Each method has its own use case, performance, and readability.

Using a `for` Loop (Traditional Way)

The for loop gives full control over iteration using an index.

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

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

/* Output:
Apple
Banana
Cherry
*/

Looping Through Nested Arrays in JavaScript

A nested array (or multi-dimensional array) is an array that contains other arrays as elements.

To iterate over nested arrays, you need nested loops.

Example: Looping Through a 2D Array Using a `for` Loop

let matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

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

/* Output:
1
2
3
4
5
6
7
8
9
*/

`for...of` Loop in JavaScript

The for...of loop in JavaScript is used to iterate over iterable objects like:

Arrays
Strings
Maps
Sets
NodeLists

Basic Syntax:

for (let variable of iterable) {
    // Code to execute
}

Nested `for...of` Loop in JavaScript

A nested for...of loop is used to iterate over multi-dimensional arrays or nested structures.

It is commonly used when working with nested arrays (2D arrays), objects inside arrays, or matrices.

Basic Syntax:

for (let outerElement of outerIterable) {
    for (let innerElement of innerIterable) {
        // Code to execute
    }
}

Object Literals in JavaScript

An object literal in JavaScript is a way to create an object using key-value pairs.

It is the most common and convenient method for defining objects.

Creating an Object Literal

let person = {
    name: "Bhupesh",
    age: 25,
    city: "Waterloo"
};

console.log(person);
// Output: { name: "Bhupesh", age: 25, city: "Waterloo" }

Getting Values from an Object in JavaScript

There are multiple ways to retrieve values from an object in JavaScript.

1. Using Dot Notation (`.`)

Dot notation is the simplest way to access object properties.

let person = {
    name: "Alice",
    age: 25,
    city: "New York"
};

console.log(person.name);  // Output: "Alice"
console.log(person.age);   // Output: 25

2. Using Bracket Notation ([])

console.log(person["city"]); // Output: "New York"

3. Using Object.values()

let car = { brand: "Toyota", model: "Corolla", year: 2023 };

console.log(Object.values(car));
// Output: ["Toyota", "Corolla", 2023]

4. Looping Through an Object (for...in)

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

/* Output:
Alice
25
New York
*/

Adding and Updating Values in JavaScript Objects

In JavaScript, you can add new properties or update existing values in an object using:

Dot notation (.)
Bracket notation ([])

1. Adding a New Property

Using Dot Notation:

let person = { name: "Alice", age: 25 };

person.city = "New York"; // Adds a new property

console.log(person);
// Output: { name: "Alice", age: 25, city: "New York" }

Using Bracket Notation:

person["country"] = "USA"; // Adds a new property

console.log(person);
// Output: { name: "Alice", age: 25, city: "New York", country: "USA" }

2. Updating an Existing Property

person.age = 30; // Updating an existing value
console.log(person.age); 
// Output: 30

person["name"] = "Bob";
console.log(person.name);
// Output: "Bob"

3. Adding or Updating Nested Properties

let student = {
    name: "John",
    grades: { math: 80, science: 90 }
};

// Updating an existing nested value
student.grades.math = 95;

// Adding a new subject
student.grades.english = 85;

console.log(student);

/* Output:
{
    name: "John",
    grades: { math: 95, science: 90, english: 85 }
}
*/

4. Using Object.assign() to Add/Update Multiple Values

Object.assign(person, { age: 35, gender: "Female" });

console.log(person);
// Output: { name: "Bob", age: 35, city: "New York", country: "USA", gender: "Female" }

5. Using the Spread Operator (...) to Add/Update

let updatedPerson = { ...person, age: 40, hobby: "Reading" };

console.log(updatedPerson);
// Output: { name: "Bob", age: 40, city: "New York", country: "USA", gender: "Female", hobby: "Reading" }

Nested Objects in JavaScript

A nested object is an object inside another object.

This is useful for representing hierarchical data such as users, products, and configurations.

Creating a Nested Object

let person = {
    name: "Alice",
    age: 25,
    address: {
        street: "123 Main St",
        city: "New York",
        country: "USA"
    }
};

console.log(person);
/* Output:
{
  name: "Alice",
  age: 25,
  address: {
    street: "123 Main St",
    city: "New York",
    country: "USA"
  }
}
*/

Array of Objects in JavaScript

An array of objects is a collection where each element is an object.

This is commonly used for handling lists of users, products, employees, etc.

Creating an Array of Objects

let users = [
    { name: "Alice", age: 25, city: "New York" },
    { name: "Bob", age: 30, city: "Los Angeles" },
    { name: "Charlie", age: 22, city: "Chicago" }
];

console.log(users);
/* Output:
[
  { name: "Alice", age: 25, city: "New York" },
  { name: "Bob", age: 30, city: "Los Angeles" },
  { name: "Charlie", age: 22, city: "Chicago" }
]
*/

Math Object in JavaScript

The Math object in JavaScript provides built-in methods for performing mathematical operations.

It includes methods for rounding numbers, generating random values, finding min/max, and more.

Math Properties (Constants)

Property	Description	Value
`Math.PI`	The value of π (pi)	`3.141592653589793`
`Math.E`	Euler’s number	`2.718`
`Math.LN2`	Natural logarithm of 2	`0.693`
`Math.LN10`	Natural logarithm of 10	`2.302`

console.log(Math.PI);  // 3.141592653589793
console.log(Math.E);   // 2.718281828459045
console.log(Math.round(4.6));  // 5

console.log(Math.floor(4.9));  // 4  Round off to nearest, smallest integer value

console.log(Math.ceil(4.1));   // 5  Round off to nearest, largest integer value

console.log(Math.trunc(4.9));  // 4
console.log(Math.random());  
// Output: Random decimal between 0 and 1
console.log(Math.min(5, 3, 9, 1)); // 1
console.log(Math.max(5, 3, 9, 1)); // 9
console.log(Math.pow(2, 3));   // 8
console.log(Math.sqrt(25));    // 5
console.log(Math.cbrt(27));    // 3
console.log(Math.sin(Math.PI / 2)); // 1
console.log(Math.cos(0));           // 1
console.log(Math.tan(Math.PI / 4)); // 1

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

console.log(getRandomInt(1, 10)); 
// Output: Random integer between 1 and 10

Functions in JavaScript

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

Functions help make code modular, reusable, and organized.

Declaring a Function

1Function Declaration (Named Function)

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

greet(); 
// Output: Hello, world!

2. Function Expression (Anonymous Function)

const greet = function() {
    console.log("Hello, world!");
};

greet();
// Output: Hello, world!

3. Arrow Function (=>) (Shorter Syntax)

const greet = () => {
    console.log("Hello, world!");
};

greet();
// Output: Hello, world!

Function Parameters and Arguments

4. Function with Parameters

function greet(name) {
    console.log(`Hello, ${name}!`);
}

greet("Alice");
// Output: Hello, Alice!

5. Function with Default Parameters

function greet(name = "Guest") {
    console.log(`Hello, ${name}!`);
}

greet();       
// Output: Hello, Guest!
greet("Bob");  
// Output: Hello, Bob!

Returning Values from Functions

6. Function with Return Statement

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

let sum = add(5, 3);
console.log(sum);  
// Output: 8

Function Scope

7. Local Scope (Inside Function)

A locally scoped variable is declared inside a function and only accessible within that function.

function testScope() {
    let localVar = "I am local";
    console.log(localVar);
}

testScope();
// Output: I am local

console.log(localVar); 
// Error: localVar is not defined (only exists inside function)

8. Global Scope (Outside Function)

A globally scoped variable can be accessed anywhere in the script.

let globalVar = "I am global";

function testScope() {
    console.log(globalVar);
}

testScope();
// Output: I am global

9. Block Scope {} (Using let & const)

Block scope means variables declared inside {} cannot be accessed outside.

if (true) {
    let blockVar = "I am block scoped";
    console.log(blockVar); // Accessible inside block
}

console.log(blockVar); // Error: blockVar is not defined

10. Scope with var vs let & const

var is NOT block-scoped:

if (true) {
    var testVar = "I am using var";
}
console.log(testVar); // ✅ Accessible outside the block (not safe)

let and const are block-scoped:

if (true) {
    let testLet = "I am using let";
}
console.log(testLet); // ❌ Error: testLet is not defined

11. Lexical Scope (Nested Functions)

A nested function can access variables from its parent function.

function outer() {
    let outerVar = "I am outer";

    function inner() {
        console.log(outerVar); // ✅ Accessible (lexical scope)
    }

    inner();
}

outer();

Hoisting in JavaScript

Hoisting is JavaScript’s behavior of moving variable and function declarations to the top of their scope before execution.

This means you can use variables and functions before declaring them.

1. Function Hoisting (Works with Function Declarations)

Function declarations are hoisted entirely, meaning you can call them before defining them.

greet(); // ✅ No Error

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

/* Output:
Hello, world!
*/

Function Expressions in JavaScript

A function expression in JavaScript is a way to define a function inside a variable.

Unlike function declarations, function expressions are not hoisted and must be defined before use.

1. Basic Function Expression

const greet = function() {
    console.log("Hello, world!");
};

greet();  
// Output: Hello, world!

2. Named vs. Anonymous Function Expressions

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

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

greet();  
// Output: Hello!

console.log(typeof greetFunction);  
// ❌ ReferenceError: greetFunction is not defined (not available outside)

3. Function Expressions as Arguments (Callback Functions)

setTimeout(function() {
    console.log("Executed after 2 seconds!");
}, 2000);

4. Assigning a Function Expression Dynamically

let operation;

if (true) {
    operation = function(a, b) {
        return a + b;
    };
} else {
    operation = function(a, b) {
        return a - b;
    };
}

console.log(operation(5, 3));  
// Output: 8 (since the first function was assigned)

5. Arrow Functions (=>) - A Shorter Alternative

const greet = () => {
    console.log("Hello!");
};

greet();  
// Output: Hello!

Higher-Order Functions in JavaScript

A higher-order function (HOF) is a function that takes another function as an argument or returns a function.

These functions make JavaScript more powerful, reusable, and modular.

1. Functions as Arguments

A higher-order function accepts another function as a callback.

Example: setTimeout()

setTimeout(function() {
    console.log("Executed after 2 seconds!");
}, 2000);

2. Functions Returning Functions

function multiplier(factor) {
    return function(number) {
        return number * factor;
    };
}

const double = multiplier(2);
console.log(double(5));  // Output: 10

const triple = multiplier(3);
console.log(triple(5));  // Output: 15

Methods in JavaScript

A method in JavaScript is a function that is stored as a property inside an object.

Methods allow objects to have behavior.

1. Creating a Method in an Object

let person = {
    name: "Alice",
    age: 25,
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

person.greet();
// Output: "Hello, my name is Alice"

2. Using this in Methods

this refers to the object that calls the method.

let car = {
    brand: "Toyota",
    model: "Corolla",
    getDetails: function() {
        return `${this.brand} ${this.model}`;
    }
};

console.log(car.getDetails());
// Output: "Toyota Corolla"

3. Using ES6 Method Shorthand

let user = {
    name: "John",
    greet() {  // Shorter syntax
        return `Hello, ${this.name}`;
    }
};

console.log(user.greet());
// Output: "Hello, John"

4. Adding a Method to an Object Dynamically

let person = { name: "Bob" };

person.sayHi = function() {
    return `Hi, I'm ${this.name}!`;
};

console.log(person.sayHi());
// Output: "Hi, I'm Bob!"

5. Object Methods: Object.keys(), Object.values(), Object.entries()

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

console.log(Object.keys(student));
// Output: ["name", "age"]

console.log(Object.values(student));
// Output: ["Alice", 22]

console.log(Object.entries(student));
/* Output:
[
  ["name", "Alice"],
  ["age", 22]
]
*/

6. Method Borrowing (call, apply, bind)

let user1 = { name: "Alice" };
let user2 = { name: "Bob" };

function greet() {
    console.log(`Hello, ${this.name}`);
}

greet.call(user1); // Output: "Hello, Alice"
greet.call(user2); // Output: "Hello, Bob"

`this` Keyword in JavaScript

The this keyword in JavaScript refers to the object that is executing the current function.

Its value depends on how and where the function is called.

1. `this` in the Global Context 🌍

console.log(this); 
// Output: Window object (in browsers)
// Output: {} (in Node.js)

2. this Inside an Object Method

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

person.greet();  
// Output: "Hello, my name is Alice"

3. this in a Regular Function (Undefined in strict mode)

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

showThis();
// Output: `window` (in non-strict mode)
// Output: `undefined` (in strict mode)

4. this Inside an Arrow Function

let user = {
    name: "Bob",
    greet: () => {
        console.log(`Hello, ${this.name}`);
    }
};

user.greet();
// Output: "Hello, undefined"

5. this in an Event Listener

In event listeners, this refers to the HTML element that triggered the event.

let button = document.createElement("button");
button.innerText = "Click Me";

button.addEventListener("click", function() {
    console.log(this);  // Refers to the button element
});

document.body.appendChild(button);

6. this in a Constructor Function

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

let person1 = new Person("Charlie");

console.log(person1.name);  
// Output: "Charlie"

7. this in Classes (ES6)

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

    showBrand() {
        console.log(`This car is a ${this.brand}`);
    }
}

let myCar = new Car("Toyota");
myCar.showBrand();  
// Output: "This car is a Toyota"

8. Controlling this with call(), apply(), and bind()

function greet() {
    console.log(`Hello, ${this.name}`);
}

let user1 = { name: "Alice" };
greet.call(user1);  
// Output: "Hello, Alice"

greet.apply(user1);  
// Output: "Hello, Alice"

let newGreet = greet.bind(user1);
newGreet();  
// Output: "Hello, Alice"

`try...catch` in JavaScript

The try...catch statement in JavaScript is used for handling errors gracefully.

It allows code to continue executing even if an error occurs.

1. Basic Syntax

try {
    // Code that may throw an error
} catch (error) {
    // Code to handle the error
}

2. Using finally (Always Executes)

The finally block runs regardless of whether an error occurs or not.

try {
    let num = 10;
    console.log(num.toUpperCase()); // ❌ TypeError
} catch (error) {
    console.log("Error caught:", error.message);
} finally {
    console.log("This runs no matter what!");
}

/* Output:
Error caught: num.toUpperCase is not a function
This runs no matter what!
*/

3. Throwing Custom Errors (throw)

You can manually throw errors using the throw keyword.

function checkAge(age) {
    if (age < 18) {
        throw new Error("You must be at least 18 years old.");
    }
    return "Access granted.";
}

try {
    console.log(checkAge(16)); // ❌ Throws an error
} catch (error) {
    console.log("Error:", error.message);
}

/* Output:
Error: You must be at least 18 years old.
*/

4. Nested try...catch

try {
    try {
        throw new Error("Something went wrong!");
    } catch (innerError) {
        console.log("Inner catch:", innerError.message);
        throw new Error("Outer error triggered.");
    }
} catch (outerError) {
    console.log("Outer catch:", outerError.message);
}

/* Output:
Inner catch: Something went wrong!
Outer catch: Outer error triggered.
*/

Arrow Functions in JavaScript (`=>`)

An arrow function (=>) is a shorter and cleaner way to write functions in JavaScript.

It simplifies function expressions and has no this binding.

Basic Arrow Function Syntax

const greet = () => {
    console.log("Hello, world!");
};

greet();
// Output: "Hello, world!"

Arrow Function with Parameters

const greet = (name) => {
    return `Hello, ${name}!`;
};

console.log(greet("Alice"));
// Output: "Hello, Alice!"

Implicit Return (Shorter Syntax)

When there is only one expression, the return keyword can be omitted.

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

console.log(add(5, 3)); 
// Output: 8

Arrow Function Without Parentheses (One Parameter)

const square = x => x * x;

console.log(square(4));  
// Output: 16

Arrow Function in forEach()

let numbers = [1, 2, 3];

numbers.forEach(num => console.log(num * 2));

/* Output:
2
4
6
*/

Arrow Functions and this (Does NOT Work Like Regular Functions)

Arrow functions do not have their own this.
They inherit this from the surrounding scope.

let person = {
    name: "Alice",
    greet: function() {
        setTimeout(() => {
            console.log(`Hello, my name is ${this.name}`);
        }, 1000);
    }
};

person.greet();
// Output (after 1 second): "Hello, my name is Alice"

Arrow Functions Should NOT Be Used As Methods

let person = {
    name: "Alice",
    greet: () => {
        console.log(`Hello, my name is ${this.name}`);
    }
};

person.greet();
// Output: "Hello, my name is undefined"

`setTimeout()` in JavaScript

The setTimeout() function in JavaScript is used to execute a function after a specified delay.

Basic Syntax

setTimeout(function, delay);

Example: Delayed Execution

setTimeout(() => {
    console.log("This message appears after 2 seconds!");
}, 2000);

/* Output (after 2 seconds):
This message appears after 2 seconds!
*/

`setInterval()` in JavaScript

The setInterval() function in JavaScript is used to execute a function repeatedly at a specified interval.

Basic Syntax

setInterval(function, interval);

Example: Repeating a Function Every 2 Seconds

setInterval(() => {
    console.log("This message repeats every 2 seconds!");
}, 2000);

/* Output (every 2 seconds):
This message repeats every 2 seconds!
*/

Stopping setInterval() with clearInterval()

To stop the interval, use clearInterval() with the interval ID returned by setInterval().

let count = 0;
let intervalId = setInterval(() => {
    count++;
    console.log(`Count: ${count}`);

    if (count === 5) {
        clearInterval(intervalId); // Stops the interval after 5 repetitions
        console.log("Interval stopped!");
    }
}, 1000);

/* Output:
Count: 1
Count: 2
Count: 3
Count: 4
Count: 5
Interval stopped!
*/

`this` with Arrow Functions in JavaScript

Arrow functions (=>) do not have their own this.

Instead, they inherit this from the surrounding (lexical) scope.

1. `this` in Regular Functions vs Arrow Functions

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

person.greet();  
// Output: "Hello, my name is Alice"

Issue with this in Regular Functions Inside setTimeout()

let person2 = {
    name: "Bob",
    greet: function() {
        setTimeout(function() {
            console.log(`Hello, my name is ${this.name}`);
        }, 1000);
    }
};

person2.greet();
// Output: "Hello, my name is undefined"

The function inside setTimeout() creates its own this, which refers to window (global object) instead of person2.

2. Fix Using Arrow Function (this is Inherited)

let personFixed = {
    name: "Bob",
    greet: function() {
        setTimeout(() => {
            console.log(`Hello, my name is ${this.name}`);
        }, 1000);
    }
};

personFixed.greet();
// Output (after 1 second): "Hello, my name is Bob"

Arrow functions inherit this from the surrounding function (greet), so this.name correctly refers to "Bob".

3. Arrow Functions Inside Object Methods

let person3 = {
    name: "Charlie",
    greet: () => {
        console.log(`Hello, my name is ${this.name}`);
    }
};

person3.greet();
// Output: "Hello, my name is undefined"

Since arrow functions do not have their own this, this refers to the global object (window in browsers, {} in Node.js).

4. Arrow Functions in Event Listeners (this Issue)

document.querySelector("button").addEventListener("click", () => {
    console.log(this);  // `this` refers to `window`, not the button element
});

`forEach()` Method in JavaScript

The forEach() method is used to iterate over elements in an array and execute a function for each element.

It is a cleaner alternative to for loops.

1. Basic Syntax

array.forEach(function(element, index, array) {
    // Code to execute
});

`map()` Method in JavaScript

The map() method creates a new array by applying a function to each element in an existing array.

It is commonly used for transforming arrays.

1. Basic Syntax

array.map(function(element, index, array) {
    return transformedElement;
});

`map()` Method in JavaScript

The map() method creates a new array by applying a function to each element in an existing array.

It is commonly used for transforming arrays.

1. Basic Syntax

array.map(function(element, index, array) {
    return transformedElement;
});

`every()` Method in JavaScript

The every() method checks whether all elements in an array pass a given condition.

It returns true if all elements pass the test, otherwise false.

1. Basic Syntax

array.every(function(element, index, array) {
    return condition;
});

`some()` Method in JavaScript

The some() method checks if at least one element in an array passes a given condition.

It returns true if at least one element satisfies the condition, otherwise false.

1. Basic Syntax

array.some(function(element, index, array) {
    return condition;
});

`reduce()` Method in JavaScript

The reduce() method in JavaScript reduces an array to a single value by applying a function to each element.

1. Basic Syntax

array.reduce(function(accumulator, element, index, array) {
    return updatedAccumulator;
}, initialValue);

2. Finding the Maximum Value in an Array

let numbers = [4, 8, 2, 10, 5];

let maxNumber = numbers.reduce((max, num) => num > max ? num : max, numbers[0]);

console.log(maxNumber);
// Output: 10

Default Parameters in JavaScript

In JavaScript, default parameters allow you to set a default value for a function parameter.

If the argument is not provided, the default value is used.

1. Basic Syntax

function functionName(param = defaultValue) {
    // Function body
}

Spread Operator (`...`) in JavaScript

The spread operator (...) in JavaScript is used to expand arrays, objects, or function arguments.

It provides a clean and concise way to handle data.

1. Basic Syntax

const newArray = [...existingArray];
const newObject = { ...existingObject };

2. Using Spread with Arrays

let fruits = ["Apple", "Banana", "Cherry"];
let newFruits = [...fruits];

console.log(newFruits);
// Output: ["Apple", "Banana", "Cherry"]

3. Using Spread with Objects

let user = { name: "Alice", age: 25 };
let newUser = { ...user };

console.log(newUser);
// Output: { name: "Alice", age: 25 }

4. Using Spread in Function Arguments

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

let numbers = [1, 2, 3];

console.log(sum(...numbers));
// Output: 6

5. Removing Elements from an Object

let user = { name: "Alice", age: 25, city: "New York" };

let { city, ...userWithoutCity } = user;

console.log(userWithoutCity);
// Output: { name: "Alice", age: 25 }

Rest Parameter (`...`) in JavaScript

The rest parameter (...) in JavaScript allows functions to accept an indefinite number of arguments as an array.

It helps in handling multiple arguments dynamically.

1. Basic Syntax

function functionName(...restParameter) {
    // Function body
}

2. Using Rest Parameters in Functions

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

console.log(sum(1, 2, 3, 4, 5));
// Output: 15

3. Using Rest Parameters in Array Destructuring

let [first, second, ...rest] = [10, 20, 30, 40, 50];

console.log(first);  // Output: 10
console.log(second); // Output: 20
console.log(rest);   // Output: [30, 40, 50]

4. Using Rest Parameters in Object Destructuring

let user = { name: "Alice", age: 25, city: "New York", job: "Developer" };

let { name, ...restInfo } = user;

console.log(name);      // Output: "Alice"
console.log(restInfo);  // Output: { age: 25, city: "New York", job: "Developer" }

Destructuring in JavaScript

Destructuring in JavaScript allows you to extract values from arrays and objects into variables easily.

It makes code cleaner, shorter, and more readable.

Array Destructuring

let colors = ["Red", "Green", "Blue"];

let [first, second, third] = colors;

console.log(first);  // Output: "Red"
console.log(second); // Output: "Green"
console.log(third);  // Output: "Blue"

2. Skipping Elements in Array Destructuring

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

let [first, , third] = numbers;

console.log(first);  // Output: 1
console.log(third);  // Output: 3

3. Using Rest (...) in Array Destructuring

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

let [first, ...rest] = fruits;

console.log(first);  // Output: "Apple"
console.log(rest);   // Output: ["Banana", "Cherry", "Mango"]

4. Object Destructuring

let person = { name: "Alice", age: 25, city: "New York" };

let { name, age, city } = person;

console.log(name);  // Output: "Alice"
console.log(age);   // Output: 25
console.log(city);  // Output: "New York"

5. Changing Variable Names in Object Destructuring

let user = { username: "Bob", age: 30 };

let { username: name, age: userAge } = user;

console.log(name);    // Output: "Bob"
console.log(userAge); // Output: 30

Spotify Clone - HTML & CSS Guide

Bhupesh Kumar — Sat, 08 Feb 2025 19:43:26 +0000

A simple Spotify Clone built using HTML and CSS to replicate the look and feel of Spotify’s web player UI. This project is purely for frontend practice and does not include any backend functionality.

📌 Overview

This project is a front-end implementation of Spotify's UI using only HTML and CSS. It helps beginners understand how to structure a music streaming UI and style it using modern CSS techniques. The project focuses on layout, responsiveness, and design aesthetics.

✨ Key Features

Homepage UI - Looks similar to Spotify’s web player
Navigation Bar - Sidebar for easy navigation
Music Player UI - Includes a play/pause button, progress bar, and controls
Grid-Based Layout - Uses CSS Grid and Flexbox for alignment
Hover Effects - Smooth effects for an interactive feel
Responsive Design - Works across different screen size

🛠 Technologies Used

HTML5 - Structuring the web page
CSS3 - Styling and layout (Flexbox, Grid, animations)
Google Fonts & Icons - Enhancing the UI
Media Queries - Making it responsive

🧐 Why is this project useful?

This project helps in:

Learning UI/UX development - Understand how to structure and style a web application
Practicing CSS Layouts - Uses Flexbox, Grid, and positioning
Improving Web Design Skills - Focus on clean and modern design
Understanding Responsive Design - Adapts to different screen sizes

🚀 How to Run the Project?

Clone the repository: git clone https://github.com/bhupeshk3014/spotify-clone-css
Open index.html in your browser.
Enjoy the Spotify UI experience! 🎧

📸 Screenshots

🔗 GitHub Repository

Click Here

Web Dev Day 5: Bootstrap Guide

Bhupesh Kumar — Mon, 03 Jun 2024 02:12:14 +0000

What is Bootstrap?

Bootstrap is a popular open-source front-end framework used for developing responsive and mobile-first websites quickly and efficiently. It was originally developed by Twitter and released in 2011.

Key Features

Responsive Grid System: A flexible 12-column layout system for creating responsive designs.
Pre-styled Components: Includes a wide range of UI components like buttons, forms, navbars, modals, and more.
CSS and JavaScript: Provides CSS styles and JavaScript plugins for enhanced functionality.
Customization: Easily customizable using Sass variables and built-in themes.
Cross-browser Compatibility: Ensures consistency across modern browsers.
Extensive Documentation and Community Support: Large community and comprehensive documentation available.

Basic Example

A simple Bootstrap layout:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Example</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">Column 1</div>
            <div class="col-md-4">Column 2</div>
            <div class="col-md-4">Column 3</div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap simplifies the process of designing responsive, visually appealing web pages with its ready-to-use components and customization options.

Benefits of Bootstrap

Responsive Design
- Mobile-first approach ensures websites look great on all devices.
- 12-column grid system for flexible layouts.
Pre-styled Components
- Consistent design with buttons, forms, navbars, and more.
- Saves time on custom styling.
Customizable
- Easily modify default styles with Sass variables.
- Supports custom themes.
Cross-browser Compatibility
- Ensures uniform appearance across all major browsers.
Comprehensive Documentation
- Detailed documentation with examples and code snippets.
- Large community support.
Built-in JavaScript Plugins
- Enhances functionality with interactive components like modals and carousels.
Consistency
- Standardized UI elements for a uniform look and feel.
Speed of Development
- Rapid prototyping with ready-to-use components.
- Reusable components across projects.
Integration with Other Tools
- Compatible with modern frameworks (React, Angular, Vue.js).
- Works with build tools like Webpack and Gulp.
Accessibility
- Supports ARIA attributes for better accessibility.

Bootstrap helps developers build responsive, consistent, and visually appealing websites quickly and efficiently.

Using Bootstrap

1. Include Bootstrap in Your Project

Using a CDN:

Quick and easy way to get started.
Add Bootstrap CSS and JS files via a CDN link in your HTML.

Using NPM:

Install Bootstrap for projects using Node.js.
Import Bootstrap CSS and JS in your project files.

2. Create a Basic Layout

Utilize Bootstrap's responsive grid system.
Structure your layout using containers, rows, and columns to create a responsive design.

3. Use Bootstrap Components

Buttons: Pre-styled button classes for various styles (e.g., btn-primary, btn-secondary).
Forms: Form controls with built-in validation styles.
Navbar: Responsive navigation bar components.

4. Customize Bootstrap

Using Sass:

Modify Bootstrap's default styles with Sass variables.
Create a custom Sass file to override Bootstrap variables and compile it into custom CSS.

Bootstrap simplifies web development with its responsive grid system, pre-styled components, and extensive customization options. It allows for rapid development of consistent and visually appealing websites while ensuring responsiveness and cross-browser compatibility.

Container

In Bootstrap, a container is a layout element used to contain and organize content within a web page. There are two types: .container for fixed-width content and .container-fluid for full-width content.

.container: Provides a fixed-width container for content. Ideal for standard layouts.
.container-fluid: Creates a full-width container that spans the entire viewport. Suitable for wide layouts or sections.

Usage:

Structuring Content: Wraps content to ensure consistent spacing and alignment.
Responsive Design: Adapts to different screen sizes for readability and aesthetics.
Grid System Alignment: Works seamlessly with Bootstrap's grid system for responsive layouts.

Example:

<div class="container">
    <!-- Fixed-width content -->
</div>

<div class="container-fluid">
    <!-- Full-width content -->
</div>

Bootstrap's container classes provide a framework for creating structured, responsive web layouts with ease.

Buttons

Bootstrap buttons come in various styles and sizes, making it easy to add interactive elements to your website. Here’s a quick rundown:

Styles: Bootstrap provides styles for primary, secondary, success, warning, danger, info, light, and dark buttons. There are also outline buttons for a different look.
Sizes: Buttons can be large, medium, small, or block-level (full-width).
Usage: Use primary buttons for main actions, secondary buttons for alternate actions, and other styles for specific contexts or emphasis.

Example:

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>

Bootstrap buttons provide consistency and responsiveness, making them a convenient choice for web development.

Badges

Bootstrap badges are small components used to highlight information or provide visual feedback. Here's a quick summary with examples:

Features: Badges offer visual indicators, flexible usage, and customization options.

Example:

<button type="button" class="btn btn-primary">
    Notifications <span class="badge badge-light">5</span>
</button>

<a href="#" class="btn btn-success">
    Inbox <span class="badge badge-pill badge-danger">10</span>
</a>

<h4>Important <span class="badge badge-warning">!</span></h4>

Bootstrap badges are versatile and can be added to buttons, links, or headings to display counts, statuses, or other relevant information in a visually appealing manner.

Alert

Bootstrap alerts provide contextual feedback messages to users. Here's a brief summary with examples:

Features: Alerts offer contextual styles, dismissible options, and flexible usage.

Example:

<div class="alert alert-success" role="alert">
  Success alert!
</div>

<div class="alert alert-warning" role="alert">
  Warning alert!
</div>

<div class="alert alert-danger" role="alert">
  Error alert!
</div>

<div class="alert alert-info" role="alert">
  Info alert!
</div>

Bootstrap alerts are versatile and can be easily integrated into any part of a webpage to provide feedback or notifications to users.

Button Group

Bootstrap button groups allow you to group buttons together for better organization and appearance. Here's a quick summary with an example:

Features: Button groups organize multiple buttons, ensuring visual consistency and responsive behavior.

Example:

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

Bootstrap button groups help improve user interfaces by grouping related buttons together in a visually consistent manner.

Navbar

Bootstrap navbar is a responsive navigation component that's easy to customize. Here's a quick overview with an example:

Features: Navbar adjusts for different screen sizes, supports various styles, and accommodates flexible content.

Example:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
  </div>
</nav>

Bootstrap navbar simplifies navigation setup with its responsive design and easy-to-use components.

Card

Bootstrap cards are versatile containers for displaying content. Here's a concise summary with an example:

Features: Cards offer flexibility, responsiveness, and customization options.

Example:

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Bootstrap cards simplify content presentation with their adaptable design and numerous customization possibilities.

Grid

Bootstrap's grid system is a flexible way to create responsive layouts. Here's a quick summary with an example:

Features: Responsive, based on a 12-column layout, and easy to use.

Example:

<div class="container">
  <div class="row">
    <div class="col-sm-4">Column 1</div>
    <div class="col-sm-4">Column 2</div>
    <div class="col-sm-4">Column 3</div>
  </div>
</div>

Bootstrap's grid system simplifies layout creation, providing flexibility and responsiveness across devices.

Form Controls

Bootstrap's form controls offer pre-styled elements for easy form creation. Here's a quick summary with examples:

Features: Pre-styled form inputs, selects, textareas, and more for consistent appearance and validation states.

Example:

<form>
  <div class="form-group">
    <label for="exampleInputUsername">Username</label>
    <input type="text" class="form-control" id="exampleInputUsername" placeholder="Enter username">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleTextarea">Example textarea</label>
    <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Bootstrap's form controls simplify form creation and enhance user experience with consistent styling and validation states.

Select in Forms

Bootstrap's select dropdowns offer pre-styled options for form selections. Here's a brief summary with an example:

Features: Styled select dropdowns for consistent appearance and responsiveness.

Example:

<select class="form-select" aria-label="Default select example">
  <option selected>Open this select menu</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

Bootstrap select dropdowns enhance form elements with consistent styling and usability.

Checkbox and Radio in Form

Bootstrap's pre-styled checkboxes and radio buttons enhance form inputs with consistent styling and functionality. Here's a brief summary with examples:

Checkbox Example:

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>

Radio Button Example:

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>

Bootstrap's styled checkboxes and radio buttons improve the appearance and usability of form inputs.

Form Layout

Bootstrap's form layout system enables the creation of structured and responsive forms with ease. Here's a concise overview with an example:

<form>
  <div class="row mb-3">
    <div class="col-md-6">
      <label for="inputEmail" class="form-label">Email</label>
      <input type="email" class="form-control" id="inputEmail">
    </div>
    <div class="col-md-6">
      <label for="inputPassword" class="form-label">Password</label>
      <input type="password" class="form-control" id="inputPassword">
    </div>
  </div>
  <div class="mb-3">
    <label for="exampleTextarea" class="form-label">Textarea</label>
    <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Bootstrap's form layout system simplifies the creation of responsive and structured forms, ensuring consistency and usability across different screen sizes.

Bootstrap Website: https://getbootstrap.com/docs/5.3/getting-started/introduction/

242. Valid Anagram

Bhupesh Kumar — Thu, 16 May 2024 19:58:33 +0000

Problem Statement

Given two strings s and t, return true if t is an anagram of s, and false otherwise.

An Anagram is a word or phrase formed by rearranging the letters of a different word or phrase, typically using all the original letters exactly once.

Example 1:

Input: s = "anagram", t = "nagaram"
Output: true

Example 2:

Input: s = "rat", t = "car"
Output: false

Constraints

1 <= s.length, t.length <= 5 * 104
s and t consist of lowercase English letters

Approach 1: Using Hashmap

This code utilizes a HashMap to track the occurrences of characters in one string and adjusts these counts based on the characters in the second string. By ensuring that all character counts become zero, it confirms if the strings are basic anagrams of each other.

class Solution {
    public boolean isAnagram(String s, String t) {

        Map<Character, Integer> mp = new HashMap<>();
        for (int i = 0; i < s.length(); i++) {
            char ch = s.charAt(i);
            mp.put(ch, mp.getOrDefault(ch, 0) + 1);
        }

        for (int i = 0; i < t.length(); i++) {
            char ch = t.charAt(i);
            if (!mp.containsKey(ch) || mp.get(ch) == 0) {
                return false;
            }
            mp.put(ch, mp.get(ch) - 1);
        }     

        for (int count : mp.values()) {
            if (count != 0) {
                return false;
            }
        }

        return true;

    }
}

Runtime: 16ms

Approach 2: Using Arrays

import java.util.Arrays;

class Solution {
    public boolean isAnagram(String s, String t) {
        // Check if lengths are equal, if not, they can't be anagrams
        if (s.length() != t.length())
            return false;

        // Convert strings to character arrays
        char[] sChars = s.toCharArray();
        char[] tChars = t.toCharArray();

        // Sort character arrays
        Arrays.sort(sChars);
        Arrays.sort(tChars);

        // Compare sorted character arrays
        return Arrays.equals(sChars, tChars);
    }
}

Runtime: 4ms

Approach 3: Hash Table (Using Array)

class Solution {
    public boolean isAnagram(String s, String t) {
        // Create an array to store the count of occurrences of each character (26 lowercase letters)
        int[] count = new int[26];

        // Iterate through the characters of string s
        for (char x : s.toCharArray()) {
            // Increment the count for the character 'x' (subtracting 'a' gives the index corresponding to 'x')
            count[x - 'a']++;
        }

        // Iterate through the characters of string t
        for (char x : t.toCharArray()) {
            // Decrement the count for the character 'x' (subtracting 'a' gives the index corresponding to 'x')
            count[x - 'a']--;
        }

        // Check if all counts in the array are zero
        for (int val : count) {
            if (val != 0) {
                // If any count is not zero, return false indicating strings are not anagrams
                return false;
            }
        }

        // If all counts are zero, return true indicating strings are anagrams
        return true;
    }
}

Runtime: 2ms

Web Dev Day 4: CSS3 Guide Part 2

Bhupesh Kumar — Thu, 16 May 2024 18:54:24 +0000

Alpha Channel:

The alpha channel, often referred to as opacity or transparency, is a component of the RGB color model that represents the degree of transparency of a color. It determines how much of an underlying color or background is visible through a particular color.

In CSS, the alpha channel is typically represented using the rgba() color function or the hsla() color function:

1. rgba() Function:

Stands for "red, green, blue, alpha."
The alpha value is specified as a number between 0 (fully transparent) and 1 (fully opaque).

/* RGBA color with 50% opacity */
background-color: rgba(255, 0, 0, 0.5); /* Red color with 50% opacity */

2. hsla() Function:

Stands for "hue, saturation, lightness, alpha."
The alpha value is specified as a number between 0 (fully transparent) and 1 (fully opaque).

/* HSLA color with 50% opacity */
background-color: hsla(0, 100%, 50%, 0.5); /* Red color with 50% opacity */

Opacity:

In CSS, the opacity property is used to set the transparency level of an element. It affects the entire element, including its content and any child elements. The opacity property takes a value between 0 (completely transparent) and 1 (completely opaque).

/* Make the element 70% transparent */
div {
    opacity: 0.7;
}

CSS Transition:

CSS transitions provide a way to smoothly animate the changing of property values over time. Transitions are often used to create subtle and visually appealing effects when interacting with web elements. Here's an overview of CSS transitions:

selector {
    property: value;
    transition: property duration timing-function delay;
}

/* Apply a transition to the background-color property */
button {
    background-color: blue;
    transition: background-color 0.5s ease-in-out;
}

/* Change the background color on hover */
button:hover {
    background-color: red;
}

Transition Shorthand:

The transition property can also be written using the shorthand syntax:

selector {
    transition: property duration timing-function delay;
}

Common Transition Properties:

all: Transitions all properties.
transform: Transitions for 2D and 3D transformations.
opacity: Transitions for opacity changes.

Example with transform:

/* Apply a transition to the transform property */
div {
    transform: scale(1);
    transition: transform 0.3s ease-in-out;
}

/* Scale the element on hover */
div:hover {
    transform: scale(1.2);
}

CSS Transform:

CSS transform is a CSS property that allows you to apply various visual transformations to elements on a webpage. These transformations include translation, rotation, scaling, and skewing, enabling you to manipulate the appearance and layout of elements in two-dimensional or three-dimensional space.

With CSS transform, you can:

Translate: Move an element along the X and Y axes.
Rotate: Rotate an element clockwise or counterclockwise around a fixed point.
Scale: Resize an element along the X and Y axes.
Skew: Distort an element along the X and Y axes.
3D Transformations: Apply transformations in three-dimensional space, such as rotating around the X, Y, or Z axis.

These transformations can be applied individually or combined together to create complex visual effects and animations. CSS transform is widely used in web development to create responsive designs, animations, and interactive user interfaces.

Here's an example of how CSS transform can be applied:

.element {
  transform: translate(50px, 50px) rotate(45deg) scale(1.5) skew(10deg, 20deg);
}

This CSS rule translates the element by 50 pixels on both the X and Y axes, rotates it by 45 degrees, scales it to 1.5 times its original size, and skews it by 10 degrees along the X axis and 20 degrees along the Y axis.

Box Shadow:

CSS box-shadow is a property used to add shadow effects to elements. It takes parameters for horizontal and vertical offsets, blur radius, spread radius, color, and inset (optional).

Example:

.box {
  box-shadow: 2px 2px 4px #888;
}

This code snippet adds a shadow with a horizontal offset of 2 pixels, vertical offset of 2 pixels, blur radius of 4 pixels, and a gray color.

Background Image:

CSS background-image is a property used to set one or more background images for an element. It takes a URL pointing to the image file to be used as the background.

Example:

.element {
  background-image: url('image-url');
}

This code snippet sets the image specified by 'image-url' as the background for the .element.

Card Hover Effect:

A card hover effect is a visual enhancement applied to a card element when a user hovers over it. This effect typically involves changes in properties like background color, shadow, scale, or position, creating an interactive and engaging experience.

Here's a concise example using CSS:

.card {
  /* Card styles */
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

In this example, when the user hovers over the .card, it moves upward by 5 pixels due to the transform: translateY(-5px) property. The transition property ensures a smooth animation.

Position Property:

The CSS position property determines how an element is positioned on a webpage. It can take values like static, relative, absolute, fixed, or sticky, each affecting the element's positioning behavior in different ways.

Flexbox:

Flexbox is a layout model in CSS that allows you to create flexible and responsive layouts with ease.

Display Flex:
- display: flex; turns a container's children into flex items, enabling the use of flexbox properties.
Flex Direction:
- flex-direction determines the main axis of the flex container and the direction in which flex items are laid out. Values include row, row-reverse, column, and column-reverse.
Justify Content:
- justify-content aligns flex items along the main axis of the flex container. Common values are flex-start, flex-end, center, space-between, and space-around.
Flex Wrap:
- flex-wrap controls whether flex items are forced onto a single line or can wrap onto multiple lines. Values include nowrap, wrap, and wrap-reverse.
Align Items:
- align-items aligns flex items along the cross axis of the flex container. Common values are flex-start, flex-end, center, baseline, and stretch.
Align Content:
- align-content aligns flex lines (when there is more than one) along the cross axis. Values include flex-start, flex-end, center, space-between, space-around, and stretch.
Align Self:
- align-self allows individual flex items to override the align-items property for alignment along the cross axis.
Flex Sizing:
- Flex items can be given a flex basis, flex-grow factor, and flex-shrink factor to control their size within the flex container.
Flex Shorthand:
- The flex shorthand property combines flex-grow, flex-shrink, and flex-basis properties in a single declaration.

Flexbox simplifies the process of creating complex layouts, making it easier to create responsive designs and align content in a more dynamic and flexible way.

What is Grid?

Grid is a layout model in CSS that enables you to create complex grid-based layouts with rows and columns.

Grid Model:
- Grid layout divides a container into rows and columns, creating a grid structure for arranging elements.
Grid Template:
- The grid-template property defines the layout of the grid using a combination of track sizing functions and line names.
Repeat:
- The repeat() function specifies a repeating pattern for track sizing. For example, repeat(3, 1fr) repeats the track size 1fr three times.
Grid Gaps:
- The grid-gap property sets the size of the gap between grid rows and columns. It is a shorthand for grid-row-gap and grid-column-gap.
Grid Columns:
- The grid-template-columns property defines the size of grid columns. You can specify the size of each column individually or use track sizing functions like auto, 1fr, etc.
Grid Rows:
- The grid-template-rows property defines the size of grid rows. Similar to grid-template-columns, you can specify the size of each row individually or use track sizing functions.
Grid Properties:
- Other grid properties include grid-template-areas for defining named grid areas, grid-column and grid-row for positioning grid items within the grid, and various alignment properties like justify-items, align-items, justify-content, and align-content for aligning grid items within the grid container.

Example:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px auto;
  grid-gap: 10px;
}

.item {
  grid-column: 2 / span 1;
  grid-row: 1;
}

In this example:

The .container is a grid container with three columns of equal width and two rows (100 pixels in height for the first row and auto for the second row).
The .item is a grid item positioned starting from the second column and spanning 1 column, and placed in the first row of the grid.

CSS Animation

CSS Animation:

CSS animations allow you to animate the properties of an element over a specified duration using keyframes.

animation-name: Specifies the name of the @keyframes rule defining the animation's keyframes.
animation-duration: Sets the duration of the animation in seconds or milliseconds.
animation-timing-function: Defines the timing function for the animation, specifying the pace of the animation's progression.
animation-delay: Specifies the delay before the animation starts.
animation-iteration-count: Sets the number of times the animation should repeat.
animation-direction: Defines whether the animation should play forwards, backwards, alternate between forward and backward, or alternate in reverse.

Examples:

/* Define keyframes */
@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(200px); }
}

/* Apply animation */
.element {
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Animation Shorthand

.element {
  animation: slide 2s ease-in-out 1s infinite alternate;
}

In this example:

.element is the selector for the element to be animated.
The animation name is slide.
Duration is 2 seconds.
Timing function is ease-in-out.
Delay is 1 second.
Iteration count is infinite.
Direction is alternate.

% in Animation

In CSS animations, percentages within @keyframes define different stages of the animation's duration.

@keyframes example-animation {
  0% {
    /* Styles at the beginning of the animation */
  }
  50% {
    /* Styles halfway through the animation */
  }
  100% {
    /* Styles at the end of the animation */
  }
}

In this example:

0% represents the start of the animation.
50% represents the middle of the animation.
100% represents the end of the animation.

You can specify styles at various percentages to create different effects throughout the animation's duration.

Media Queries

Media queries in CSS allow you to apply different styles based on various device characteristics, such as screen size, orientation, and device type.

Orientation:
- Media queries can target the orientation of the device, allowing you to apply different styles based on whether the device is in portrait or landscape mode.

Example:

@media (orientation: portrait) {
  /* Styles for portrait orientation */
}

@media (orientation: landscape) {
  /* Styles for landscape orientation */
}

Media Features: https://developer.mozilla.org/en-US/docs/Web/CSS/@media

z index

The z-index property in CSS controls the stacking order of positioned elements. It determines which elements appear on top of others when they overlap on the z-axis.

Example:

.element {
  position: relative;
  z-index: 1;
}

Basic Design Priciples

Color Theory

Color theory explores the principles and guidelines behind the use of color in art and design. Here's a brief overview:

Color Wheel:
- The color wheel is a visual representation of colors arranged in a circular format. It consists of primary colors (red, blue, yellow), secondary colors (orange, green, purple), and tertiary colors (mixtures of primary and secondary colors).
Color Harmony:
- Color harmony refers to the pleasing combination of colors in a design. Common color harmonies include:
  - Complementary: Colors opposite each other on the color wheel.
  - Analogous: Colors adjacent to each other on the color wheel.
  - Triadic: Three colors equally spaced on the color wheel.
  - Monochromatic: Variations of a single color.
Color Properties:
- Hue: The actual color of an object (e.g., red, blue, green).
- Saturation: The intensity or purity of a color. More saturated colors are vivid, while less saturated colors are dull.
- Value: The lightness or darkness of a color. Tints are lighter values, while shades are darker values.
Color Psychology:
- Colors can evoke different emotions and associations. For example, red may symbolize passion or danger, while blue may represent calmness or trust.
Color in Design:
- In design, color is used to convey meaning, create visual interest, establish hierarchy, and evoke emotions. Understanding color theory helps designers make informed color choices to achieve their design goals.

Canva Color Wheel: https://www.canva.com/colors/color-wheel/

Typography

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. It involves selecting fonts, adjusting font size, line spacing, and letter spacing to create a harmonious and visually pleasing design.

Google Fonts

Google Fonts is a collection of free, open-source fonts provided by Google. It offers a wide variety of high-quality fonts that can be easily integrated into web projects. Web designers and developers can access Google Fonts via a simple link or import statement in their HTML or CSS files, making it convenient to use custom fonts in their designs.

https://fonts.google.com/

Icons

https://fonts.google.com/icons

https://fontawesome.com/icons

https://cdnjs.com/libraries/font-awesome

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css

CSS Mini Project

This repository contains a simple HTML and CSS project showcasing a sidebar menu design. The project is designed to be lightweight and demonstrate fundamental techniques in creating responsive web layouts using HTML and CSS.

Features

Responsive sidebar menu
Utilization of Font Awesome icons
Basic hover effects

Technologies Used

HTML
CSS
Font Awesome

Github Link: https://github.com/bhupeshk3014/css-mini

MDN Docs: https://developer.mozilla.org/en-US/docs/Web/CSS

Arrays and ArrayList in JAVA

Bhupesh Kumar — Thu, 09 May 2024 22:48:46 +0000

What is Array?

An array in Java is a fixed-size collection of elements of the same data type. It allows you to store and access multiple values under a single variable name. Arrays are indexed starting from 0 and are useful for managing collections of data efficiently.

Why do we need Arrays?

Arrays are essential because they:

Group related data under one variable.
Allow efficient access to individual elements.
Optimize memory usage.
Facilitate iteration through elements.
Enable passing data to functions efficiently.

Syntax of Array

In Java, the syntax for declaring and initializing an array is as follows:

// Example: declaring and initializing an array of integers with a size of 5
int[] numbers = new int[5];

Alternatively, you can declare and initialize the array in separate steps:

int[] numbers; // Declaration
numbers = new int[5]; // Initialization

You can also initialize the array with values:

// Example: initializing an array of integers with specific values
int[] numbers = {10, 20, 30, 40, 50};

How does Array work?

Arrays in Java store elements of the same data type in consecutive memory locations, accessible by index starting from 0. They have a fixed size and are efficient for accessing and manipulating data.

Internal working of an Array

Internally, arrays in Java are implemented as contiguous blocks of memory where elements of the same data type are stored sequentially. Here's a deeper look at how arrays work internally in Java:

Memory Allocation: When you declare an array in Java, memory is allocated for it based on the specified size and data type. This memory allocation is done from the heap, the region of memory reserved for dynamic memory allocation in Java.
Contiguous Storage: Array elements are stored consecutively in memory, one after another. This contiguous storage ensures efficient memory access, as elements can be accessed directly using their indices.
Indexing: Each element in the array is assigned an index starting from 0. When you access an element of the array using its index, the Java runtime calculates the memory address of the element based on its index and the size of the data type.
Element Access: Once the memory address of the desired element is calculated, the runtime retrieves the value stored at that address and returns it to the program. This process of accessing elements by index is very efficient, typically taking constant time, O(1).
Fixed Size: Arrays in Java have a fixed size, meaning their size cannot be changed after they are created. If you need to store more elements than the size of the array allows, you would need to create a new array with a larger size and copy the elements from the old array to the new one.
Primitive vs. Reference Types: Arrays can hold elements of primitive data types (such as int, float, char) or reference types (such as objects). When an array holds elements of reference types, it actually holds references (memory addresses) to the objects rather than the objects themselves.
Garbage Collection: Arrays, like other objects in Java, are subject to automatic garbage collection. Once an array is no longer referenced by any part of the program, it becomes eligible for garbage collection, and the memory it occupies is reclaimed by the JVM.

Overall, arrays provide a low-level mechanism for efficiently storing and accessing collections of elements in memory, making them a fundamental data structure in Java.

Continuity of an Array

Array objects are typically located in the heap. In Java, arrays are objects, and as such, they are allocated memory on the heap.
Heap objects are not necessarily stored contiguously. While the elements within an array object are contiguous, the overall structure of the heap doesn't guarantee that objects are stored consecutively.
Dynamic Memory Allocation is indeed used for arrays and other objects in Java. Memory for arrays is allocated at runtime, allowing for flexibility in memory usage.

Therefore, while the elements within an array are guaranteed to be stored contiguously, the arrangement of objects in the heap may not be continuous. This behavior is dependent on how the JVM manages memory.

Index of an Array

The index of an array is a numeric value representing the position of an element within the array. It starts from 0, increments by 1 for each subsequent element, and allows for direct access to array elements.

New Keyword

The new keyword in Java is used to dynamically allocate memory for objects at runtime. It creates instances of classes, allocates memory on the heap, invokes constructors to initialize objects, returns references to the allocated memory, and enables automatic garbage collection.

String Array

A string array in Java is an array that holds elements of type String. It allows you to store multiple strings under a single variable name, making it useful for managing collections of text data.

What is null in JAVA?

null in Java represents the absence of a value or an uninitialized object reference. It's used to indicate that a variable does not currently refer to any object and can lead to a NullPointerException if accessed improperly.

Array Input

For loop

        Scanner scanner = new Scanner(System.in);

        // Get the size of the array from the user
        System.out.print("Enter the size of the array: ");
        int size = scanner.nextInt();

        // Create the array
        int[] numbers = new int[size];

        // Input the elements of the array
        System.out.println("Enter the elements of the array:");
        for (int i = 0; i < size; i++) {
            numbers[i] = scanner.nextInt();
        }

        // Display the elements of the array
        System.out.println("The elements of the array are:");
        for (int i = 0; i < size; i++) {
            System.out.println(numbers[i]);
        }

For each loop

        Scanner scanner = new Scanner(System.in);

        // Get the size of the array from the user
        System.out.print("Enter the size of the array: ");
        int size = scanner.nextInt();

        // Create the array
        int[] numbers = new int[size];

        // Input the elements of the array
        System.out.println("Enter the elements of the array:");
        for (int i = 0; i < size; i++) {
            numbers[i] = scanner.nextInt();
        }

        // Display the elements of the array using for-each loop
        System.out.println("The elements of the array are:");
        for (int number : numbers) {
            System.out.println(number);
        }

toString() Method

        int[] numbers = {1, 2, 3, 4, 5};
        String str = Arrays.toString(numbers);
        System.out.println(str); // Output: [1, 2, 3, 4, 5]

Storage of objects in heap

Objects in Java are stored in the heap memory. When you create an object using the new keyword, memory is allocated on the heap to store its data, and a reference to this memory location is returned. Java's automatic garbage collection manages memory deallocation, ensuring efficient use of heap memory resources.

Array passing in function

You can pass arrays as parameters to functions in Java, allowing you to work with array elements within the function. Modifications made to the array within the function affect the original array. This enables modularization and reusability of code when working with arrays.

public class ArrayExample {
    public static void main(String[] args) {
        int[] numbers = {1, 2, 3, 4, 5};
        printArray(numbers); // Pass the array to the function
    }

    // Function to print array elements
    public static void printArray(int[] arr) {
        for (int i = 0; i < arr.length; i++) {
            System.out.print(arr[i] + " ");
        }
    }
}

Multi-dimensional Arrays

Multi-dimensional arrays in Java are arrays of arrays, allowing you to create tables or matrices with rows and columns. They are useful for representing data in multiple dimensions, such as 2D grids or 3D spaces.

Here's an example of how to create and work with multi-dimensional arrays in Java:

public class MultiDimensionalArrayExample {
    public static void main(String[] args) {
        // Creating a 2D array (matrix)
        int[][] matrix = {
            {1, 2, 3},
            {4, 5, 6},
            {7, 8, 9}
        };

        // Accessing elements of the 2D array
        System.out.println(matrix[0][0]); // Output: 1
        System.out.println(matrix[1][2]); // Output: 6

        // Iterating over the 2D array
        for (int i = 0; i < matrix.length; i++) {
            for (int j = 0; j < matrix[i].length; j++) {
                System.out.print(matrix[i][j] + " ");
            }
            System.out.println();
        }
    }
}

Internal working of 2D Array

can be written like

int[][] arr = new int[3][];

individual arrays can have different size

A 2D array in Java is internally represented as an array of arrays, with elements stored row by row in contiguous memory locations. Accessing elements is efficient, using row and column indices to calculate the memory location directly.

2D Array Input and Output

import java.util.Scanner;

public class TwoDArrayInputOutput {
    public static void main(String[] args) {
        Scanner scanner = new Scanner(System.in);

        // Get the dimensions of the 2D array from the user
        System.out.print("Enter the number of rows: ");
        int rows = scanner.nextInt();
        System.out.print("Enter the number of columns: ");
        int columns = scanner.nextInt();

        // Create the 2D array
        int[][] matrix = new int[rows][columns];

        // Input the elements of the 2D array
        System.out.println("Enter the elements of the 2D array:");
        for (int i = 0; i < rows; i++) {
            for (int j = 0; j < columns; j++) {
                matrix[i][j] = scanner.nextInt();
            }
        }

        // Output the 2D array
        System.out.println("The 2D array is:");
        for (int i = 0; i < rows; i++) {
            for (int j = 0; j < columns; j++) {
                System.out.print(matrix[i][j] + " ");
            }
            System.out.println();
        }

        scanner.close();
    }
}

Arrays are Mutable

Complexity Analysis of Operations on Array:

Time Complexity:

Operation:

Traversal O(N)
Insertion O(N)
Deletion O(N)
Searching O(N)

Space Complexity:

Operation:

Traversal O(1)
Insertion O(N)
Deletion O(N)
Searching O(1)

Advantages of Array:

Arrays allow random access to elements. This makes accessing elements by position faster.
Arrays have better cache locality which makes a pretty big difference in performance.
Arrays represent multiple data items of the same type using a single name.
Arrays are used to implement the other data structures like linked lists, stacks, queues, trees, graphs, etc.

Disadvantages of Array:

As arrays have a fixed size, once the memory is allocated to them, it cannot be increased or decreased, making it impossible to store extra data if required. An array of fixed size is referred to as a static array.
Allocating less memory than required to an array leads to loss of data.
An array is homogeneous in nature, so a single array cannot store values of different data types.
Arrays store data in contiguous memory locations, which makes deletion and insertion very difficult to implement. This problem is overcome by implementing linked lists, which allow elements to be accessed sequentially.

Applications of Array:

They are used in the implementation of other data structures such as array lists, heaps, hash tables, vectors, and matrices.
Database records are usually implemented as arrays.
It is used in lookup tables by computer.

Dynamic Arrays

What is ArrayList?

An ArrayList in Java is a resizable array-like data structure provided by the java.util package. It implements the List interface and extends the AbstractList class, making it a part of the Java Collections Framework. Unlike regular arrays, ArrayList can dynamically resize itself as elements are added or removed.

Here are some key characteristics of ArrayList:

Resizable: Unlike arrays, which have a fixed size, ArrayList can dynamically grow or shrink in size as elements are added or removed.
Ordered Collection: ArrayList maintains the order of elements in which they are inserted. You can access elements by their index.
Allows Duplicates: ArrayList can contain duplicate elements. It preserves the insertion order, so elements can be added and accessed based on their position.
Indexed Access: You can access elements in an ArrayList using their index. This allows for efficient retrieval and modification of elements.
Backed by Array: Internally, an ArrayList is backed by an array. When the array's capacity is reached, ArrayList automatically resizes the underlying array to accommodate more elements.
Iterating Over Elements: ArrayList provides various methods to iterate over its elements, including traditional loops, enhanced for loops, and iterators.

Here's a basic example of using ArrayList:

import java.util.ArrayList;

public class ArrayListExample {
    public static void main(String[] args) {
        // Create a new ArrayList
        ArrayList<Integer> numbers = new ArrayList<>();

        // Add elements to the ArrayList
        numbers.add(10);
        numbers.add(20);
        numbers.add(30);

        // Print the ArrayList
        System.out.println("ArrayList: " + numbers);

        // Accessing elements
        int value = numbers.get(1);
        System.out.println("Element at index 1: " + value);

        // Size of the ArrayList
        System.out.println("Size of the ArrayList: " + numbers.size());
    }
}

ArrayList is widely used in Java for its flexibility, ease of use, and dynamic resizing capabilities, making it a versatile choice for storing and manipulating collections of elements.

ArrayList Functions

ArrayList functions, also known as methods, are built-in operations provided by the ArrayList class in Java. These methods enable you to perform various operations on ArrayLists, such as adding, removing, searching, sorting, and iterating over elements. Here are some commonly used ArrayList functions in Java:

Adding Elements:
- add(E e): Adds the specified element to the end of the ArrayList.
- add(int index, E element): Inserts the specified element at the specified position in the ArrayList.
Removing Elements:
- remove(Object o): Removes the first occurrence of the specified element from the ArrayList.
- remove(int index): Removes the element at the specified position in the ArrayList.
Accessing Elements:
- get(int index): Returns the element at the specified position in the ArrayList.
- set(int index, E element): Replaces the element at the specified position in the ArrayList with the specified element.
Size and Capacity:
- size(): Returns the number of elements in the ArrayList.
- isEmpty(): Returns true if the ArrayList is empty; otherwise, returns false.
- ensureCapacity(int minCapacity): Increases the capacity of the ArrayList, if necessary, to ensure that it can hold at least the specified number of elements.
Searching and Sorting:
- contains(Object o): Returns true if the ArrayList contains the specified element; otherwise, returns false.
- indexOf(Object o): Returns the index of the first occurrence of the specified element in the ArrayList; returns -1 if the element is not found.
- sort(Comparator<? super E> c): Sorts the elements of the ArrayList using the specified comparator.
Iterating Over Elements:
- forEach(Consumer<? super E> action): Performs the given action for each element of the ArrayList until all elements have been processed or the action throws an exception.
- iterator(): Returns an iterator over the elements in the ArrayList.
Converting to Array:
- toArray(): Returns an array containing all of the elements in the ArrayList in proper sequence.

import java.util.ArrayList;

public class ArrayListFunctionsExample {
    public static void main(String[] args) {
        // Create an ArrayList
        ArrayList<Integer> numbers = new ArrayList<>();

        // Adding elements
        numbers.add(10);
        numbers.add(20);
        numbers.add(30);

        // Removing elements
        numbers.remove(Integer.valueOf(20));

        // Accessing elements
        int firstElement = numbers.get(0);

        // Size
        int size = numbers.size();

        // Sorting
        numbers.sort(null);

        // Iterating
        for (Integer number : numbers) {
            System.out.println(number);
        }
    }
}

Internal working of ArrayList

An ArrayList in Java dynamically manages an array internally to accommodate the addition or removal of elements. It automatically resizes its underlying array when needed, typically using a doubling strategy for capacity management. This allows for flexible storage of collections of elements with efficient random access and ensures fast element retrieval.

Multi-Dimensional ArrayList

In Java, you can create a multi-dimensional ArrayList by nesting ArrayLists within each other. This allows you to create structures resembling matrices or grids with multiple dimensions. Here's how you can create and work with a multi-dimensional ArrayList:

import java.util.ArrayList;

public class MultiDimensionalArrayListExample {
    public static void main(String[] args) {
        // Create a 2D ArrayList
        ArrayList<ArrayList<Integer>> matrix = new ArrayList<>();

        // Add rows to the 2D ArrayList
        for (int i = 0; i < 3; i++) {
            ArrayList<Integer> row = new ArrayList<>();
            for (int j = 0; j < 3; j++) {
                row.add(i * 3 + j + 1); // Add elements to the row
            }
            matrix.add(row); // Add the row to the 2D ArrayList
        }

        // Accessing elements
        int value = matrix.get(1).get(2); // Accessing element at row 1, column 2
        System.out.println("Element at row 1, column 2: " + value);

        // Printing the 2D ArrayList
        for (ArrayList<Integer> row : matrix) {
            for (int element : row) {
                System.out.print(element + " ");
            }
            System.out.println();
        }
    }
}

In this example:

We create a 2D ArrayList named matrix by nesting ArrayLists within each other.
We add rows to the 2D ArrayList using nested loops, where each row is an ArrayList containing integer elements.
We access elements of the 2D ArrayList using the get() method on both the outer and inner ArrayLists.
We print the elements of the 2D ArrayList using nested loops to traverse each row and element within the rows.

This approach allows you to create and manipulate multi-dimensional data structures using ArrayLists in Java. You can extend this concept to create 3D, 4D, or higher-dimensional ArrayLists by nesting ArrayLists further.

DEV Community: Bhupesh Kumar

MongoDB Made Easy: A Beginner’s Guide to NoSQL

Installation Video

The MongoDB Shell

Starting the Shell

How MongoDB Stores Data — BSON

What is BSON?

Why BSON and not JSON?

Key Point

Example

Documents and Collections in MongoDB

What is a Document?

Example:

What is a Collection?

Example:

Key difference from SQL

Conclusion:

Insert in MongoDB using insertOne()

Syntax:

Example (Mongo Shell):

Example using Node.js with MongoDB Driver:

Notes:

Insert Multiple Documents using insertMany()

Syntax:

Example (Mongo Shell):

Find Documents in MongoDB

Syntax:

Example 1: Find All Documents

Example 2: Find with Condition

Example 3: Find Specific Fields Only

Example 4: Find One Document

MongoDB Query Operators

Comparison Operators

Logical Operators

Element Operators

Array Operators

Example Usage

UPDATE in MongoDB

updateOne()

updateMany()

Nesting in MongoDB

Example: Nested Document

Accessing Nested Fields

Nesting Arrays of Documents

Querying Nested Arrays

DELETE in MongoDB

deleteOne()

deleteMany()

Delete All Documents (Use Carefully)

Deleting by _id

What is Mongoose?

Why Use Mongoose?

Installation

Basic Setup Example

Define a Schema and Model

Create and Save a Document

Common Operations

Installation and Setup of Mongoose

Step 1: Install Mongoose

Step 2: Create Project Files

Step 3: Connect to MongoDB

Mongoose Schema

Create a Basic Schema

Add Validations and Options

Convert Schema to Model

Notes

Mongoose Models

How to Create a Model

Insert in Mongoose

Method 1: Using new Model() and .save()

Method 2: Using Model.create()

Method 3: Insert Many Documents at Once

Tips

Operation Buffering in Mongoose

What Does That Mean?

Example

Why It’s Useful

When to Avoid

Find in Mongoose

1. find()

Insert in MongoDB using `insertOne()`

Insert Multiple Documents using `insertMany()`

`updateOne()`

Method 1: Using `new Model()` and `.save()`

1. `find()`

Mongoose Relationships (`ref` & `.populate()`)

Defining Relationships with `ref`