Web Development - HTML, CSS & JavaScript
55.7K subscribers
1.89K photos
5 videos
34 files
505 links
Learn to code and become a Web Developer with HTML, CSS, JavaScript , Reactjs, Wordpress, PHP, Mern & Nodejs knowledge

Managed by: @love_data
Download Telegram
πŸš€ JavaScript Interview Questions with Answers β€” Part 10

91. What is throttling?

Throttling limits how frequently a function can execute within a given time interval.

Even if an event fires many times, the function is allowed to execute at most once during each interval.

Example:

function throttle(callback, delay) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastTime >= delay) {
lastTime = now;
callback.apply(this, args);
}
};
}


Common Uses:

β€’ Scroll events

β€’ Mouse movement

β€’ Window resizing

β€’ Continuous user interactions

Debounce vs Throttle:

Debounce β†’ Execute after activity stops

Throttle β†’ Execute at controlled intervals

92. What is memoization?

Memoization is an optimization technique where the result of a function is cached so that the same calculation doesn't have to be performed again.

Example:

function memoize(fn) {
const cache = new Map();
return function(n) {
if (cache.has(n)) {
return cache.get(n);
}
const result = fn(n);
cache.set(n, result);
return result;
};
}


Example Usage:

function square(n) {
console.log("Calculating...");
return n * n;
}

const memoizedSquare = memoize(square);

console.log(memoizedSquare(5));
console.log(memoizedSquare(5));


The first call performs the calculation.

The second call can use the cached result.

Benefits:

βœ… Faster repeated calculations

βœ… Avoids unnecessary work

Drawback:

❌ Uses additional memory for cached results.

93. What is currying?

Currying transforms a function that takes multiple arguments into a sequence of functions that each take one argument.

Normal Function:

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

console.log(add(1, 2, 3));


Curried Function:

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


Usage:

console.log(add(1)(2)(3));


Output:

6


Arrow Function Version:

const add = a => b => c => a + b + c;


Common Uses:

β€’ Functional programming

β€’ Creating reusable functions

β€’ Partial application

β€’ Configuration-based functions

94. What is prototype inheritance?

JavaScript uses objects as the foundation of its inheritance system.

Objects can access properties and methods through their prototype chain.

Example:

const animal = {
speak() {
console.log("Animal speaks");
}
};

const dog = Object.create(animal);

dog.speak();


Although dog doesn't directly contain speak(), it can access the method through its prototype.

Prototype Chain:

dog

↓

animal

↓

Object.prototype

↓

null

JavaScript searches this chain when a property isn't found directly on the object.

95. What is prototypal inheritance?

Prototypal inheritance is JavaScript's mechanism for allowing one object to inherit behavior from another object through the prototype chain.

Example:

const person = {
greet() {
console.log("Hello");
}
};

const student = Object.create(person);

student.study = function() {
console.log("Studying");
};

student.greet();
student.study();


Here:

student has its own study() method.

greet() comes from its prototype, person.

96. What are classes in JavaScript?

Classes provide a cleaner syntax for creating objects and implementing object-oriented programming patterns.

Classes were introduced in ES6.

Example:
❀2
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}

greet() {
console.log(`Hello, I am ${this.name}`);
}
}

const person = new Person("Deepak", 25);

person.greet();


Output:

Hello, I am Deepak

Important:

JavaScript classes are built on top of JavaScript's prototype-based inheritance.

Classes Support:

β€’ Constructors

β€’ Methods

β€’ Inheritance

β€’ Getters and setters

β€’ Static methods

β€’ Private fields

97. What is garbage collection?

Garbage collection is the automatic process of identifying and reclaiming memory that is no longer reachable or needed by a JavaScript program.

Developers don't normally manually free JavaScript objects.

Example:

let user = {
name: "Deepak"
};

user = null;


If the original object is no longer reachable from the program, it can eventually become eligible for garbage collection.

Important:

Garbage collection timing is determined by the JavaScript engine. You cannot normally force it from standard JavaScript code.

98. How does JavaScript manage memory?

JavaScript automatically manages memory using mechanisms such as:

1. Memory allocation

2. Program execution

3. Garbage collection

Simplified Process:

Create value

↓

Memory allocated

↓

Program uses value

↓

Value becomes unreachable

↓

Garbage collector

↓

Memory can be reclaimed

What is a Memory Leak?

A memory leak occurs when a program unintentionally keeps references to objects that it no longer needs.

Common Causes:

β€’ Unremoved event listeners

β€’ Unnecessary global variables

β€’ Timers that aren't cleared

β€’ Large objects retained in closures

β€’ Growing caches without limits

Example:

const cache = [];

function addData(data) {
cache.push(data);
}


If cache keeps growing indefinitely, it can consume increasing amounts of memory.

99. What are CommonJS and ES Modules?

Both are module systems used in JavaScript applications.

CommonJS

Commonly associated with Node.js and uses require() and module.exports.

// math.js
function add(a, b) {
return a + b;
}

module.exports = { add };


Import:

const { add } = require("./math");


ES Modules

The standardized JavaScript module system uses import and export.

// math.js
export function add(a, b) {
return a + b;
}


Import:

import { add } from "./math.js";


Modern JavaScript development commonly uses ES Modules, while CommonJS remains important when working with existing Node.js projects.

100. What are the latest JavaScript features introduced in ES2025 and beyond?

JavaScript continues to evolve through yearly ECMAScript releases.

For ES2025 (ECMAScript 2025), notable standardized additions include:

πŸ”₯ Iterator Helpers

Methods such as:

iterator.map(...)

iterator.filter(...)

iterator.take(...)

allow lazy processing of iterator values.

πŸ”₯ Iterator.from()

Allows an object to be converted into an iterator.

const iterator = Iterator.from([1, 2, 3]);


πŸ”₯ Set Methods

Modern Set operations include methods such as:

β€’ union()

β€’ intersection()

β€’ difference()

β€’ symmetricDifference()

Example:

const a = new Set([1, 2, 3]);
const b = new Set([3, 4, 5]);

const result = a.union(b);

console.log(result);
❀2
πŸ”₯ Regular Expression Improvements

ES2025 also introduced improvements to regular expressions, including support for enhanced Unicode-related matching capabilities.

πŸ”₯ Promise.try()

Promise.try() provides a convenient way to turn a synchronous function call into a Promise-based operation.

Promise.try(() => {
return someFunction();
});


⚠️ Important Interview Point

JavaScript features are standardized through the ECMAScript specification, and browser/Node.js support can vary by feature and version.

So when discussing "latest JavaScript," distinguish between:

Standardized features

β†’ Officially included in an ECMAScript release.

Proposed features

β†’ Still moving through the TC39 proposal process.

Runtime support

β†’ Whether a particular browser or Node.js version actually supports the feature.

Double Tap ❀️ For More
❀2
Free Resources to Learn Each Tech Stack 🧠✨

No excuses. Everything you need is free!

1. Frontend Development
❯ freeCodeCamp.org – HTML, CSS, JS
❯ MDN Web Docs – Best docs for web tech
❯ Frontend Mentor – Real-world challenges
❯ CSS Tricks – CSS deep dives
❯ YouTube: Kevin Powell, Web Dev Simplified

β€”

2. Backend Development
❯ Node.js Docs
❯ Django Girls Tutorial
❯ The Odin Project – Full Stack
❯ Spring Boot Guides
❯ YouTube: Amigoscode, CodeWithHarry (Hindi), Tech With Tim

β€”

3. Full-Stack Development
❯ Full Stack Open – React + Node
❯ The Odin Project
❯ CS50 Web – Harvard’s free course
❯ YouTube: Traversy Media, Clever Programmer, JavaScript Mastery

β€”

4. Data Analytics
❯ Kaggle Learn – Python, SQL, Viz
❯ Maven Analytics – Free Power BI/Tableau projects
❯ Google Data Analytics Course
❯ W3Schools SQL
❯ YouTube: Luke Barousse, Alex The Analyst

β€”

5. Machine Learning
❯ Google’s ML Crash Course
❯ fast.ai – Deep learning made easy
❯ Kaggle Courses – End-to-end ML
❯ Coursera – Andrew Ng
❯ YouTube: StatQuest, Krish Naik, Codebasics

β€”

6. DevOps
❯ KodeKloud – Docker, K8s, Ansible
❯ Learn Git Branching
❯ Katacoda – Interactive Linux & DevOps
❯ Roadmap.sh – What to learn
❯ YouTube: TechWorld with Nana, Nana Janashia
❀8
πŸš€ JavaScript Tips β€” Part 2

1️⃣ Use strict mode when appropriate

Strict mode helps catch certain common mistakes and prevents some unsafe behaviors.

"use strict";


2️⃣ Use optional chaining for uncertain data

When working with API responses or nested objects, optional chaining can prevent errors when a property doesn't exist.

const user = {};
console.log(user.address?.city);


3️⃣ Understand || vs ??

They behave differently when dealing with falsy values.

const count = 0;
console.log(count || 10); // 10

console.log(count ?? 10); // 0


Use ?? when 0, false, or an empty string are valid values.

4️⃣ Don't overuse ternary operators

Ternary operators are great for simple conditions.

const age = 20;
const status = age >= 18 ? "Adult" : "Minor";


For complicated logic, a normal if...else is usually easier to read.

5️⃣ Use destructuring when it improves readability

Destructuring can make working with objects and arrays cleaner.

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


6️⃣ Understand spread vs rest

The same ... syntax has two different purposes.

Spread β†’ expands values

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


Rest β†’ collects values

function sum(...numbers) {
return numbers.length;
}


7️⃣ Don't rely on implicit type coercion

JavaScript can automatically convert types, sometimes producing surprising results.

console.log("10" + 5); // "105"
console.log("10" - 5); // 5


Be explicit when conversion matters.

8️⃣ Handle asynchronous errors properly

Don't assume every API request or asynchronous operation will succeed.

async function getData() {
try {
const response = await fetch("/api/data");
const data = await response.json();
return data;
} catch (error) {
console.error("Request failed:", error);
}
}


9️⃣ Don't block the main thread

Heavy calculations or large amounts of synchronous work can make a web application unresponsive.

For expensive tasks, consider:

β€’ Breaking work into smaller tasks

β€’ Web Workers

β€’ Efficient algorithms

β€’ Avoiding unnecessary rendering

πŸ”Ÿ Use debounce and throttle appropriately

These techniques are useful when an event fires repeatedly.

Debounce β†’ Run after activity stops.

Throttle β†’ Limit execution to a controlled frequency.

Common use cases: Search inputs, Scrolling, Resizing, Mouse movement

1️⃣1️⃣ Use const objects carefully

const prevents reassignment of the variable, but it doesn't make the object immutable.

const user = {
name: "Alex"
};
user.name = "Sam"; // Allowed


Understanding this distinction is important.

1️⃣2️⃣ Don't blindly use JSON.parse() and JSON.stringify()

They are useful for JSON data, but they aren't universal deep-copy solutions. They can lose or alter certain JavaScript values and don't preserve all object types.

For structured cloning, consider structuredClone() when appropriate.

1️⃣3️⃣ Use === consistently

Strict equality makes your comparisons easier to reason about.

if (status === "active") {
console.log("User is active");
}
❀6πŸ‘1
1️⃣4️⃣ Learn the event loop

Understanding the event loop helps you predict the execution order of: Synchronous code, Promise callbacks, Timers, Events

This is especially important for JavaScript interviews.

1️⃣5️⃣ Practice reading error messages

Don't immediately search for a solution when your code fails.

First understand: What error occurred β†’ Where did it occur β†’ Why did it occur β†’ How can it be fixed?

πŸ”₯ Golden Tip: The faster you become at understanding your own errors, the faster you'll become at solving JavaScript problems.

Double Tap ❀️ For More Useful Tips
❀5
πŸš€ 20 Backend Project Ideas πŸ”₯πŸ‘¨πŸ»β€πŸ’»

πŸ”ΉREST API for a Blog
πŸ”ΉUser Authentication System
πŸ”ΉURL Shortener
πŸ”ΉE-commerce Backend
πŸ”ΉOnline Banking API
πŸ”ΉTask Management API
πŸ”ΉReal-time Chat Backend
πŸ”ΉFile Upload & Storage API
πŸ”ΉExpense Tracker API
πŸ”ΉMovie Database API
πŸ”ΉFood Delivery Backend
πŸ”ΉJob Portal Backend
πŸ”ΉOnline Bookstore API
πŸ”ΉInventory Management System
πŸ”ΉPayment Gateway Integration
πŸ”ΉNotification Service
πŸ”ΉSocial Media Backend
πŸ”ΉHospital Management System
πŸ”ΉEvent Booking API
πŸ”ΉLearning Management System

❀️ React to this message for more coding & project ideas!
❀13πŸŽ„1
πŸ–₯ VS Code Themes You Should Try
❀8
If you want to Excel at Web Development and build stunning websites, master these essential skills:

Frontend:
β€’ HTML, CSS, JavaScript – Core web technologies
β€’ Flexbox & Grid – Master modern CSS layouts
β€’ Responsive Design – Make websites mobile-friendly
β€’ JavaScript ES6+ – Arrow functions, Promises, Async/Await
β€’ React, Vue, or Angular – Modern frontend frameworks
β€’ APIs & Fetch/Axios – Connect frontend with backend
β€’ State Management – Redux, Vuex, or Context API

Backend:
β€’ Node.js & Express.js – Build powerful server-side applications
β€’ Databases – MySQL, PostgreSQL, MongoDB (NoSQL)
β€’ RESTful APIs & GraphQL – Handle data efficiently
β€’ Authentication – JWT, OAuth, and session management
β€’ WebSockets – Real-time applications

DevOps & Deployment:
β€’ Version Control – Git & GitHub
β€’ CI/CD Pipelines – Automate deployments
β€’ Cloud Hosting – AWS, Firebase, Vercel, Netlify
β€’ Docker & Kubernetes – Scalable applications

Like it if you need a complete tutorial on all these topics! πŸ‘β€οΈ
❀22
πŸš€ Complete JavaScript Roadmap β€” 2026

🟒 PHASE 1 β€” Programming Foundations

Before going deep into JavaScript, understand:

1. What programming is

2. How JavaScript works

3. Variables and values

4. Data types

5. Operators

6. Expressions and statements

7. Comments

8. Input/output basics

9. Errors and debugging

10. How code executes

🟒 PHASE 2 β€” JavaScript Fundamentals

1. Variables

β€’ let

β€’ const

β€’ var

β€’ Declaration vs initialization

β€’ Scope

β€’ Naming conventions

1. Data Types

β€’ String

β€’ Number

β€’ BigInt

β€’ Boolean

β€’ Undefined

β€’ Null

β€’ Symbol

β€’ Object

Understand:

β€’ Primitive vs reference values

β€’ typeof

β€’ Type coercion

β€’ Truthy and falsy values

1. Operators

β€’ Arithmetic

β€’ Assignment

β€’ Comparison

β€’ Logical

β€’ Unary

β€’ Ternary

β€’ Nullish coalescing

β€’ Optional chaining

1. Control Flow

β€’ if

β€’ else

β€’ else if

β€’ switch

β€’ for

β€’ while

β€’ do...while

β€’ break

β€’ continue

🟒 PHASE 3 β€” Functions

Master functions thoroughly.

β€’ Function declarations

β€’ Function expressions

β€’ Arrow functions

β€’ Parameters

β€’ Arguments

β€’ Default parameters

β€’ Rest parameters

β€’ Return values

β€’ Higher-order functions

β€’ Callback functions

β€’ Pure functions

β€’ Function scope

β€’ Nested functions

β€’ Immediately Invoked Function Expressions

Then learn:

β€’ ⭐ Closures

Understand:

β€’ Lexical scope

β€’ Closure creation

β€’ Practical uses

β€’ Private state

β€’ Closures in callbacks

🟒 PHASE 4 β€” Arrays & Objects

Arrays

Learn:

β€’ Creating arrays

β€’ Accessing elements

β€’ Updating elements

β€’ Array length

β€’ Adding/removing elements

β€’ Iteration

β€’ Destructuring

Essential methods:

β€’ map()

β€’ filter()

β€’ reduce()

β€’ forEach()

β€’ find()

β€’ findIndex()

β€’ some()

β€’ every()

β€’ includes()

β€’ sort()

β€’ slice()

β€’ splice()

β€’ concat()

β€’ flat()

β€’ flatMap()

Objects

Learn:

β€’ Object creation

β€’ Properties

β€’ Methods

β€’ Nested objects

β€’ Computed properties

β€’ Property shorthand

β€’ Object destructuring

β€’ Spread syntax

β€’ Rest syntax

Important methods:

β€’ Object.keys()

β€’ Object.values()

β€’ Object.entries()

β€’ Object.assign()

β€’ Object.hasOwn()

🟑 PHASE 5 β€” Modern JavaScript / ES6+

Become comfortable with modern syntax.

β€’ let / const

β€’ Arrow functions

β€’ Template literals

β€’ Destructuring

β€’ Spread/rest

β€’ Default parameters

β€’ Enhanced object literals

β€’ Classes

β€’ Modules

β€’ Promises

β€’ async/await

β€’ Optional chaining

β€’ Nullish coalescing

β€’ Iterators

β€’ Generators

β€’ Symbols

Also understand what changed from older JavaScript and why modern patterns are preferred.

🟑 PHASE 6 β€” DOM & Browser JavaScript

Now move from language fundamentals to web development.

DOM

Learn:

β€’ DOM structure

β€’ Selecting elements

β€’ Creating elements

β€’ Modifying elements

β€’ Removing elements

β€’ Attributes

β€’ Classes

β€’ Styles

β€’ Text/content

β€’ Forms

Events

Master:

β€’ Event listeners

β€’ Event objects

β€’ Event propagation

β€’ Bubbling

β€’ Capturing

β€’ Event delegation

β€’ Preventing default behavior

Browser APIs

Learn:

β€’ localStorage

β€’ sessionStorage

β€’ Cookies

β€’ URL API

β€’ History API

β€’ Clipboard API

β€’ Timers

β€’ Web Storage

β€’ Geolocation basics

🟑 PHASE 7 β€” Asynchronous JavaScript

This is one of the most important JavaScript topics.

Understand:

β€’ Synchronous vs asynchronous execution

Then learn:
❀3
β€’ Callbacks

β€’ Callback problems

β€’ Promises

β€’ Promise states

β€’ .then()

β€’ .catch()

β€’ .finally()

β€’ Promise chaining

β€’ Promise.all()

β€’ Promise.allSettled()

β€’ Promise.race()

β€’ Promise.any()

β€’ async

β€’ await

β€’ Error handling

⭐ Event Loop

Understand:

β€’ Call stack

β€’ Web APIs

β€’ Task queue

β€’ Microtask queue

β€’ Event loop

β€’ Macrotasks vs microtasks

You should be able to explain why asynchronous JavaScript behaves the way it does, not simply use async/await.

🟑 PHASE 8 β€” APIs & Network Requests

Learn how JavaScript communicates with servers.

β€’ HTTP basics

β€’ Request/response

β€’ HTTP methods

β€’ Status codes

β€’ Headers

β€’ JSON

β€’ REST APIs

β€’ fetch()

β€’ GET

β€’ POST

β€’ PUT

β€’ PATCH

β€’ DELETE

β€’ Request bodies

β€’ Error handling

β€’ Authentication basics

Build projects using public APIs.

🟠 PHASE 9 β€” Advanced JavaScript

Now go deeper into the language.

Execution & Scope

β€’ Execution contexts

β€’ Lexical environment

β€’ Scope chain

β€’ Hoisting

β€’ Temporal Dead Zone

β€’ Closures

this

Understand:

β€’ Global context

β€’ Object methods

β€’ Regular functions

β€’ Arrow functions

β€’ Constructor functions

β€’ call()

β€’ apply()

β€’ bind()

Prototypes

Learn:

β€’ Prototype chain

β€’ prototype

β€’ proto

β€’ Constructor functions

β€’ Prototype inheritance

β€’ Classes vs prototypes

Advanced Objects

β€’ Property descriptors

β€’ Getters/setters

β€’ Object.freeze()

β€’ Object.seal()

β€’ Proxies

β€’ Reflect

πŸ”΄ PHASE 10 β€” Object-Oriented JavaScript

Learn:

β€’ Objects

β€’ Constructor functions

β€’ Classes

β€’ Constructors

β€’ Instance methods

β€’ Static methods

β€’ Inheritance

β€’ Encapsulation

β€’ Polymorphism

β€’ Private class fields

β€’ Getters/setters

Also understand composition vs inheritance.

πŸ”΄ PHASE 11 β€” Functional JavaScript

Learn:

β€’ First-class functions

β€’ Higher-order functions

β€’ Pure functions

β€’ Immutability

β€’ Function composition

β€’ Currying

β€’ Closures

β€’ Recursion

β€’ Declarative programming

β€’ Side effects

You don't need to become a functional-programming specialist, but these concepts make modern JavaScript much easier to understand.

πŸ”΄ PHASE 12 β€” Modules & JavaScript Runtime

Master:

β€’ ES modules

β€’ import

β€’ export

β€’ Default exports

β€’ Named exports

β€’ Dynamic imports

β€’ Module organization

Then understand:

β€’ Browser runtime vs server runtime

Learn the fundamentals of:

β€’ Browser JavaScript

β€’ Node.js

β€’ npm

β€’ Package management

β€’ Environment variables

β€’ Runtime APIs

πŸ”΄ PHASE 13 β€” Node.js

Once core JavaScript is strong, learn backend JavaScript.

Node fundamentals

β€’ Node runtime

β€’ npm

β€’ package.json

β€’ Modules

β€’ File system

β€’ Paths

β€’ Environment variables

β€’ Events

β€’ Streams

β€’ Buffers

β€’ HTTP server

β€’ Error handling

Backend development

Learn a modern Node.js framework such as:

β€’ Express

β€’ Fastify

β€’ NestJS

You don't need all three initially.

πŸ”΄ PHASE 14 β€” Databases

For full-stack JavaScript, learn:

SQL

β€’ Tables

β€’ Relationships

β€’ CRUD

β€’ Joins

β€’ Indexes

β€’ Transactions

β€’ Constraints

NoSQL

Understand concepts such as:

β€’ Documents

β€’ Collections

β€’ Queries

β€’ Indexes

You don't need to master every database.

A practical combination is:

JavaScript + Node.js + PostgreSQL

πŸ”΄ PHASE 15 β€” Frontend Framework

Only after becoming comfortable with JavaScript should you move into a framework.

React

Learn:
πŸ‘Ž1
β€’ Components

β€’ JSX

β€’ Props

β€’ State

β€’ Events

β€’ Conditional rendering

β€’ Lists

β€’ Forms

β€’ Hooks

β€’ useState

β€’ useEffect

β€’ useRef

β€’ Context

β€’ Custom hooks

β€’ Component architecture

Then progress toward:

β€’ Routing

β€’ Data fetching

β€’ State management

β€’ Performance

β€’ Server-side rendering concepts

For modern React applications, learn Next.js after React fundamentals.

🟣 PHASE 16 β€” TypeScript

In 2026, TypeScript is an important addition to a JavaScript developer's toolkit.

Learn:

β€’ Type annotations

β€’ Primitive types

β€’ Arrays

β€’ Objects

β€’ Functions

β€’ Interfaces

β€’ Type aliases

β€’ Union types

β€’ Intersection types

β€’ Generics

β€’ Enums

β€’ Type narrowing

β€’ Utility types

β€’ unknown

β€’ never

β€’ Type inference

β€’ Modules

β€’ Type-safe APIs

Don't use TypeScript as a substitute for learning JavaScript fundamentals.

🟣 PHASE 17 β€” Testing

Learn:

β€’ Unit testing

β€’ Test structure

β€’ Assertions

β€’ Mocking

β€’ Test isolation

Tools:

β€’ Vitest

β€’ Jest

Browser testing

Learn tools such as:

β€’ Playwright

β€’ Cypress

Understand:

β€’ Unit tests

β€’ Integration tests

β€’ End-to-end tests

🟣 PHASE 18 β€” Tooling

Become comfortable with the modern JavaScript ecosystem.

Package management

β€’ npm

β€’ package.json

β€’ package-lock.json

β€’ Semantic versioning

Also understand alternatives such as:

β€’ pnpm

β€’ Yarn

Build tooling

Understand the purpose of:

β€’ Vite

β€’ Bundlers

β€’ Transpilation

β€’ Minification

β€’ Code splitting

β€’ Tree shaking

You don't need to memorize every configuration option.

🟣 PHASE 19 β€” Code Quality

Learn professional development practices.

β€’ ESLint

β€’ Prettier

β€’ Naming conventions

β€’ Project structure

β€’ Error handling

β€’ Logging

β€’ Environment configuration

β€’ Git

β€’ GitHub

β€’ Code reviews

β€’ Documentation

β€’ Clean code

β€’ Refactoring

🟣 PHASE 20 β€” Security

JavaScript developers should understand:

β€’ XSS

β€’ CSRF

β€’ CORS

β€’ SQL injection

β€’ Authentication

β€’ Authorization

β€’ Password hashing

β€’ JWT

β€’ Sessions

β€’ Secure cookies

β€’ Input validation

β€’ Dependency vulnerabilities

β€’ Secrets management

🟣 PHASE 21 β€” Performance

Learn how to make JavaScript applications faster.

Browser performance

β€’ Rendering

β€’ Reflow

β€’ Repaint

β€’ DOM performance

β€’ Lazy loading

β€’ Code splitting

β€’ Caching

β€’ Debouncing

β€’ Throttling

JavaScript performance

β€’ Memory usage

β€’ Garbage collection

β€’ Memory leaks

β€’ Profiling

β€’ Expensive operations

β€’ Big-O basics

🟣 PHASE 22 β€” Advanced Web APIs

Eventually explore:

β€’ Web Workers

β€’ Service Workers

β€’ WebSockets

β€’ Server-Sent Events

β€’ IndexedDB

β€’ Web Components

β€’ Streams

β€’ Notifications

β€’ WebRTC basics

These are advanced/specialized topics, so don't let them distract you from core JavaScript.

πŸ€– PHASE 23 β€” JavaScript + AI in 2026

Modern JavaScript developers should also understand how applications integrate AI.

Learn:

β€’ Calling AI APIs

β€’ Streaming responses

β€’ Structured outputs

β€’ Tool/function calling concepts

β€’ Embeddings basics

β€’ Vector databases

β€’ RAG fundamentals

β€’ Authentication and API-key security

β€’ Building AI-powered web applications

The goal isn't to become an AI researcher.

It's to know how to build useful AI features into JavaScript applications.

🧠 PHASE 24 β€” Problem Solving & DSA

Learn enough DSA to become a strong programmer and prepare for interviews.

Data structures