Forem: Dharmendra Kumar

Tense Playground: Master English Grammar with AI & Interactive Games

Dharmendra Kumar — Fri, 02 Jan 2026 11:13:42 +0000

I'm excited to share Tense Playground, a free, open-source platform I built to help learners master all 12 English tenses through interactive games, quizzes, and AI assistance.

The Problem

Learning English tenses is challenging, especially for ESL learners. Traditional methods are boring, and there's no personalized feedback. I wanted to create something fun, interactive, and powered by AI.

The Solution

Tense Playground combines:

🎮 Interactive Games for engaging learning
:robot_face: AI Assistant for instant help
📊 Smart Analysis for tense detection
🏆 Gamification to keep you motivated ## ✨ Key Features ### :robot_face: AI-Powered Learning
Tensey Chat - AI grammar assistant for questions about tenses
Sentence Analyzer - Detects tense with breakdown (subject, verb, object, auxiliaries)
Smart Translation - Multi-language support with grammar insights
Alternative Suggestions - Get variations of sentences in different tenses ### 📚 Learning Tools
Playground - Explore all 12 tenses with examples
Quiz System - 3 difficulty levels (Easy, Medium, Hard)
Sentence Builder - Drag-and-drop word arrangement
Word Rainfall - Catch falling words to build sentences
Translation Tool - Practice with 7 languages
Tips & Tricks - Memory aids and shortcuts ### 🏆 Gamification System

Daily Challenges:
✓ Answer 3 quiz questions
✓ Build 5 sentences
✓ Score 100+ in Word Rainfall
Weekly Challenges:
✓ Maintain 7-day streak
✓ Master all 12 tenses
✓ Get 100% accuracy
Badges & XP Rewards:
:star2: First Steps | :zap: Quick Learner | :sports_medal: Grammar Guru
:fire: Streak Master | :white_check_mark: Perfect Score | :alarm_clock: Time Traveler

🔥 Streak System

Track your consistency with:

Current streak counter
Longest streak tracker
Total days practiced
Automatic reset on missed days ## 🛠️ Tech Stack I built this with modern web technologies:

Frontend:
- Next.js 16 (App Router)
- React 19
- TypeScript
- Tailwind CSS
- shadcn/ui Components
Backend & AI:
- Next.js API Routes
- Google Gemini AI (gemini-2.5-flash)
- OpenAI integration ready
State Management:
- React Context + Hooks
- localStorage for persistence
Deployment:
- Vercel (Live at https://tense-playground.vercel.app)

🌐 Multi-language Support

Sentence translations in:

English (en)
Hindi (hi)
Telugu (te)
Tamil (ta)
Kannada (kn)
Malayalam (ml)
Marathi (mr) ## 📱 Features ✅ Fully Responsive (Desktop, Tablet, Mobile) ✅ Dark/Light Theme Support ✅ PWA Ready ✅ Open Source (MIT License) ✅ Zero Paywalls ## 🚀 How to Get Started ### Run Locally

# Clone the repo
git clone https://github.com/dharam-gfx/tense-playground.git
cd tense-playground
# Install dependencies
npm install
# or
pnpm install
# Set up environment
echo "GEMINI_API_KEY=your_api_key" > .env.local
# Run dev server
npm run dev

Open http://localhost:3000 and start learning!

Try Live

Visit: https://tense-playground.vercel.app

💡 What I Learned Building This

Structuring Complex State - Managing multiple game states, streaks, and challenges
AI Integration - Prompt engineering for grammar analysis and translation
Gamification Design - Making learning fun with badges, XP, and streaks
Performance Optimization - Lazy loading, code splitting with Next.js
Accessibility - Ensuring the app works for all learners
UI/UX Best Practices - Creating intuitive interfaces with shadcn/ui ## 🎯 Roadmap
[ ] User authentication & cloud save
[ ] Spaced repetition algorithm
[ ] Mobile app (React Native)
[ ] Voice recognition for pronunciation
[ ] Community features (leaderboards, discussions)
[ ] Advanced AI writing assistant
[ ] Video tutorials for each tense ## 🤝 Contributing I'd love your contributions! Areas needing help:
Bug fixes and optimizations
New tense examples and explanations
UI/UX improvements
Language translations
Test coverage Check the GitHub repo for contribution guidelines. ## 🙏 Support If you find this useful:
⭐ Star the repo on GitHub
💬 Share feedback in comments
🐛 Report bugs on GitHub Issues
📢 Spread the word Your support helps me improve and maintain this project! ## Final Thoughts Learning English tenses shouldn't be boring. With Tense Playground, you get an AI-powered buddy, fun games, and real progress tracking. Whether you're preparing for IELTS, TOEFL, or just improving daily, this is for you. Happy learning! 🚀

🚀 Writing cleaner, scalable JavaScript starts with small habits.

Dharmendra Kumar — Tue, 09 Dec 2025 07:44:38 +0000

📘 JavaScript Best Practice: Use Object Parameters Instead of Long Positional Arguments

❌ DON’T DO THIS — Positional Parameters

When a function has multiple parameters, especially optional ones, positional arguments become confusing and error-prone.

Bad Example

function saveUser(name, email, phone) {
  // ...
}

// ❌ Hard to read
saveUser("John", "", "9876543210");

// ❌ What is ""? Which field did we skip?

Problems

Hard to remember argument order
Passing empty strings just to skip parameters
Code becomes unreadable and brittle
Adding new optional parameters breaks all existing calls

✅ DO THIS — Use a Single Object Parameter

Objects allow named parameters, optional values, default values, and cleaner code.

Good Example

function saveUser({ name, email, phone }) {
  // ...
}

// ✅ Much clearer
saveUser({
  name: "John",
  phone: "9876543210",
});

Benefits

No need to remember order
Optional parameters become easy
Extensible without breaking old code
Self-documenting function calls

💡 Real-World Production Examples

✔ Example 1: API Request Handler

❌ Old (positional hell)

function fetchUsers(page, limit, search, sortBy, direction) {
  // ...
}

fetchUsers(1, 20, "", "name", "asc");

✅ New (object parameters)

function fetchUsers({
  page = 1,
  limit = 20,
  search = "",
  sortBy = "name",
  direction = "asc",
}) {
  // ...
}

fetchUsers({
  search: "john",
  direction: "desc",
});

✔ Example 2: Vue/React Component Utils

❌ Anti-pattern

function openModal(title, content, showClose, size) { }
openModal("Delete?", "Are you sure?", true, "lg");

✅ Clean pattern

function openModal({
  title,
  content,
  showClose = true,
  size = "md",
}) {}

openModal({
  title: "Delete?",
  content: "Are you sure?",
  size: "lg",
});

✔ Example 3: Logging in Production

❌ Wrong

log("error", "Database failed", false, Date.now());

✅ Right

log({
  level: "error",
  message: "Database failed",
  showAlert: false,
  timestamp: Date.now(),
});

✔ Example 4: Utility Function

❌ Bad

function calculatePrice(price, discount, tax, includeGST) {}

calculatePrice(1000, 0, 5, true);

✅ Good

function calculatePrice({
  price,
  discount = 0,
  tax = 5,
  includeGST = false,
}) {}

calculatePrice({
  price: 1000,
});

💼 Production-Ready Template (Reusable)

/**
 * @description Generic best-practice function with object params.
 */
function doTask({
  required,
  optional1 = "",
  optional2 = null,
  enabled = true,
}) {
  // function logic
}

// Usage:
doTask({
  required: "value",
  enabled: false,
});

🔐 NookChat – A One-Time Encrypted, Anonymous Chat App (No Login Required)

Dharmendra Kumar — Fri, 06 Jun 2025 12:43:40 +0000

🚀 What is NookChat?

NookChat is a lightweight, anonymous chat app designed for one-time, private conversations. It uses end-to-end encryption, requires no login or registration, and deletes all chat data once the session ends. Perfect for people who just want a private corner — a digital “nook” — to talk securely.

🔗 Live Demo
📦 GitHub Repo

🌟 Like It? Show Some Love!

If you found NookChat interesting, helpful, or inspiring — consider giving the project a ⭐️ on GitHub. It really motivates me to keep building and sharing open-source projects!

👉 Star on GitHub

✨ Key Features

🔐 AES-256 End-to-End Encryption using CryptoJS
🧑‍🚫 No Authentication Required — just share a room code
🧹 Ephemeral Messaging — all messages are deleted after the session
😊 Emoji Picker + Skin tone support
📎 Image/File Upload (securely handled)
🔔 Custom Sound Notifications
🌙 Dark/Light Mode (auto-detects system preference)
🤖 AI Reply Suggestions via Gemini AI
🧵 Reply Threads for organized conversations
📱 Mobile Responsive with full touch support
📊 Privacy-Focused Analytics using Google Analytics (gtag.js)

🛠️ Tech Stack

Frontend: Next.js + Tailwind CSS + shadcn/ui
Backend: Node.js, Express, Socket.IO
Encryption: AES-256 with CryptoJS + Web Crypto API
Hosting: Vercel
File Uploads: Server-local with support to scale to cloud
Realtime: WebSockets via Socket.IO
Analytics: GA4 (privacy-configured)
AI: Gemini API for reply suggestions

📸 Sneak Peek

➡️ Check out the full walkthrough video on LinkedIn:

🔗 Watch on LinkedIn

(Note: DEV.to doesn’t allow iframes, so use the link above. You can also add a static thumbnail image that links to the video.)

💡 Why I Built This

Privacy-focused messaging apps often come with friction — sign-ups, third-party logins, or bloated features. I wanted something simple, fast, and truly ephemeral. NookChat is for those one-time conversations that don’t need to live forever, just like a real-life whisper in a quiet corner.

📂 Explore the Code

The entire project is open source. I’d love feedback, issues, PRs, or just a ⭐️!

👉 GitHub Repo

🙌 Support & Feedback

Try it out: https://nookchat.vercel.app
Drop your thoughts in the comments
Share with anyone who values privacy 🕶️

✅ Image Quality: AVIF vs WebP vs JPEG/PNG

Dharmendra Kumar — Tue, 18 Mar 2025 11:36:01 +0000

Below is the updated version of your content with the added browser support information for both AVIF and WebP:

✅ Image Quality: AVIF vs WebP vs JPEG/PNG

Let’s dive deeper into image quality — how sharp and vibrant your images appear, and how much you can shrink their file size without compromising detail.

🔥 AVIF Quality

Pros	Cons
✅ Superior compression: Up to 50% smaller than WebP at the same quality!	⚠️ Encoding speed can be slower (when creating the image, not during loading).
✅ High dynamic range (HDR) support for vivid, bright images.	⚠️ Safari still has partial support, so always test.
✅ Best for gradients, details, transparency, and sharp edges (less banding or artifacts).
✅ Transparency (alpha) and animation supported.
✅ Improved image sharpness and clarity compared to WebP at the same size.
✅ Improved color accuracy: AVIF supports more colors and depth for richer images.

➡️ AVIF typically outperforms WebP, especially with complex images like gradients, shadows, and intricate details, making it ideal for high-quality web visuals.

Code Example: AVIF Image in HTML

<picture>
  <source srcset="image.avif" type="image/avif">
  <img src="image.jpg" alt="AVIF Example" />
</picture>

⚡ WebP Quality

Pros	Cons
✅ Much smaller than JPEG/PNG, with good quality maintained.	❌ Not as efficient as AVIF for compression at the same quality.
✅ Transparency support (including alpha channel).	❌ Visible artifacts at smaller file sizes, especially in high-detail areas like gradients.
✅ Animation support (ideal for lightweight GIF alternatives).	❌ Compression limits may show in complex images like high-resolution photos.
✅ Widely supported in all major browsers, even in older versions of Safari.

➡️ WebP strikes a balance: smaller file sizes than JPEG/PNG with great quality and almost universal support. However, it’s not quite as advanced as AVIF in terms of image quality and compression efficiency.

Code Example: WebP Image in HTML

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="WebP Example" />
</picture>

📷 JPEG/PNG Quality

JPEG	PNG
✅ Decent quality (lossy compression), suitable for photos.	✅ Perfect quality (lossless compression), no quality loss.
❌ Larger file sizes due to lower compression efficiency.	❌ Huge file sizes, especially for detailed images.
❌ No support for transparency (without tricks).	✅ Supports transparency with alpha channel.
❌ No support for animation.	❌ No support for animation.
❌ Visible artifacts at low compression rates (blurry edges).	✅ Ideal for logos, icons, and illustrations requiring high detail.

Code Example: JPEG Image in HTML

<img src="image.jpg" alt="JPEG Example" />

Code Example: PNG Image in HTML

<img src="image.png" alt="PNG Example" />

✅ Visual Example of Quality Difference

AVIF ➡️ Smaller file size + better detail + less banding (ideal for photos with high dynamic range).
WebP ➡️ Slightly bigger but still very efficient. Good quality, though compression artifacts can be more noticeable in fine gradients or detailed patterns.
JPEG/PNG ➡️ Larger files with lower compression efficiency. JPEG may introduce visible compression artifacts, while PNG offers lossless quality but at a costly file size.

✅ Quick Summary

Format	Quality (Best to Worst)	Compression	Transparency	Animation	Browser Support	Best For
AVIF	🔥 Best quality + smallest size	🚀 Up to 50% better than WebP	✅ Yes	✅ Yes	Chrome, Firefox, Edge (partial Safari)	Modern web images, high-quality visuals
WebP	✅ Very good, not as good as AVIF	⚡ Smaller than JPEG, bigger than AVIF	✅ Yes	✅ Yes	Almost all major browsers	Compatibility, fallback for older browsers
JPEG	❌ OK but large	❌ Outdated, inefficient	❌ No	❌ No	All browsers	Older websites, photo galleries
PNG	✅ Perfect (lossless), huge files	❌ Very large	✅ Yes	❌ No	All browsers	Logos, icons, transparent graphics

✅ Additional Benefits of Modern Image Formats

🚀 Better Compression

AVIF offers superior compression, reducing file size by up to 50% compared to WebP for the same image quality, making it ideal for web optimization and reducing load times.
WebP provides a balance, smaller file sizes than JPEG/PNG while maintaining good quality, though it’s not as efficient as AVIF.

⚡ Faster Loading Times

With smaller file sizes, both AVIF and WebP images contribute to faster page load speeds, improving user experience and SEO rankings.
Smaller image sizes mean fewer HTTP requests and less bandwidth consumption, which is crucial for mobile users and those with slower internet connections.

🖼️ Support for Transparency and Animation

Both AVIF and WebP support transparency and animation, making them more versatile for modern web content, such as interactive websites, dynamic banners, and app icons.

🌈 Enhanced Image Quality

AVIF supports a higher bit-depth (up to 12 bits per channel), which results in improved color accuracy, richer tones, and better rendering of fine details, especially in HDR images.
WebP offers decent image quality with reasonable compression but struggles with complex images compared to AVIF.

📊 SEO & Performance Optimization

Image size optimization directly impacts SEO rankings. Faster load times due to smaller file sizes can lead to a lower bounce rate and higher search engine rankings.
By using AVIF/WebP over traditional formats like JPEG/PNG, websites become more mobile-friendly and are able to better adapt to varying internet speeds.

🎨 Use Cases

AVIF is ideal for high-quality visuals with dynamic range (e.g., photography, artwork) while maintaining low file sizes.
WebP serves as a solid middle ground, especially for fallback support where broad compatibility and relatively small file sizes are key.
JPEG remains best for older websites, galleries, and instances where file size is not as crucial but high-quality photos are needed.
PNG is best used for images that require lossless quality, such as logos and icons where transparency is a priority.

✅ Browser Support for AVIF and WebP

Browsers Supporting AVIF:

Browser	Version
Google Chrome	Supported since version 85
Mozilla Firefox	Supported since version 93
Microsoft Edge	Supported since version 85
Safari	Supported since version 16.0
Opera	Supported since version 71
Samsung Internet	Supported since version 14.0
Brave	Supported since version 1.22
Vivaldi	Supported since version 3.3

Browsers Not Supporting AVIF:

Internet Explorer: All versions
Older versions of browsers: Versions prior to the ones listed above do not support AVIF.

Browsers Supporting WebP:

Browser	Version
Google Chrome	Supported since version 23
Mozilla Firefox	Supported since version 65
Microsoft Edge	Supported since version 18
Safari	Supported since version 14
Opera	Supported since version 15
Samsung Internet	Supported since version 4.0
Brave	Supported since version 1.0
Vivaldi	Supported since version 2.0

Browsers Not Supporting WebP:

Internet Explorer: All versions
Older versions of browsers: Versions prior to the ones listed above do not support WebP.

✅ When Quality Matters

AVIF: Use when high-quality images and small file sizes are essential for modern web design.
WebP: Perfect for broad browser support and fallbacks, offering a solid balance between quality and file size.
JPEG/PNG: Use only if you require maximum compatibility with older browsers or devices (e.g., email attachments, legacy systems).

By making the right choice between these formats, you can optimize user experience, boost SEO, and deliver higher-quality images without sacrificing loading speeds or performance.

Upcoming JavaScript Features: Simplifying Array Combinations with `Array.zip` and `Array.zipKeyed`

Dharmendra Kumar — Mon, 25 Nov 2024 06:02:50 +0000

Introduction

In JavaScript, working with arrays is a staple of everyday programming. However, combining multiple arrays in an element-wise fashion often requires verbose or external solutions. Upcoming proposals, Array.zip and Array.zipKeyed, aim to simplify this process, making array handling more intuitive and performant. Let's dive into these proposals, their syntax, use cases, and potential challenges.

1. The Problem: Combining Arrays in JavaScript

Current Challenges

Combining multiple arrays often involves:

Using loops.
Relying on helper methods like Array.prototype.map.
Leveraging external libraries like Lodash or Ramda.

This leads to verbose and less readable code. For instance, merging two arrays element-wise requires:

const array1 = [1, 2, 3];
const array2 = ['a', 'b', 'c'];

const combined = array1.map((value, index) => [value, array2[index]]);
console.log(combined); // [[1, 'a'], [2, 'b'], [3, 'c']]

While functional, this approach lacks elegance and introduces boilerplate.

2. The Solution: Introducing `Array.zip` and `Array.zipKeyed`

What Are These Methods?

Array.zip: Combines multiple arrays into a new array of tuples, element by element.
Array.zipKeyed: Combines multiple arrays into objects, using a provided set of keys.

These methods aim to improve code readability and streamline array manipulations by making synchronization of multiple arrays simpler and more ergonomic.

3. Syntax and Examples

`Array.zip`

Syntax:

Array.zip(...iterables);

Parameters:

iterables: The arrays or iterables to combine.

Example:

const numbers = [1, 2, 3];
const letters = ['a', 'b', 'c'];
const booleans = [true, false, true];

const result = Array.zip(numbers, letters, booleans);
console.log(result);
// Output: [[1, 'a', true], [2, 'b', false], [3, 'c', true]]

`Array.zipKeyed`

Syntax:

Array.zipKeyed(keys, ...iterables);

Parameters:

keys: Array of strings representing the keys for resulting objects.
iterables: The arrays or iterables to combine.

Example:

const keys = ['id', 'name', 'isActive'];
const ids = [101, 102, 103];
const names = ['Alice', 'Bob', 'Charlie'];
const statuses = [true, false, true];

const result = Array.zipKeyed(keys, ids, names, statuses);
console.log(result);
// Output:
// [
//   { id: 101, name: 'Alice', isActive: true },
//   { id: 102, name: 'Bob', isActive: false },
//   { id: 103, name: 'Charlie', isActive: true }
// ]

4. Use Cases

Data Merging

When combining data from multiple sources, like APIs returning separate arrays:

const headers = ['Name', 'Age', 'City'];
const values = ['Alice', 30, 'New York'];

const result = Array.zipKeyed(headers, values);
console.log(result);
// Output: [{ Name: 'Alice', Age: 30, City: 'New York' }]

CSV Parsing

Parse CSV files into objects by mapping headers to their corresponding row values:

const headers = ['Product', 'Price', 'Stock'];
const row1 = ['Laptop', 1000, 50];
const row2 = ['Phone', 500, 150];

const data = [row1, row2].map(row => Array.zipKeyed(headers, row));
console.log(data);
// Output:
// [
//   { Product: 'Laptop', Price: 1000, Stock: 50 },
//   { Product: 'Phone', Price: 500, Stock: 150 }
// ]

Form Handling

Combine field names and values for processing:

const fields = ['username', 'email', 'password'];
const values = ['john_doe', 'john@example.com', '123456'];

const formData = Array.zipKeyed(fields, values);
console.log(formData);
// Output: [{ username: 'john_doe', email: 'john@example.com', password: '123456' }]

Parallel Iteration

Simplify related computations involving multiple arrays:

const distances = [10, 20, 30]; // in kilometers
const times = [1, 2, 3];        // in hours

const speeds = Array.zip(distances, times).map(([distance, time]) => distance / time);
console.log(speeds); // Output: [10, 10, 10] (km/h)

5. Potential Pitfalls and Solutions

Uneven Array Lengths

If input arrays have different lengths, only the shortest array's elements are combined.

const array1 = [1, 2, 3];
const array2 = ['a', 'b'];

const result = Array.zip(array1, array2);
console.log(result); // Output: [[1, 'a'], [2, 'b']]

Solution:

Normalize array lengths before zipping.

Key Mismatch in `Array.zipKeyed`

Mismatch between keys and arrays may lead to undefined or missing values.

const keys = ['a', 'b'];
const array1 = [1, 2, 3];

const result = Array.zipKeyed(keys, array1);
console.log(result);
// Output: [{ a: 1, b: 2 }, { a: 3, b: undefined }]

Solution:

Ensure keys match the number of arrays.

Not Yet Standardized

As of now, these features are at Stage 1 in the TC39 proposal process and are not available in most environments.

Solution:

Use polyfills or wait for official support.

6. Conclusion

The Array.zip and Array.zipKeyed proposals are poised to bring a much-needed ergonomic boost to array handling in JavaScript. By reducing boilerplate and improving readability, these methods empower developers to work more efficiently with synchronized data.

Stay Tuned

In the next installment of our series, we'll explore Atomics.pause and how it enhances multithreaded performance in JavaScript.

Using `call`, `apply`, and `bind` in a Restaurant Billing System.

Dharmendra Kumar — Thu, 26 Sep 2024 07:30:11 +0000

Scenario Overview

In a restaurant, customers can order multiple dishes, and we want to calculate their total bill based on the prices of the dishes ordered, any applicable taxes, and discounts. We’ll create a function to compute the total bill and use call, apply, and bind to handle different customers and their orders.

Code Example

// Function to calculate the total bill
function calculateTotalBill(taxRate, discount) {
    const taxAmount = this.orderTotal * (taxRate / 100); // Calculate tax based on the total order amount
    const totalBill = this.orderTotal + taxAmount - discount; // Calculate the final bill
    return totalBill;
}

// Customer objects
const customer1 = {
    name: "Sarah",
    orderTotal: 120 // Total order amount for Sarah
};

const customer2 = {
    name: "Mike",
    orderTotal: 200 // Total order amount for Mike
};

// 1. Using `call` to calculate the total bill for Sarah
const totalBillSarah = calculateTotalBill.call(customer1, 10, 15); // 10% tax and $15 discount
console.log(`${customer1.name}'s Total Bill: $${totalBillSarah}`); // Output: Sarah's Total Bill: $117

// 2. Using `apply` to calculate the total bill for Mike
const taxRateMike = 8; // 8% tax
const discountMike = 20; // $20 discount
const totalBillMike = calculateTotalBill.apply(customer2, [taxRateMike, discountMike]); // Using apply with an array
console.log(`${customer2.name}'s Total Bill: $${totalBillMike}`); // Output: Mike's Total Bill: $176

// 3. Using `bind` to create a function for Sarah's future calculations
const calculateSarahBill = calculateTotalBill.bind(customer1); // Binding Sarah's context
const totalBillSarahAfterDiscount = calculateSarahBill(5, 10); // New tax rate and discount
console.log(`${customer1.name}'s Total Bill after New Discount: $${totalBillSarahAfterDiscount}`); // Output: Sarah's Total Bill after New Discount: $115

Explanation

Function Definition:
- We define a function calculateTotalBill that takes taxRate and discount as parameters. This function calculates the total bill by adding tax to the order total and subtracting any discounts.
Customer Objects:
- We create two customer objects, customer1 (Sarah) and customer2 (Mike), each with their respective names and total order amounts.
Using call:
- For Sarah, we calculate her total bill using the call method. This allows us to specify customer1 as the context and pass the tax rate and discount as separate arguments. The output shows Sarah's total bill after applying the tax and discount.
Using apply:
- For Mike, we use the apply method to calculate his total bill. This method allows us to pass the parameters as an array, making it convenient for handling multiple arguments. The total bill for Mike is calculated similarly but with different tax and discount values.
Using bind:
- We create a bound function for Sarah using bind, which locks the context to customer1. This means we can later call this new function without needing to specify this again. We demonstrate this by calculating Sarah's total bill again with different parameters, allowing for flexible future calculations.

Output

The console logs display the total bills for both Sarah and Mike based on their respective orders and discounts.
This example effectively demonstrates how call, apply, and bind can be used to manage function contexts within a restaurant billing system.

Conclusion

This scenario highlights how call, apply, and bind can be utilized in a practical setting, such as calculating restaurant bills, helping to understand how these methods facilitate the management of this in JavaScript.

Mastering JavaScript Objects: Methods, Properties, Prototypes, and proto in Real-Time User Management System

Dharmendra Kumar — Thu, 26 Sep 2024 06:39:17 +0000

In JavaScript, objects are foundational to most of its functionality. Here's a breakdown of the terms Methods, Properties, Prototypes, and proto in the context of JavaScript objects:

1. Methods

Definition: A method is simply a function that is a property of an object.
Purpose: Methods allow objects to perform actions, usually related to the data stored in the object.

let car = {
  brand: "Toyota",
  start: function() { // This is a method
    console.log("Car started");
  }
};

car.start(); // Output: Car started

Here, start is a method of the car object.

2. Properties

Definition: A property is a value associated with a key (name) inside an object.
Purpose: Properties define the characteristics of the object.

let car = {
  brand: "Toyota",  // This is a property
  color: "Red"      // Another property
};

console.log(car.brand); // Output: Toyota

In this example, brand and color are properties of the car object.

3. Prototypes

Definition: A prototype is a mechanism by which JavaScript objects inherit properties and methods from another object. Every JavaScript object has a prototype, and it allows inheritance.
Purpose: Prototypes provide a way to share methods and properties across objects without needing to redefine them in every instance.

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

Person.prototype.greet = function() { // Adding a method to the prototype
  console.log(`Hello, my name is ${this.name}`);
};

let john = new Person("John");
john.greet(); // Output: Hello, my name is John

Here, greet is added to the prototype of the Person function, so all instances of Person (like john) can access this method without having to define it individually for each instance.

4. proto

Definition: The __proto__ property is a reference to the prototype object from which the object was inherited. It links the current object to its prototype.
Purpose: It enables access to the methods and properties defined on an object's prototype.

let car = {
  brand: "Toyota"
};

let sportsCar = {
  speed: "fast"
};

// Set sportsCar's prototype to car
sportsCar.__proto__ = car;

console.log(sportsCar.brand); // Output: Toyota (inherited from car)

In this example, sportsCar inherits the brand property from the car object via its __proto__ link. Though sportsCar doesn't have a brand property directly, it can access it because car is its prototype.

Summary:

Methods: Functions that are properties of objects.
Properties: Values that define characteristics of an object.
Prototypes: Mechanisms that allow objects to inherit properties and methods from other objects.
proto: The internal reference to the prototype of an object.

Here's a real-time project scenario that demonstrates the practical use of various Object methods in JavaScript. In this scenario, you are building a user management system for an online application that allows users to manage their profiles. We'll walk through how and why to use each of the provided methods.

Real-Time Project Scenario: User Management System

Project Overview:

In this project, users can register and update their profiles. We store user data in an object, and different functionalities like grouping users by roles, freezing certain properties, ensuring specific validation checks, and handling user input transformations are needed.

1. `Object.assign()`: Merging User Data

Scenario: When a user updates their profile, we need to merge the updated data into the existing user object.

Why Use It: Object.assign() allows us to combine properties from different objects. We can merge the existing user object with the updated values easily.

Example:

const existingUser = { name: "John", age: 30, role: "admin" };
const updatedData = { age: 31, city: "New York" };

// Merging updated data into the existing user object
const mergedUser = Object.assign({}, existingUser, updatedData);
console.log(mergedUser); 
// Output: { name: "John", age: 31, role: "admin", city: "New York" }

2. `Object.create()`: User Role Prototyping

Scenario: Suppose we need to create a user object that inherits specific methods related to the role of the user, such as admin or guest.

Why Use It: Object.create() lets us create objects that inherit from a prototype, allowing reusable functionality across similar objects.

Example:

const rolePrototype = {
  getRole: function() {
    return this.role;
  }
};

// Creating a user object with role prototype
const adminUser = Object.create(rolePrototype);
adminUser.role = "admin";
console.log(adminUser.getRole()); // Output: "admin"

3. `Object.defineProperty()`: Setting Read-Only Properties

Scenario: In a user profile, the userID should be immutable after it is created. We need to make sure that the userID cannot be changed.

Why Use It: Object.defineProperty() allows us to control the characteristics of a property, such as whether it can be written to or modified.

Example:

const user = { name: "Alice" };
Object.defineProperty(user, 'userID', {
  value: '12345',
  writable: false,  // Making userID read-only
  enumerable: true
});

console.log(user.userID); // Output: 12345
user.userID = '67890'; // This will not change userID
console.log(user.userID); // Output: 12345

Sure! Here are examples demonstrating the difference between enumerable: true and enumerable: false using the Object.defineProperty method.

Example with `enumerable: true`

In this example, we define a property with enumerable set to true. This property will show up in enumeration operations.

const user1 = { name: "Alice" };

// Define an enumerable property
Object.defineProperty(user1, 'userID', {
  value: '12345',
  writable: false,  // Making userID read-only
  enumerable: true  // This property is enumerable
});

// Check enumerable properties
console.log("For...in loop:");
for (let key in user1) {
  console.log(key); // Logs: name, userID
}

console.log("Object.keys():", Object.keys(user1)); // Logs: ['name', 'userID']
console.log("JSON.stringify():", JSON.stringify(user1)); // Logs: {"name":"Alice","userID":"12345"}

Example with `enumerable: false`

In this example, we define a property with enumerable set to false. This property will not show up in enumeration operations.

const user2 = { name: "Bob" };

// Define a non-enumerable property
Object.defineProperty(user2, 'userID', {
  value: '67890',
  writable: false,  // Making userID read-only
  enumerable: false // This property is not enumerable
});

// Check enumerable properties
console.log("For...in loop:");
for (let key in user2) {
  console.log(key); // Logs: name (userID is not logged)
}

console.log("Object.keys():", Object.keys(user2)); // Logs: ['name'] (userID is not included)
console.log("JSON.stringify():", JSON.stringify(user2)); // Logs: {"name":"Bob"} (userID is not included)

Summary of Output

For user1 (with enumerable: true):
- Logs both name and userID in the for...in loop.
- Object.keys() returns ['name', 'userID'].
- JSON.stringify() includes both properties.
For user2 (with enumerable: false):
- Only logs name in the for...in loop.
- Object.keys() returns ['name'].
- JSON.stringify() only includes the name property.

4. `Object.defineProperties()`: Setting Multiple Properties

Scenario: When registering a new user, we want to define both the userID and role, where userID is immutable, but role is writable.

Why Use It: Object.defineProperties() is useful when defining multiple properties at once with different characteristics.

Example:

const newUser = {};
Object.defineProperties(newUser, {
  userID: {
    value: '98765',
    writable: false,
    enumerable: true
  },
  role: {
    value: 'guest',
    writable: true,
    enumerable: true
  }
});

console.log(newUser); 
// Output: { userID: "98765", role: "guest" }

5. `Object.entries()`: Iterating Through User Data

Scenario: We need to display all the key-value pairs of a user’s profile for easy viewing in the admin panel.

Why Use It: Object.entries() converts an object into an array of key-value pairs, which makes it easier to iterate through the data.

Example:

const userProfile = { name: "Alice", age: 28, city: "Paris" };
const entries = Object.entries(userProfile);

entries.forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});
// Output: 
// name: Alice
// age: 28
// city: Paris

6. `Object.freeze()`: Freezing User Profiles

Scenario: After a user submits their profile, you want to make the entire profile immutable to prevent any accidental modifications.

Why Use It: Object.freeze() prevents adding, removing, or changing any property of the object.

Example:

const userProfile = { name: "John", age: 31, city: "New York" };
Object.freeze(userProfile);

userProfile.city = "San Francisco"; // This change won't be applied
console.log(userProfile.city); // Output: "New York"

7. `Object.fromEntries()`: Transforming Form Data into an Object

Scenario: After receiving user profile data from a form submission, we get it as an array of key-value pairs and need to convert it back into an object.

Why Use It: Object.fromEntries() converts an array of key-value pairs into an object.

Example:

const formData = [['name', 'Alice'], ['age', '28'], ['city', 'Paris']];
const userProfile = Object.fromEntries(formData);

console.log(userProfile); 
// Output: { name: "Alice", age: "28", city: "Paris" }

8. `groupBy()` (Custom Implementation): Group Users by Role

Scenario: We need to categorize users into different groups based on their roles (e.g., admin, guest).

Why Use It: JavaScript doesn’t have a built-in groupBy() function, but we can create one to group users by a certain property like their role.

Example:

const users = [
  { name: "Alice", role: "admin" },
  { name: "Bob", role: "guest" },
  { name: "Charlie", role: "admin" },
];

const groupBy = (array, key) => {
  return array.reduce((acc, obj) => {
    const keyValue = obj[key];
    if (!acc[keyValue]) acc[keyValue] = [];
    acc[keyValue].push(obj);
    return acc;
  }, {});
};

const groupedUsers = groupBy(users, 'role');
console.log(groupedUsers);
// Output: 
// { 
//   admin: [{ name: "Alice", role: "admin" }, { name: "Charlie", role: "admin" }],
//   guest: [{ name: "Bob", role: "guest" }]
// }

9. `Object.hasOwn()`: Checking User-Specific Properties

Scenario: Before allowing a user to access a feature, we want to check if they have a specific property like role.

Why Use It: Object.hasOwn() ensures that the property exists directly on the object and not in the prototype chain.

Example:

const user = { name: "Alice", role: "admin" };
console.log(Object.hasOwn(user, 'role')); // true
console.log(Object.hasOwn(user, 'age'));  // false

10. `Object.is()`: Strict Equality for Profile Comparison

Scenario: We want to strictly compare two profile objects to check if they are exactly the same, including NaN.

Why Use It: Object.is() compares two values and correctly handles special cases, such as comparing NaN.

Example:

const user1 = { name: "John" };
const user2 = { name: "John" };
console.log(Object.is(user1, user2)); // false (different references)
console.log(Object.is(NaN, NaN));     // true

11. `Object.keys()` and `Object.values()`: Displaying User Data

Scenario: We want to get an array of keys (property names) or values (property values) from a user's profile.

Why Use It: Object.keys() is used to retrieve the keys, and Object.values() retrieves the values of an object.

Example:

const user = { name: "John", age: 30, city: "New York" };

console.log(Object.keys(user));   // ["name", "age", "city"]
console.log(Object.values(user)); // ["John", 30, "New York"]

12. `Object.hasOwnProperty()`: Custom Property Check

Scenario: When working with inherited objects, we need to ensure a property exists directly on an object and not on its prototype.

Why Use It: Object.hasOwnProperty() is useful for checking if a property belongs to the object itself, not its prototype chain.

Example:

const user = { name: "Alice" };
console.log(user.hasOwnProperty('name'));  // true
console.log(user.hasOwnProperty('toString'));  // false (inherited from prototype)

Here’s a detailed comparison of similar or related Object methods and additional topics, explaining how they differ in usage and when to use each one. This will help you choose the right method for specific use cases in your project.

1. `Object.assign()` vs `Object.create()`

Similarity:

Both Object.assign() and Object.create() are used to create objects.

Differences:

Method	Purpose	When to Use
`Object.assign()`	Copies the properties of one or more objects into another object.	When you need to merge or shallow copy objects (e.g., updating user data or combining settings).
`Object.create()`	Creates a new object with a specified prototype.	When you need to set up prototypal inheritance, such as creating users with role-specific behaviors.

Example:

// Object.assign: Merging objects
const target = {};
const source = { name: "John" };
Object.assign(target, source); // { name: "John" }

// Object.create: Inheriting from a prototype
const rolePrototype = { role: "admin" };
const adminUser = Object.create(rolePrototype);
console.log(adminUser.role); // "admin"

2. `Object.defineProperty()` vs `Object.defineProperties()`

Similarity:

Both methods define properties with configurable characteristics (e.g., writable, enumerable).

Differences:

Method	Purpose	When to Use
`Object.defineProperty()`	Defines or modifies a single property on an object.	Use when you need fine-grained control over a single property (e.g., making `userID` read-only).
`Object.defineProperties()`	Defines or modifies multiple properties at once.	Use when you need to set up multiple properties with different configurations in one go.

Example:

// Object.defineProperty: Setting a single property
const user = {};
Object.defineProperty(user, 'userID', { value: '123', writable: false });

// Object.defineProperties: Setting multiple properties
Object.defineProperties(user, {
  role: { value: 'admin', writable: true },
  age: { value: 30, enumerable: true }
});

3. `Object.entries()` vs `Object.keys()` vs `Object.values()`

Similarity:

All three methods return information about the properties of an object, but in different forms.

Differences:

Method	Purpose	When to Use
`Object.entries()`	Returns an array of key-value pairs.	Use when you need both keys and values (e.g., iterating over a profile’s data for display).
`Object.keys()`	Returns an array of keys (property names).	Use when you need only the property names (e.g., validating fields in a user form).
`Object.values()`	Returns an array of values.	Use when you only need the property values (e.g., aggregating numerical values like expenses in a budget app).

Example:

const userProfile = { name: "John", age: 30, city: "New York" };

// Object.entries: Key-value pairs
console.log(Object.entries(userProfile)); // [["name", "John"], ["age", 30], ["city", "New York"]]

// Object.keys: Only keys
console.log(Object.keys(userProfile));    // ["name", "age", "city"]

// Object.values: Only values
console.log(Object.values(userProfile));  // ["John", 30, "New York"]

4. `Object.freeze()` vs `Object.seal()`

Similarity:

Both methods control modifications to an object but differ in the level of restriction they impose.

Differences:

Method	Purpose	When to Use
`Object.freeze()`	Makes an object completely immutable (cannot add, remove, or change properties).	Use when you need a strict immutability guarantee, such as locking down a user’s profile after registration.
`Object.seal()`	Prevents adding or removing properties but allows modification of existing ones.	Use when you need to prevent property addition/removal but still allow changes to existing properties.

Example:

const user = { name: "Alice", role: "guest" };

// Object.freeze: Completely immutable
Object.freeze(user);
user.name = "Bob"; // Won't change
delete user.role;  // Won't delete

// Object.seal: Modify existing, but can't add/remove
Object.seal(user);
user.name = "Bob";  // Allowed
delete user.role;   // Not allowed

5. `Object.hasOwnProperty()` vs `Object.hasOwn()`

Similarity:

Both methods check if an object has a particular property, but there are slight technical differences.

Differences:

Method	Purpose	When to Use
`Object.hasOwnProperty()`	Checks if a property exists directly on the object (older).	Use for older JavaScript codebases where backward compatibility is needed.
`Object.hasOwn()`	Similar to `hasOwnProperty()` but designed as a more modern and robust method (ES2022).	Use in modern JavaScript projects for checking if an object has a direct property (avoids issues with prototypes).

Example:

const user = { name: "John" };

// Object.hasOwnProperty
console.log(user.hasOwnProperty('name')); // true
console.log(user.hasOwnProperty('age'));  // false

// Object.hasOwn
console.log(Object.hasOwn(user, 'name')); // true
console.log(Object.hasOwn(user, 'age'));  // false

6. `Object.is()` vs `===`

Similarity:

Both are used for comparing values, but they handle special cases differently.

Differences:

Method	Purpose	When to Use
`Object.is()`	Compares two values, with special handling for `NaN`, `-0`, and `+0`.	Use when you need strict equality, especially when comparing special values like `NaN` or zero.
`===`	Standard strict equality check.	Use for typical strict equality checks, but be aware that `NaN === NaN` is false, and `-0 === +0` is true.

Example:

console.log(NaN === NaN);      // false
console.log(Object.is(NaN, NaN)); // true

console.log(-0 === +0);        // true
console.log(Object.is(-0, +0));   // false

7. `Object.fromEntries()` vs `Object.entries()`

Similarity:

Both methods convert between objects and key-value pairs, but in opposite directions.

Differences:

Method	Purpose	When to Use
`Object.entries()`	Converts an object into an array of key-value pairs.	Use when you need to iterate or manipulate key-value pairs from an object.
`Object.fromEntries()`	Converts an array of key-value pairs into an object.	Use when you receive data as an array of pairs (e.g., form data) and need to transform it back into an object.

Example:

const userProfile = { name: "Alice", age: 28 };
const entries = Object.entries(userProfile);

// From key-value pairs to object
const newProfile = Object.fromEntries(entries);
console.log(newProfile); // { name: "Alice", age: 28 }

8. `Object.keys()` vs `Object.getOwnPropertyNames()`

Similarity:

Both methods retrieve the keys of an object.

Differences:

Method	Purpose	When to Use
`Object.keys()`	Returns only the enumerable (visible) property keys of an object.	Use when you only need the enumerable properties (common for iterating over user objects).
`Object.getOwnPropertyNames()`	Returns both enumerable and non-enumerable property keys.	Use when you need all properties, including non-enumerable ones (e.g., metadata, hidden properties).

Example:

const user = { name: "Alice" };
Object.defineProperty(user, 'role', { value: 'admin', enumerable: false });

console.log(Object.keys(user)); // ["name"]
console.log(Object.getOwnPropertyNames(user)); // ["name", "role"]

In this enhanced version, we will dive deeper into creating your own methods and properties in JavaScript objects, as well as using prototypes. This will help provide even more flexibility and power in a real-time project scenario.

Creating Custom Methods and Properties in JavaScript Objects:

JavaScript objects allow you to define your own properties and methods. This can be useful when you want to extend the capabilities of an object to perform specific tasks related to your application.

Example Scenario: Adding a Role Check in the User Management System

Imagine you're building a user management system where each user has specific roles, like "admin" or "editor." You want to create a method to check the user's role.

   // Create a user object
   const user = {
     name: 'John Doe',
     role: 'admin',

     // Define a custom method to check the role
     checkRole() {
       if (this.role === 'admin') {
         return `${this.name} has admin access`;
       } else {
         return `${this.name} is a regular user`;
       }
     }
   };

   console.log(user.checkRole()); // John Doe has admin access

Here, we defined a custom method checkRole within the user object to determine if the user has admin privileges. This can be expanded to check for multiple roles and permissions.

Using Object Prototypes to Extend Functionality

JavaScript prototypes allow you to add properties or methods to all instances of a particular object type. For example, you can add methods to an object prototype, so all objects created with a specific constructor can access that method.

Example Scenario: Extending the User Object with Prototypes

Let’s say you want all users in the system to have access to a method that can toggle their roles between "admin" and "user" without redefining it for every user object.

   // Define the constructor function for User
   function User(name, role) {
     this.name = name;
     this.role = role;
   }

   // Add a method to User prototype to toggle role
   User.prototype.toggleRole = function() {
     this.role = this.role === 'admin' ? 'user' : 'admin';
   };

   // Create user instances
   const user1 = new User('Alice', 'user');
   const user2 = new User('Bob', 'admin');

   console.log(user1.role); // user
   user1.toggleRole(); // Toggling role
   console.log(user1.role); // admin

In this example, toggleRole is added to the User.prototype, meaning any user instance created will inherit this method. This is useful for reusing code and maintaining DRY (Don't Repeat Yourself) principles in a real-time system.

By mastering custom methods, properties, and prototypes, you can create more advanced, maintainable, and efficient systems tailored to the needs of your application, such as the User Management System scenario described.

1. `proto` (Dunder Proto or Double Underscore Proto)

In JavaScript, __proto__ and prototype are two related but distinct concepts that often confuse developers, especially when working with objects and inheritance. Here's a breakdown:

__proto__ is an internal property of an object that points to its prototype.
It refers to the actual prototype that was used to create the object instance.
This is part of JavaScript's prototypal inheritance system. When you try to access a property or method on an object, if it's not found directly on the object, JavaScript will look up the prototype chain via __proto__.

Key Points:

Every object has a __proto__ property (except Object.prototype, which is the root of the prototype chain).
__proto__ is a reference to the object's prototype, which is shared among all instances of that object.

Example:

const person = {
  name: 'Alice',
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

// Creating another object that inherits from 'person'
const student = {
  __proto__: person,
  grade: 'A'
};

console.log(student.name); // Inherited from 'person' => 'Alice'
student.sayHello();        // Inherited method => 'Hello, my name is Alice'

In this example, student doesn't directly have the name property or the sayHello method, but it can access them because its __proto__ points to person.

2. `prototype`

prototype is a property of constructor functions (functions used to create objects).
When you create an object using a constructor function (like using new), the newly created object’s __proto__ property is set to point to the constructor’s prototype object.
Only functions have the prototype property, and it's used to set up inheritance.

Key Points:

Functions (that act as constructors) have a prototype property.
Instances of that function will have their __proto__ set to the prototype of the constructor.
You can add properties and methods to the constructor’s prototype, and they will be shared across all instances.

Example:

function User(name) {
  this.name = name;
}

// Adding a method to the User prototype
User.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

// Creating new user instances
const user1 = new User('John');
const user2 = new User('Jane');

// Both instances inherit the sayHello method from User.prototype
user1.sayHello(); // 'Hello, my name is John'
user2.sayHello(); // 'Hello, my name is Jane'

In this case:

The User function has a prototype property, and any instance created by new User() will have its __proto__ linked to User.prototype.
The sayHello method is defined on User.prototype, so both user1 and user2 can use it without having a separate copy of it.

Key Differences between `proto` and `prototype`:

Aspect	`__proto__`	`prototype`
What it refers to	The prototype of an object instance	The prototype of a constructor function
Where it’s used	On all objects	On functions (constructor functions)
Functionality	Used to access the prototype chain of an object	Used to define methods/properties shared by instances
Access	Can be accessed directly (e.g., `obj.__proto__`)	Used during object creation with `new` keyword

Example Illustrating Both:

// Constructor function
function Animal(name) {
  this.name = name;
}

// Adding a method to the prototype of the constructor
Animal.prototype.makeSound = function() {
  console.log(`${this.name} makes a sound`);
};

// Creating an instance
const dog = new Animal('Rex');

// dog.__proto__ points to Animal.prototype
console.log(dog.__proto__ === Animal.prototype); // true

// dog can access the method from Animal.prototype
dog.makeSound(); // Rex makes a sound

Animal is the constructor function.
Animal.prototype contains the method makeSound.
When dog is created, dog.__proto__ is set to Animal.prototype, allowing dog to inherit the makeSound method.

Conclusion

__proto__ is an internal property of every object that points to its prototype. It's used to look up properties in the prototype chain.
prototype is a property of functions (especially constructor functions) that allows you to add methods and properties that will be inherited by all instances created from the constructor.

By understanding the difference between __proto__ and prototype, you can take full advantage of JavaScript's prototypal inheritance system for efficient object creation and method sharing.

Understanding Object Iteration in JavaScript: `for...of` vs `for...in`

Dharmendra Kumar — Thu, 26 Sep 2024 05:47:15 +0000

Iterating over objects is a common task in JavaScript, but knowing the correct technique for each situation can make your code cleaner and more efficient. This article explains why you can't use for...of directly with objects, offers alternative approaches, and provides best practices for iterating over objects.

Introduction to Iteration in JavaScript
Why for...of Doesn’t Work with Objects
Techniques for Iterating Over Objects
- Using for...in
- Using Object.keys()
- Using Object.values()
- Using Object.entries()
Comparison of Object Iteration Techniques
Comparison Between for...in and for...of
Advanced Example: Iterating Over Nested Objects
Best Practices for Object Iteration in JavaScript

1. Introduction to Iteration in JavaScript

In JavaScript, iterating over data structures is an essential part of handling complex datasets. While arrays and strings are iterable objects, plain objects (key-value pairs) require different methods for iteration. When developers try to use for...of on objects, they often encounter issues.

2. Why `for...of` Doesn’t Work with Objects

The for...of loop is used to iterate over iterable objects like arrays, strings, Maps, and Sets. Plain JavaScript objects, however, are not iterable by default.

Example: Trying `for...of` with an Object

const user = { name: 'John', age: 30 };

for (const value of user) {
  console.log(value);
}
// TypeError: user is not iterable

Attempting to use for...of on a plain object throws a TypeError. This happens because objects in JavaScript do not have a [Symbol.iterator] method, which is required for the for...of loop.

3. Techniques for Iterating Over Objects

To iterate over objects in JavaScript, several techniques are available:

3.1 Using `for...in`

The for...in loop iterates over an object’s enumerable properties. It loops through the keys of the object.

const user = { name: 'John', age: 30 };

for (const key in user) {
  console.log(key, user[key]);
}
// Output: 
// name John
// age 30

Pros: Simple and direct.
Cons: Iterates over inherited properties if they are enumerable, which might cause unexpected behavior.

3.2 Using `Object.keys()`

Object.keys() returns an array of the object’s own property keys, allowing you to use for...of to iterate over them.

const user = { name: 'John', age: 30 };

for (const key of Object.keys(user)) {
  console.log(key, user[key]);
}
// Output: 
// name John
// age 30

Pros: Only iterates over the object’s own properties.
Cons: Only retrieves the keys, not the values.

3.3 Using `Object.values()`

Object.values() returns an array of the object’s property values, which can then be iterated over with for...of.

const user = { name: 'John', age: 30 };

for (const value of Object.values(user)) {
  console.log(value);
}
// Output: 
// John
// 30

Pros: Direct access to values without dealing with keys.
Cons: Cannot access the keys directly.

3.4 Using `Object.entries()`

Object.entries() returns an array of the object’s key-value pairs, which makes it perfect for iterating over both keys and values.

const user = { name: 'John', age: 30 };

for (const [key, value] of Object.entries(user)) {
  console.log(key, value);
}
// Output: 
// name John
// age 30

Pros: Easy access to both keys and values in one iteration.
Cons: Slightly more complex syntax.

4. Comparison of Object Iteration Techniques

Technique	Access to Keys	Access to Values	Inherited Properties	Simplicity
`for...in`	Yes	Yes	Yes (if enumerable)	Simple
`Object.keys()` + `for...of`	Yes	No	No	Moderate
`Object.values()` + `for...of`	No	Yes	No	Moderate
`Object.entries()` + `for...of`	Yes	Yes	No	Slightly complex

5. Comparison Between `for...in` and `for...of`

5.1 `for...in` Loop

The for...in loop is used to iterate over the enumerable properties (keys) of an object, including properties that may be inherited through the prototype chain.

Example: `for...in` with an Object

const user = { name: 'John', age: 30 };

for (const key in user) {
  console.log(key, user[key]);
}
// Output:
// name John
// age 30

Explanation: The for...in loop iterates over the keys (name and age) and allows you to access the corresponding values (John and 30).

Example: `for...in` with an Array (Not Recommended)

const colors = ['red', 'green', 'blue'];

for (const index in colors) {
  console.log(index, colors[index]);
}
// Output:
// 0 red
// 1 green
// 2 blue

Explanation: The for...in loop iterates over the indices (0, 1, 2) of the array, not the values themselves. This behavior is usually less desirable when working with arrays.

5.2 `for...of` Loop

The for...of loop is used to iterate over iterable objects like arrays, strings, maps, sets, and other iterables. It loops over the values of the iterable.

Example: `for...of` with an Array

const colors = ['red', 'green', 'blue'];

for (const color of colors) {
  console.log(color);
}
// Output:
// red
// green
// blue

Explanation: The for...of loop directly iterates over the values of the array (red, green, blue), which is ideal for array iteration.

Example: `for...of` with a String

const name = 'John';

for (const char of name) {
  console.log(char);
}
// Output:
// J
// o
// h
// n

Explanation: The for...of loop iterates over each character of the string (J, o, h, n), making it useful for string manipulation.

Summary: Key Differences Between `for...in` and `for...of`

Feature	`for...in`	`for...of`
Purpose	Iterates over object keys (including inherited properties)	Iterates over iterable values (arrays, strings, etc.)
Works with Objects	Yes	No (objects are not iterable)
Works with Arrays	Yes, but not ideal (returns indices)	Yes, ideal (returns values)
Use Case	Best for iterating over object properties	Best for arrays, strings, maps, sets, etc.

6. Advanced Example: Iterating Over Nested Objects

Sometimes, objects are nested, and you need to iterate through all levels of the object. Here's an example that uses recursion to handle nested objects.

const user = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    zip: 10001
  }
};

// Recursively iterate through the object
function iterate(obj) {
  for (const [key, value] of Object.entries(obj)) {
    if (typeof value === 'object' && !Array.isArray(value)) {
      console.log(`Entering nested object: ${key}`);
      iterate(value); // Recursively call for nested objects
    } else {
      console.log(key, value); // Output key-value pair
    }
  }
}

iterate(user);
// Output: 
// name John
// age 30
// Entering nested object: address
// city New York
// zip 10001

Explanation: The function checks if the value is an object, then recursively iterates through it.

7. Best Practices for Object Iteration in JavaScript

Use the Right Technique for the Right Task

Use for...in cautiously: It may iterate over properties inherited from the prototype chain,

Compare the Old-School Way of Manual Code Management vs. Webpack's Magic: Reduce File Size and Maximize Efficiency! 🧙‍♂️

Dharmendra Kumar — Wed, 25 Sep 2024 07:17:19 +0000

What is Webpack?

Webpack is a module bundler for JavaScript applications.
It bundles JavaScript files and other assets (CSS, images) into a single or multiple files for browsers.

Why Webpack?

Efficient bundling of code and assets.
Modular development: Supports breaking code into smaller, manageable files.
Optimization: Minifies, removes unused code (tree shaking), and enables faster loading.
Development tools: Hot Module Replacement (HMR) for faster development.
Cross-browser compatibility: Transpiles modern JS/CSS for older browsers.

Where to Use Webpack?

Large JavaScript applications with multiple dependencies.
Projects using React, Vue.js, Angular.
Single Page Applications (SPAs) and Progressive Web Apps (PWAs).
Any app needing asset bundling and performance optimization.

Key Features of Webpack:

Code Splitting: Loads parts of the app only when needed.
Tree Shaking: Removes unused code to reduce bundle size.
Loaders: Transforms files (e.g., CSS, images) for bundling.
Plugins: Automates tasks (e.g., HTML generation, code optimization).

🚀 Webpack: Before & After – A Game Changer! ⚡

Discover how Webpack transforms your project!

We’re diving into a side-by-side comparison of a project without Webpack vs. with Webpack. 🛠️ This will show you just how much more efficient your workflow can be with bundling and optimizations!

Webpack Preview Link

🌱 Without Webpack: The Old Way 💾

When you structure a project without Webpack, you manually manage everything – from scripts to modules. Here's how your project setup would look:

🔧 Project Structure

webpack-example-no-webpack/
├── dist/
│   └── index.html  # Main HTML file
├── src/
│   ├── math.js     # Utility functions
│   ├── module.js   # Dynamically loaded
│   └── index.js    # Main entry point
└── .gitignore

⚙️ How the Code Looks Without Webpack

1. Utility Functions (math.js)

This file handles simple math utilities.

// src/math.js
function add(a, b) { return a + b; }   // Addition 
function subtract(a, b) { return a - b; }   // Subtraction
function multiply(a, b) { return a * b; }   // Multiplication
function divide(a, b) { return a / b; }   // Division

// Export as MathUtils to be used globally
export const MathUtils = { add, subtract, multiply, divide };

2. Dynamically Loaded Module (module.js)

This file loads dynamically when needed.

// src/module.js
function greet() {
  console.log('Hello from dynamically loaded module!');
}

// Exposing greet globally
window.GreetModule = { greet };

3. Main Entry Point (index.js)

Manages interactions with the browser and handles dynamic module loading.

// src/index.js
import { MathUtils } from "./math.js";

document.getElementById('load-module').addEventListener('click', function () {
  const script = document.createElement('script');
  script.src = '../src/module.js';  // Load module.js dynamically
  document.body.appendChild(script);

  script.onload = function () {
    GreetModule.greet();  // Trigger greet after loading
  };
});

console.log(`5 + 10 = ${MathUtils.add(5, 10)}`);

⚡ With Webpack: The Modern Approach 💥

Webpack introduces bundling, code-splitting, and tree-shaking to make your code faster and more efficient. Here's what the structure looks like with Webpack:

🔧 Project Structure

webpack-example-with-webpack/
├── dist/
│   ├── index.html        # HTML file with bundled JS auto-included
│   └── main.bundle.js    # Bundled JS
├── src/
│   ├── math.js           # Utility functions (tree-shakable)
│   ├── module.js         # Dynamically loaded module
│   └── index.js          # Main entry point
├── webpack.config.js      # Webpack configuration
└── package.json

⚙️ How the Code Looks With Webpack

1. Utility Functions (math.js)

Functions are the same, but now Webpack will only include what's actually used.

// src/math.js
export function add(a, b) { return a + b; }   // Tree-shakable utilities
export function subtract(a, b) { return a - b; }
export function multiply(a, b) { return a * b; }
export function divide(a, b) { return a / b; }

2. Dynamically Loaded Module (module.js)

Now loaded with Webpack's import() for code splitting.

// src/module.js
export function greet() {
  console.log('Hello from dynamically loaded module!');
}

3. Main Entry Point (index.js)

// src/index.js
import { add, multiply } from './math';  // Only used functions imported

console.log(`5 + 10 = ${add(5, 10)}`);

document.getElementById('load-module').addEventListener('click', () => {
  import('./module').then(module => {
    module.greet();  // Loaded dynamically by Webpack
  });
});

🔧 Webpack Configuration (webpack.config.js)

const path = require('path');

module.exports = {
  mode: 'production',  // Enables optimizations
  entry: './src/index.js',
  output: {
    filename: 'main.bundle.js',  // Bundled file
    chunkFilename: '[name].chunk.js',  // For dynamically imported modules
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    usedExports: true,  // Enables tree shaking
  },
};

🔍 What's the Difference?

🎯 Without Webpack

📝 Manually handle script loading.
🛑 No optimization, tree shaking, or code splitting.
📂 Larger file sizes and unoptimized code.

⚡ With Webpack

🚀 Automatic bundling and minification.
🌲 Tree shaking: Only used code gets included.
⏳ Code splitting: Load parts of the code only when needed.

🌟 Want to Explore This?

Check out the full repository here:

https://github.com/dharam-gfx/webpack-example

If you find this helpful, give the repo a ⭐! 😊

Mastering Scoped CSS in Vue: Deep Selectors, Slotted Content, Global Styles, and More

Dharmendra Kumar — Wed, 18 Sep 2024 11:48:11 +0000

Learn how to effectively style your Vue components using scoped CSS features like deep selectors, slotted selectors, global styles, CSS modules, and dynamic v-bind() in both Vue 2 and Vue 3.

1. Deep Selectors

Vue 2: Options API

<template>
  <div class="parent">
    <div class="child">Styled via Deep Selector</div>
  </div>
</template>

<style scoped>
.parent {
  background-color: lightgrey;
  padding: 20px;
}

/* Deep selector for child elements */
>>> .child {
  color: blue;
}
</style>

Vue 3: Composition API

<template>
  <div class="parent">
    <div class="child">Styled via Deep Selector</div>
  </div>
</template>

<style scoped>
.parent {
  background-color: lightgrey;
  padding: 20px;
}

/* Deep selector with :deep() */
:deep(.child) {
  color: blue;
}
</style>

Explanation:

Vue 2: Use >>> for deep selectors.
Vue 3: Use :deep() to style elements deeply within a component.

2. Slotted Selectors

<template>
  <div>
    <slot>
      <div class="default-slot">This is default slot content</div>
    </slot>
  </div>
</template>

<style scoped>
/* Slotted selector to style content inside slots */
:slotted(div) {
  border: 2px solid red;
}
</style>

Explanation:

Use :slotted() to apply styles to content passed into a slot. This allows the parent component to control how slot content is styled.

3. Global Selectors

<template>
  <div class="global-styled">This text is globally styled</div>
</template>

<style scoped>
/* Global selector for specific classes */
:global(.global-styled) {
  color: purple;
  font-weight: bold;
}
</style>

Explanation:

Use :global() to apply styles globally, ensuring they are accessible across your entire app. This is useful for creating styles that need to be shared between multiple components.

4. Mixing Local and Global Styles

<template>
  <div>
    <p class="local-style">This text is styled locally</p>
    <p class="global-style">This text is styled globally</p>
  </div>
</template>

<style>
/* Global style */
.global-style {
  color: purple;
}
</style>

<style scoped>
/* Local style */
.local-style {
  color: teal;
}
</style>

Explanation:

You can mix both global and scoped styles in a single component by separating the styles into different <style> blocks. This helps manage local and global CSS efficiently.

5. CSS Modules

<template>
  <p :class="$style.red">This should be red</p>
</template>

<style module>
.red {
  color: red;
}
</style>

Explanation:

CSS Modules hash class names to avoid collisions and scope them to the component. Use the module attribute on your <style> tag to enable this feature.

6. Custom Inject Name

<template>
  <p :class="classes.red">This text is red</p>
</template>

<style module="classes">
.red {
  color: red;
}
</style>

Explanation:

You can customize the key of the injected classes object by assigning a name to the module attribute. In this case, classes becomes the key.

7. Dynamic CSS with `v-bind()`

Vue 2: Options API

<template>
  <p>This text is dynamically styled</p>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    };
  }
}
</script>

<style scoped>
p {
  color: v-bind(color);
}
</style>

Vue 3: Composition API

<template>
  <p>This text is dynamically styled</p>
</template>

<script setup>
import { ref } from 'vue';
const color = ref('red');
</script>

<style scoped>
p {
  color: v-bind(color);
}
</style>

Explanation:

With v-bind(), you can dynamically bind CSS values to your component's state. This allows your styles to react to changes in data or props.

Conclusion

These advanced scoped CSS features in Vue.js give you fine-grained control over how styles are applied to your components. Whether you need deep selectors, global styles, or dynamic CSS properties, Vue provides the flexibility to handle it all efficiently in both Vue 2 and Vue 3.

By combining these techniques, you can build more maintainable and powerful applications with scoped and dynamic styling!

Mastering Deep Selectors (>>>) and :deep() in Vue: Styling Child Components from Parent! 🚀

Dharmendra Kumar — Wed, 18 Sep 2024 10:23:23 +0000

When working with scoped CSS in Vue, applying styles from a parent to a child component can be tricky. Vue offers two powerful tools to help with this: the deep selector (>>>) and the :deep() pseudo-class. Both allow you to penetrate scoped CSS boundaries, but which one should you use? Let’s explore both with examples and compare them!

🛠 1. Using the Deep Selector (`>>>`)

As we discussed earlier, the deep selector is a special way to apply styles from a parent component to a child component while keeping the scoped attribute in place.

Example:

<!-- ParentComponent.vue -->
<template>
  <div class="parent-container">
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  }
}
</script>

<style scoped>
/* Scoped styles apply only to the parent */
.parent-container {
  background-color: lightblue;
}

/* Deep selector to apply styles to a child component */
>>> .child-text {
  color: red;
}
</style>

In this example, the deep selector (>>>) allows us to style the .child-text class inside the child component, even though both components have scoped styles.

🛠 2. Using the `:deep()` Pseudo-Class

Vue 3 introduced a new and more semantic way of applying deep styles using the :deep() pseudo-class. This is the recommended way moving forward.

Example:

<!-- ParentComponent.vue -->
<template>
  <div class="parent-container">
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  }
}
</script>

<style scoped>
/* Scoped styles apply only to the parent */
.parent-container {
  background-color: lightblue;
}

/* :deep() to apply styles to a child component */
:deep(.child-text) {
  color: red;
}
</style>

With :deep(), you get the same result as using >>>, but the syntax is more future-proof and aligns with modern CSS practices.

🔍 Which Is Better: `>>>` or `:deep()`?

Vue 3 Compatibility:

In Vue 3, the :deep() pseudo-class is the preferred method and will likely become the standard. It’s more semantic and readable than the >>> operator, which may feel a bit hacky.
Vue 2 Compatibility:

If you’re using Vue 2, you’ll need to stick with >>>, as :deep() is not supported in Vue 2 by default. However, with Vue-loader updates, :deep() can also be used in Vue 2 if configured properly.

💡 Recommendation

If you're working in Vue 3, it's best to use :deep() as it’s more readable, modern, and future-compatible.
If you're using Vue 2, the deep selector (>>>) is a reliable option. However, if your project will upgrade to Vue 3, start using :deep() to future-proof your styles.

🔧 Bonus: Combining `:deep()` with Inline Styles

You can also use :deep() for inline styles if necessary:

<style scoped>
/* :deep() with dynamic style binding */
:deep(.child-text) {
  font-size: 20px;
  color: v-bind('textColor'); /* Example of using Vue dynamic styling */
}
</style>

This ensures the child component gets the style, even when you bind data to the CSS dynamically!

🎯 Conclusion

Both >>> and :deep() selectors allow you to control the styles of child components while maintaining scoped styles. If you're using Vue 3, it's better to adopt the :deep() pseudo-class for a more modern, clean, and future-proof approach. However, >>> remains effective and reliable, especially in older Vue 2 projects.

Happy styling! 🎨

Rename Multiple Files in Sequence with Just One Click Using PowerShell in Windows! 🚀

Dharmendra Kumar — Wed, 18 Sep 2024 07:41:14 +0000

Renaming files manually can be exhausting, but with PowerShell, you can batch rename multiple files in just one click on Windows! In this post, we’ll walk you through a simple yet effective PowerShell script to rename files in sequence or based on specific conditions. Let’s break down the script and customize it for various use cases.

The Script:

Get-ChildItem *.png | ForEach-Object {
    $newName = $_.BaseName.TrimStart('0') + $_.Extension
    Rename-Item $_.FullName -NewName $newName
}

🔍 Line-by-Line Breakdown:

**1. `Get-ChildItem *.png`**

What it does: Retrieves all .png files in the current directory for processing.

Example:

Get-ChildItem *.jpg  # To fetch all JPEG files

2. `| ForEach-Object { ... }`

What it does: Loops through each file and applies the actions inside the curly braces { ... }.

Example:

Get-ChildItem *.txt | ForEach-Object { 
    Write-Host $_.Name 
}

3. `$_.BaseName.TrimStart('0') + $_.Extension`

What it does: Removes leading zeroes from the file name while keeping the file extension intact.

Example:

$newName = $_.BaseName.TrimStart('A') + $_.Extension  # Removes leading 'A' characters

4. `Rename-Item $_.FullName -NewName $newName`

What it does: Renames the file using its new name generated in the previous step.

Example:

Rename-Item $_.FullName -NewName "newFile_" + $_.Name  # Add 'newFile_' prefix

🎯 Different Scenarios and Examples

1. Renaming Files by Adding a Suffix

   Get-ChildItem *.txt | ForEach-Object {
       $newName = $_.BaseName + '_backup' + $_.Extension
       Rename-Item $_.FullName -NewName $newName
   }

This script renames file.txt to file_backup.txt.

2. Changing File Extensions

   Get-ChildItem *.png | ForEach-Object {
       $newName = $_.BaseName + '.jpg'
       Rename-Item $_.FullName -NewName $newName
   }

This renames image1.png to image1.jpg.

3. Adding Sequential Numbers to Files

   $counter = 1
   Get-ChildItem *.png | ForEach-Object {
       $newName = "image$counter" + $_.Extension
       Rename-Item $_.FullName -NewName $newName
       $counter++
   }

This renames files sequentially like image1.png, image2.png, etc.

💡 Conclusion

Using PowerShell in Windows, you can easily rename multiple files in sequence with just one click! Whether you’re stripping zeroes, adding suffixes, or changing file extensions, this script is a flexible and powerful tool to streamline your file renaming tasks.

Happy scripting! ⚡

Forem: Dharmendra Kumar

Tense Playground: Master English Grammar with AI & Interactive Games

The Problem

The Solution

🔥 Streak System

🌐 Multi-language Support

Try Live

💡 What I Learned Building This

🚀 Writing cleaner, scalable JavaScript starts with small habits.

📘 JavaScript Best Practice: Use Object Parameters Instead of Long Positional Arguments

❌ DON’T DO THIS — Positional Parameters

Bad Example

Problems

✅ DO THIS — Use a Single Object Parameter

Good Example

Benefits

💡 Real-World Production Examples

✔ Example 1: API Request Handler

❌ Old (positional hell)

✅ New (object parameters)

✔ Example 2: Vue/React Component Utils

❌ Anti-pattern

✅ Clean pattern

✔ Example 3: Logging in Production

❌ Wrong

✅ Right

✔ Example 4: Utility Function

❌ Bad

✅ Good

💼 Production-Ready Template (Reusable)

🔐 NookChat – A One-Time Encrypted, Anonymous Chat App (No Login Required)

🚀 What is NookChat?

🌟 Like It? Show Some Love!

✨ Key Features

🛠️ Tech Stack

📸 Sneak Peek

💡 Why I Built This

📂 Explore the Code

🙌 Support & Feedback

✅ Image Quality: AVIF vs WebP vs JPEG/PNG

✅ Image Quality: AVIF vs WebP vs JPEG/PNG

🔥 AVIF Quality

Code Example: AVIF Image in HTML

⚡ WebP Quality

Code Example: WebP Image in HTML

📷 JPEG/PNG Quality

Code Example: JPEG Image in HTML

Code Example: PNG Image in HTML

✅ Visual Example of Quality Difference

✅ Quick Summary

✅ Additional Benefits of Modern Image Formats

🚀 Better Compression

⚡ Faster Loading Times

🖼️ Support for Transparency and Animation

🌈 Enhanced Image Quality

📊 SEO & Performance Optimization

🎨 Use Cases

✅ Browser Support for AVIF and WebP

Browsers Supporting AVIF:

Browsers Not Supporting AVIF:

Browsers Supporting WebP:

Browsers Not Supporting WebP:

✅ When Quality Matters

Upcoming JavaScript Features: Simplifying Array Combinations with `Array.zip` and `Array.zipKeyed`

Introduction

1. The Problem: Combining Arrays in JavaScript

Current Challenges

2. The Solution: Introducing Array.zip and Array.zipKeyed

What Are These Methods?

3. Syntax and Examples

Array.zip

Syntax:

Parameters:

Example:

Array.zipKeyed

Syntax:

Parameters:

Example:

4. Use Cases

Data Merging

2. The Solution: Introducing `Array.zip` and `Array.zipKeyed`

`Array.zip`

`Array.zipKeyed`

Key Mismatch in `Array.zipKeyed`

Mastering JavaScript Objects: Methods, Properties, Prototypes, and proto in Real-Time User Management System

1. `Object.assign()`: Merging User Data

2. `Object.create()`: User Role Prototyping

3. `Object.defineProperty()`: Setting Read-Only Properties

Example with `enumerable: true`

Example with `enumerable: false`

4. `Object.defineProperties()`: Setting Multiple Properties

5. `Object.entries()`: Iterating Through User Data

6. `Object.freeze()`: Freezing User Profiles

7. `Object.fromEntries()`: Transforming Form Data into an Object

8. `groupBy()` (Custom Implementation): Group Users by Role

9. `Object.hasOwn()`: Checking User-Specific Properties

10. `Object.is()`: Strict Equality for Profile Comparison

11. `Object.keys()` and `Object.values()`: Displaying User Data

12. `Object.hasOwnProperty()`: Custom Property Check

1. `Object.assign()` vs `Object.create()`

2. `Object.defineProperty()` vs `Object.defineProperties()`

3. `Object.entries()` vs `Object.keys()` vs `Object.values()`

4. `Object.freeze()` vs `Object.seal()`

5. `Object.hasOwnProperty()` vs `Object.hasOwn()`

6. `Object.is()` vs `===`

7. `Object.fromEntries()` vs `Object.entries()`

8. `Object.keys()` vs `Object.getOwnPropertyNames()`

1. `proto` (Dunder Proto or Double Underscore Proto)

2. `prototype`

Key Differences between `proto` and `prototype`:

2. Why `for...of` Doesn’t Work with Objects

Example: Trying `for...of` with an Object

3.1 Using `for...in`

3.2 Using `Object.keys()`

3.3 Using `Object.values()`

3.4 Using `Object.entries()`

5. Comparison Between `for...in` and `for...of`

5.1 `for...in` Loop

Example: `for...in` with an Object

Example: `for...in` with an Array (Not Recommended)