Forem: Kiran

JavaScript Design Patterns

Kiran — Fri, 17 Apr 2026 12:40:19 +0000

Design patterns are reusable solutions to commonly occurring problems in software design. They fall into 3 categories:

🏗️ Creational Patterns
How objects are created

Singleton Ensures only one instance of a class exists throughout the app.

javascriptclass Database {
  constructor() {
    if (Database.instance) return Database.instance;
    Database.instance = this;
  }
}

const db1 = new Database();
const db2 = new Database();
console.log(db1 === db2); // true

Use when: Managing a shared resource like a DB connection or config object.

Factory A function/class that creates objects without specifying the exact class.

javascriptfunction createUser(role) {
  if (role === "admin") return { role, permissions: ["read", "write", "delete"] };
  if (role === "guest") return { role, permissions: ["read"] };
}

const admin = createUser("admin");
const guest = createUser("guest");

Use when: You need to create different object types based on a condition.

Builder Constructs complex objects step by step.

javascriptclass QueryBuilder {
  constructor() { this.query = "SELECT "; }
  select(fields) { this.query += fields; return this; }
  from(table) { this.query += ` FROM ${table}`; return this; }
  where(condition) { this.query += ` WHERE ${condition}`; return this; }
  build() { return this.query; }
}

const query = new QueryBuilder()
  .select("*")
  .from("users")
  .where("age > 18")
  .build();

Use when: Building complex objects like SQL queries, form configs, or request options.

🔗 Structural Patterns

How objects are composed/organized

Module Encapsulates code into self-contained units with private and public parts.

javascriptconst CartModule = (() => {
  let items = []; // private

  return {
    add: (item) => items.push(item),
    getItems: () => [...items],
    total: () => items.reduce((sum, i) => sum + i.price, 0),
  };
})();

CartModule.add({ name: "Shoes", price: 50 });
console.log(CartModule.total()); // 50

Use when: You want to avoid polluting the global scope (very common in JS).

5.** Decorator**
Adds new behavior to an object without modifying the original.

javascriptfunction withLogging(fn) {
  return function (...args) {
    console.log(`Calling with`, args);
    return fn(...args);
  };
}

const add = (a, b) => a + b;
const loggedAdd = withLogging(add);
loggedAdd(2, 3); // logs: Calling with [2, 3] → returns 5

Use when: Adding features like logging, caching, or auth checks to functions.

🔔 Behavioral Patterns

How objects communicate

Observer One object (subject) notifies multiple subscribers when something changes.

javascriptclass EventEmitter {
  constructor() { this.listeners = {}; }
  on(event, fn) {
    (this.listeners[event] ??= []).push(fn);
  }
  emit(event, data) {
    this.listeners[event]?.forEach(fn => fn(data));
  }
}

const emitter = new EventEmitter();
emitter.on("login", (user) => console.log(`${user} logged in`));
emitter.emit("login", "Alice"); // Alice logged in

Use when: Building event systems, real-time updates, or state management.

Strategy Defines a family of algorithms and makes them interchangeable at runtime.

javascriptconst sorter = {
  bubble: (arr) => { /* bubble sort logic */ },
  quick:  (arr) => { /* quick sort logic */  },
};

function sortData(data, strategy = "quick") {
  return sorter[strategy](data);
}

Use when: You need to switch between different implementations of the same behavior (sorting, payment methods, validation rules).

Quick Reference

Cross-Site Scripting (XSS) Prevention

Kiran — Mon, 13 Apr 2026 18:07:19 +0000

🔐 Cross-Site Scripting (XSS) Prevention — What Every Frontend Dev Must Know

XSS is one of the most common web attacks.

👉 It allows attackers to run malicious JavaScript in your app
👉 Can steal cookies, tokens, and user data

🧠 What is XSS?

Example attack:

<script>stealCookies()</script>

If your app renders this → attacker code runs ❌

⚠️ Types of XSS

1️⃣ Stored XSS → saved in DB
2️⃣ Reflected XSS → comes from URL/input
3️⃣ DOM-based XSS → happens in browser

🚨 How XSS Happens

👉 Rendering untrusted input directly

div.innerHTML = userInput; // ❌ dangerous

🛡️ How to Prevent XSS

1️⃣ Escape / Sanitize Input
✔ Never trust user input
✔ Use libraries like DOMPurify

2️⃣ Avoid Dangerous APIs
❌ innerHTML
❌ dangerouslySetInnerHTML in React

✔ Use safe rendering ({data} in JSX)

3️⃣ Use Content Security Policy (CSP)
Content-Security-Policy: script-src 'self'
👉 Blocks unauthorized scripts

4️⃣ Secure Cookies
✔ Use httpOnly
✔ Use Secure flag

👉 Prevents JS from accessing cookies
5️⃣ Validate on Backend Frontend is not enough.

✔ Always sanitize on server too

6️⃣ Avoid Inline Scripts

❌ alert()
✔ Use external JS files

💡 Real Impact

XSS can:

Steal JWT tokens
Hijack sessions
Perform actions as user

👉 It’s a serious production risk

🚨 Interview Trap

❌ “React apps are safe from XSS”
✔ React escapes by default, but unsafe APIs can still break it

🎯 Interview One-Liner

XSS is a vulnerability where malicious scripts are injected into a web app, and it can be prevented by sanitizing input, avoiding unsafe DOM APIs, and enforcing CSP.

WebSecurity #XSS #Frontend #JavaScript #ReactJS #CyberSecurity #InterviewPrep #EngineeringMindset

Redux: Complete Guide from Zero to Hero

Kiran — Wed, 08 Apr 2026 15:24:20 +0000

Redux & React-Redux: Complete Deep Dive 🚀
Let me break this down from absolute basics to advanced, the way you'd explain it confidently in an interview.

🧠 The Core Problem Redux Solves
Imagine a React app with 50 components. Component A needs data that lives in Component Z. Without Redux, you'd have to pass props down through every component in between — this is called prop drilling, and it's a nightmare.
Redux gives you a single global store — think of it as a big JavaScript object that any component can read from or write to directly.

🏛️ The 3 Sacred Principles of Redux

Single source of truth — the entire app state lives in ONE store object
State is read-only — you can NEVER directly mutate state (state.name = "John" ❌)
Changes are made with pure functions — those functions are called reducers

🔑 Core Building Blocks

Store The single JavaScript object holding your entire app's state. jsimport { createStore } from 'redux'; const store = createStore(rootReducer);

store.getState() // Read the current state
store.dispatch(action) // Send an action to change state
store.subscribe(fn) // Listen for state changes

Action A plain JavaScript object that describes what happened. It MUST have a type field. js// Action { type: 'ADD_ITEM', payload: { id: 1, name: 'Laptop' } }

// Action Creator (a function that returns an action)
const addItem = (item) => ({
type: 'ADD_ITEM',
payload: item
});
Interview tip: Action is just a messenger — it says what happened, not how to handle it.

Reducer A pure function that takes (currentState, action) and returns a new state. Never mutates the old state. jsconst initialState = { items: [], loading: false };

Dispatch The only way to trigger a state change. jsstore.dispatch(addItem({ id: 1, name: 'Laptop' }));

🔗 Connecting Redux to React (react-redux)
Provider
Wraps your entire app and makes the store available to all components.
jsximport { Provider } from 'react-redux';

root.render(

);

useSelector — Read from store
jsxconst items = useSelector((state) => state.cart.items);
// state = entire Redux store, you pick what you need
Interview tip: useSelector re-renders the component ONLY when the selected value changes. It's optimized.

useDispatch — Write to store
jsxconst dispatch = useDispatch();

const handleAdd = () => {
dispatch(addItem({ id: 1, name: 'Laptop' }));
};

Old way: connect() (you might be asked this)
jsxconst mapStateToProps = (state) => ({ items: state.cart.items });
const mapDispatchToProps = { addItem };

export default connect(mapStateToProps, mapDispatchToProps)(CartComponent);
Modern code uses hooks (useSelector/useDispatch), but legacy codebases still use connect.

⚙️ Middleware — The Most Important Advanced Topic
What is Middleware?
Middleware sits between dispatch and the reducer. It intercepts every action before it reaches the reducer.
dispatch(action) → [Middleware 1] → [Middleware 2] → Reducer → New State
This is where you handle side effects — API calls, logging, analytics, etc.
Middleware signature (this impresses interviewers):
jsconst myMiddleware = (store) => (next) => (action) => {
// Do something before
console.log('Before:', action);
next(action); // Pass to next middleware or reducer
// Do something after
console.log('After:', store.getState());
};
Applied like this:
jsimport { createStore, applyMiddleware } from 'redux';
const store = createStore(rootReducer, applyMiddleware(myMiddleware));

🔥 Redux Thunk (They WILL Ask This)
The Problem
By default, dispatch() only accepts plain objects. But what if you need to make an API call first, THEN dispatch?
jsdispatch(fetchUser()); // ❌ fetchUser returns a function, not an object!
What Thunk Does
Redux Thunk is middleware that lets you dispatch a function instead of an object. That function receives dispatch and getState as arguments.
bashnpm install redux-thunk
jsimport thunk from 'redux-thunk';
const store = createStore(rootReducer, applyMiddleware(thunk));
Thunk in Action
js// This is a "thunk" — a function that returns a function
const fetchUsers = () => async (dispatch, getState) => {
dispatch({ type: 'FETCH_USERS_START' }); // Show loading spinner

try {
const response = await fetch('/api/users');
const data = await response.json();
dispatch({ type: 'FETCH_USERS_SUCCESS', payload: data }); // Save data
} catch (error) {
dispatch({ type: 'FETCH_USERS_ERROR', payload: error.message }); // Handle error
}
};

// Usage in component
dispatch(fetchUsers());
Interview answer for "What is Thunk?"

"Thunk is middleware that extends Redux's dispatch to accept functions. This lets us handle async operations like API calls. The thunk function receives dispatch and getState, so we can dispatch multiple actions — like a loading action, then a success or failure action — based on async results."

⚡ Redux Saga (The "Chunk" They Mentioned)

They likely said "Saga" not "chunk" — this is the other popular middleware.

Thunk vs Saga
Redux ThunkRedux SagaStyleAsync/await functionsGenerator functions (function*)ComplexitySimple, easy to learnSteeper learning curvePowerGood for simple asyncBetter for complex flowsTestingHarderEasier (pure effects)
Saga Basics
jsimport { call, put, takeEvery } from 'redux-saga/effects';

// Worker saga — does the actual work
function* fetchUsersSaga() {
try {
const data = yield call(fetch, '/api/users'); // call is like await
yield put({ type: 'FETCH_SUCCESS', payload: data }); // put is like dispatch
} catch (error) {
yield put({ type: 'FETCH_ERROR', payload: error });
}
}

// Watcher saga — watches for actions
function* watchFetchUsers() {
yield takeEvery('FETCH_USERS_REQUEST', fetchUsersSaga);
// takeEvery = run saga for every matching action
// takeLatest = only run for the most recent action (cancels previous)
}
Interview answer for "Thunk vs Saga?"

"Thunk is simpler — great for straightforward async operations. Saga uses generator functions and is better for complex scenarios like debouncing, cancelling requests, or running tasks in parallel. In most projects, Thunk is sufficient, but Saga shines in enterprise apps with complex async workflows."

🏆 Redux Toolkit (RTK) — Modern Redux
This is how everyone writes Redux today. If you're not using RTK, you're writing too much boilerplate.
bashnpm install @reduxjs/toolkit
createSlice — Replaces actions + reducer
jsimport { createSlice } from '@reduxjs/toolkit';

export const { addItem, removeItem } = cartSlice.actions; // Auto-generated action creators
export default cartSlice.reducer;
Big deal: RTK uses Immer internally, so you can write "mutating" code that actually creates a new state. No more ...spread everywhere!

createAsyncThunk — Async with RTK
jsimport { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

// Creates the thunk + action types automatically
export const fetchUsers = createAsyncThunk(
'users/fetchAll', // action type prefix
async () => {
const res = await fetch('/api/users');
return res.json(); // This becomes action.payload on success
}
);

configureStore — Store setup
jsimport { configureStore } from '@reduxjs/toolkit';

const store = configureStore({
reducer: {
cart: cartReducer,
users: usersReducer,
},
// RTK includes thunk middleware by default!
// Redux DevTools Extension enabled by default!
});

🔄 Complete Data Flow (Say This in Interviews)
User clicks button
↓
Component calls dispatch(action)
↓
Middleware intercepts (Thunk runs async, then dispatches again)
↓
Reducer receives (currentState, action) → returns newState
↓
Store saves newState
↓
useSelector detects change → component re-renders

💡 Key Interview Answers
"Why Redux over Context API?"

Context re-renders ALL consumers when value changes. Redux is optimized — useSelector only re-renders when the specific piece of state changes. Also, Redux has DevTools, middleware support, and better structure for large apps.

"What is a pure function?"

A function that always returns the same output for the same input, and has no side effects (no API calls, no state mutation, no console logs).

"Can you have multiple reducers?"

Yes! Use combineReducers (or RTK's configureStore with a reducer object). Each reducer manages its own slice of state. They're combined into one root reducer.

"What is the Redux DevTools?"

A browser extension that lets you inspect every action dispatched, see the state before and after, and even time-travel debug — replay actions to reproduce bugs.

🗺️ Quick Mental Map
Redux = Store + Actions + Reducers
React-Redux = Provider + useSelector + useDispatch
Async = Thunk (simple) or Saga (complex)
Modern = Redux Toolkit (RTK) — use this always
Go through these concepts once more out loud and you'll walk into that interview owning the Redux topic. 💪

𝗦𝗲𝗰𝘂𝗿𝗲 𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗖𝗵𝗲𝗰𝗸𝗹𝗶𝘀𝘁

Kiran — Tue, 31 Mar 2026 05:38:24 +0000

🔐 𝗦𝗲𝗰𝘂𝗿𝗲 𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗖𝗵𝗲𝗰𝗸𝗹𝗶𝘀𝘁 — Every Developer Should Follow

Frontend security is often ignored…
until something breaks in production 🚨

Here’s a practical checklist every frontend dev should know 👇

🧠 1️⃣ 𝗣𝗿𝗼𝘁𝗲𝗰𝘁 𝗔𝗴𝗮𝗶𝗻𝘀𝘁 𝗫𝗦𝗦
👉 Never trust user input
✔ Escape/sanitize inputs
✔ Avoid dangerouslySetInnerHTML in React
✔ Use Content Security Policy (CSP)

🧠 2️⃣ 𝗦𝗲𝗰𝘂𝗿𝗲 𝗧𝗼𝗸𝗲𝗻 𝗦𝘁𝗼𝗿𝗮𝗴𝗲
👉 Don’t expose tokens to JavaScript
✔ Use httpOnly cookies for refresh tokens
✔ Avoid storing sensitive data in localStorage
✔ Use short-lived access tokens

🧠 3️⃣ 𝗘𝗻𝗮𝗯𝗹𝗲 𝗛𝗧𝗧𝗣𝗦 𝗘𝘃𝗲𝗿𝘆𝘄𝗵𝗲𝗿𝗲
👉 No exceptions
✔ Prevent data interception
✔ Required for secure cookies

🧠 4️⃣ 𝗛𝗮𝗻𝗱𝗹𝗲 𝗖𝗢𝗥𝗦 𝗣𝗿𝗼𝗽𝗲𝗿𝗹𝘆
👉 Don’t allow everything
❌ Access-Control-Allow-Origin: * (dangerous in prod)
✔ Restrict to trusted domains

🧠 5️⃣ 𝗖𝗦𝗥𝗙 𝗣𝗿𝗼𝘁𝗲𝗰𝘁𝗶𝗼𝗻
👉 Prevent unwanted actions
✔ Use CSRF tokens
✔ Use SameSite cookies

🧠 6️⃣ 𝗔𝘃𝗼𝗶𝗱 𝗦𝗲𝗻𝘀𝗶𝘁𝗶𝘃𝗲 𝗗𝗮𝘁𝗮 𝗘𝘅𝗽𝗼𝘀𝘂𝗿𝗲
👉 Frontend is public
❌ Don’t store:
  • API secrets
  • Private keys
  • Sensitive configs
✔ Use environment variables properly

🧠 7️⃣ 𝗩𝗮𝗹𝗶𝗱𝗮𝘁𝗲 𝗼𝗻 𝗕𝗼𝘁𝗵 𝗦𝗶𝗱𝗲𝘀
👉 Frontend validation is NOT enough
✔ Always validate on backend
✔ Frontend is just UX layer

🧠 8️⃣ 𝗗𝗲𝗽𝗲𝗻𝗱𝗲𝗻𝗰𝘆 𝗦𝗲𝗰𝘂𝗿𝗶𝘁𝘆
👉 Your app is only as secure as your dependencies
✔ Keep packages updated
✔ Use npm audit
✔ Avoid unknown libraries

🧠 9️⃣ 𝗣𝗿𝗲𝘃𝗲𝗻𝘁 𝗖𝗹𝗶𝗰𝗸𝗷𝗮𝗰𝗸𝗶𝗻𝗴
👉 Protect UI from being embedded
✔ Use headers:
X-Frame-Options: DENY

🧠 🔟 𝗘𝗿𝗿𝗼𝗿 𝗛𝗮𝗻𝗱𝗹𝗶𝗻𝗴
👉 Don’t leak internal details
❌ Stack traces in UI
✔ Show user-friendly messages

💡 𝗦𝗲𝗻𝗶𝗼𝗿-𝗟𝗲𝘃𝗲𝗹 𝗜𝗻𝘀𝗶𝗴𝗵𝘁
"Security is not a feature. It’s a layered system"

Real apps combine:
  • Auth (JWT / Sessions)
  • CSP + CORS
  • Input sanitization
  • Secure cookies

🎯 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄 𝗢𝗻𝗲-𝗟𝗶𝗻𝗲𝗿

Frontend security involves protecting against XSS, securing tokens, enforcing HTTPS, validating inputs, and ensuring safe communication with the backend.

LearnToCode #CodingTips #DeveloperLife #TechCareers #SoftwareEngineering #InterviewPrep #TechInterview #CareerGrowth #CodingJourney #Developers

How to Start Contributing to Open Source (Frontend Developer Guide)

Kiran — Mon, 23 Mar 2026 05:20:51 +0000

Most frontend developers want to contribute to open source…

But they get stuck at one question:
“Where do I even start?” 🤔

Here’s a practical, no-fluff roadmap to get started 👇

🚀 How to Start Contributing to Open Source (Frontend Developer Guide)

🔎 1. Where to Find Open Source Projects

Start with these platforms:

• GitHub (main hub)
Search using:

good first issue
frontend
react, vite, nextjs

Example searches:

is:issue is:open label:"good first issue" react
label:"help wanted" frontend

• First Timers Only – beginner-friendly issues with guidance
• Up For Grabs – curated list of projects
• CodeTriage – get issues in your inbox daily
• Awesome for Beginners – handpicked beginner repos

💡 Also explore real-world frontend ecosystems like React-based libraries, UI frameworks, and tooling projects.

🛠️ 2. How to Start Contributing (Step-by-step)

✅ Pick the right project
Look for:

Active commits
Clear documentation
Labels like good first issue, beginner friendly

✅ Understand the codebase
Focus on:

Component structure
State management
API handling
Styling approach

✅ Start SMALL
Avoid complex features initially. Instead:

Fix UI bugs 🐛
Improve responsiveness 📱
Add loading states ⏳
Fix UI text/typos 📝
Improve accessibility

✅ Workflow

Fork → Clone → Create branch
Make changes → Commit
Create PR with clear explanation
Add screenshots (before/after)

✅ Handle reviews
Feedback from maintainers = real learning 🔥

🔥 3. What Should You Contribute?

If you have experience, don’t limit yourself to beginner tasks.

💡 Intermediate:

Refactor components
Optimize re-renders
Improve state logic

💡 Advanced:

Build features
Improve accessibility (high impact!)
Performance optimization
Create reusable components

🎯 4. Smart Strategy (Most People Miss This)

Don’t jump between random repos.

👉 Pick 1–2 projects and:

Contribute consistently
Build relationships with maintainers

This leads to:
⭐ Recognition
🤝 Networking
💼 Potential job referrals

⚠️ Common Mistakes to Avoid

❌ Jumping into massive repos too early
❌ Ignoring contribution guidelines
❌ Creating PRs without context
❌ Taking complex issues too soon

🧠 Pro Tip

If you're strong in React + UI:

👉 Focus on:

UI libraries (buttons, modals, forms)
Admin dashboards
Developer tools

These are:
✔ Easier to contribute to
✔ Highly visible
✔ Great for showcasing in interviews

📌 What Recruiters Actually Look For

When they check your GitHub:

Clean, meaningful commits
Well-explained PRs
Real contributions (not just side projects)

Start small. Stay consistent. Build in public.

That’s how open source starts working for you 🚀

💬 Are you contributing to open source yet, or still planning to start?

OpenSource #FrontendDevelopment #ReactJS #JavaScript #GitHub #GoodFirstIssue #BuildInPublic #SoftwareEngineering #TechCareers #FrontendDev #Programming

Still using npm for everything? Time to level up your JavaScript game 🚀

Kiran — Tue, 24 Jun 2025 01:23:00 +0000

The JS ecosystem has evolved MASSIVELY. Here's your 2025 cheat sheet:
📦 PACKAGE MANAGERS

npm - The reliable classic
✅ Comes with Node.js (zero setup)
✅ Massive ecosystem, battle-tested
❌ Slower installs, bloated node_modules
Best for: Teams wanting stability over speed

Yarn - The Meta powerhouse
✅ Lightning-fast installs + smart caching
✅ Plug'n'Play mode = no node_modules chaos
❌ Yarn 2+ syntax changes might trip you up
Best for: Speed-obsessed teams with CI/CD focus

pnpm - The efficiency king
✅ Fastest traditional manager + saves 70% disk space
✅ Symlinks = one global store, multiple projects
❌ Still the "new kid" (but growing fast)
Best for: Monorepos and storage-conscious devs

⚙️ GAME-CHANGING RUNTIMES

Bun - The Swiss Army knife
✅ Package manager + test runner + bundler in ONE tool
✅ Written in Zig = insanely fast
❌ Still maturing (some compatibility gaps)
Best for: Early adopters who want everything

Deno - The security-first rebel
✅ Created by Node's original author to "fix" Node.js
✅ Secure by default + built-in formatter/linter/tests
❌ Smaller ecosystem (but growing)
Best for: Security-conscious teams building modern apps

🎯 MY HONEST TAKE:
→ Switching from npm? Try pnpm first (easiest migration)
→ Starting fresh? Consider Bun for greenfield projects
→ Enterprise team? Stick with npm/Yarn until Bun/Deno mature
→ Security-critical app? Deno is worth the learning curve
The real question isn't "which is best?" — it's "which solves YOUR biggest pain point?"

What's your current setup? Drop your stack in the comments!
I'm especially curious:

Who's tried Bun in production?
Any pnpm converts here?
Deno success stories?

Let's share war stories! 👇

JavaScript #WebDevelopment #NodeJS #Bun #Deno #pnpm #Yarn #npm #DeveloperTools #Programming #TechStack #SoftwareDevelopment #WebDev #Frontend #Backend

HTML - 5 API's

Kiran — Tue, 18 Jun 2024 03:39:50 +0000

HTML5 introduced several new APIs (Application Programming Interfaces) that extend the capabilities of web browsers, enabling developers to create richer and more interactive web applications without relying on third-party plugins like Flash or Java. Here are some key HTML5 APIs:

1. Canvas API

Description: Provides a way to draw graphics, animations, and other visualizations on the fly using JavaScript.
Use Cases: Creating games, data visualizations, image manipulation, and interactive animations.

2. Web Audio API

Description: Enables web applications to process and synthesize audio in real-time using JavaScript. It provides a powerful set of tools for audio processing and manipulation.
Use Cases: Building audio players, creating music applications, implementing audio effects, and generating soundscapes.

3. Web Storage API (localStorage and sessionStorage)

Description: Allows web applications to store data locally on the user's device. localStorage stores data persistently, while sessionStorage stores data for the duration of a session.
Use Cases: Storing user preferences, caching data for offline use, implementing shopping carts, and saving form data.

4. Web Workers API

Description: Enables multi-threaded JavaScript execution in web applications by running scripts in the background without blocking the UI thread.
Use Cases: Performing CPU-intensive tasks, such as data processing, image manipulation, and calculations, without affecting the responsiveness of the user interface.

5. WebSockets API

Description: Provides a full-duplex communication channel over a single, long-lived connection between a client and a server, enabling real-time bidirectional communication.
Use Cases: Building real-time chat applications, multiplayer games, collaborative editing tools, and live data streaming applications.

6. Geolocation API

Description: Allows web applications to access the device's geographical location information (latitude and longitude) using GPS, Wi-Fi, or cellular data.
Use Cases: Implementing location-based services, mapping applications, weather forecasts, and local search functionality.

7. Drag and Drop API

Description: Provides support for dragging and dropping elements within a web page or between different applications.
Use Cases: Creating drag-and-drop interfaces, file upload widgets, and interactive user interfaces.

8. WebRTC API

Description: Enables real-time communication (voice, video, and data) directly between web browsers without the need for plugins or third-party software.
Use Cases: Building video conferencing applications, peer-to-peer file sharing, screen sharing, and online gaming platforms.

9. IndexedDB API

Description: A low-level API for client-side storage of large amounts of structured data, providing a way to store and retrieve data locally using JavaScript.
Use Cases: Implementing offline web applications, managing large datasets, and caching frequently accessed data.

10. FileReader API

Description: Allows web applications to read the contents of files (e.g., images, text files, audio files) selected by the user using file input elements.
Use Cases: Uploading files asynchronously, processing files locally before uploading, and building file management applications.

These are just a few examples of the many HTML5 APIs available to web developers. Each API provides unique functionality that can enhance the user experience and enable the creation of sophisticated web applications.

Implementing Role-Based Access Control (RBAC) In modern web applications

Kiran — Mon, 17 Jun 2024 09:14:14 +0000

Enhancing Security in ReactJS:

Implementing Role-Based Access Control (RBAC)
In modern web applications, ensuring that users have access only to the modules they are permitted to see is crucial for both security and user experience. Here's a simple way to implement RBAC in your ReactJS application:

Step-by-Step Guide:

1 . Define Roles and Permissions

Create a configuration file (roles.js).
Define roles (e.g., admin, user) and their permissions (e.g., dashboard access, settings access).

2 . Create Authentication Context

Create a context (e.g., AuthContext.js).
Set up a context (AuthContext.js) to manage and provide user authentication state and role information.

3 . Create a Higher-Order Component (HOC) for Authorization

Create a HOC (e.g., withAuthorization.js).
This HOC will check if the user has the required permission and render the component or show an error message.

4 . Protect Components with HOC

Wrap protected components (e.g., Dashboard.js, Settings.js) with the HOC.
Pass the required permission to the HOC for each component.

5 . Wrap the Application with AuthProvider

In your main application file (e.g., App.js), wrap the application with the AuthProvider.
This will ensure the authentication context is available throughout the app.

Example:

// roles.js export const Roles = { ADMIN: 'admin', USER: 'user' }; export const Permissions = { DASHBOARD: 'dashboard', SETTINGS: 'settings' }; export const RolePermissions = { [Roles.ADMIN]: [Permissions.DASHBOARD, Permissions.SETTINGS], [Roles.USER]: [Permissions.DASHBOARD] };

// AuthContext.js import React, { createContext, useContext, useState } from 'react'; const AuthContext = createContext(); export const AuthProvider = ({ children }) => { const [user, setUser] = useState({ role: 'user' }); return (<AuthContext.Provider value={{ user, setUser }}>{children}</AuthContext.Provider>); }; export const useAuth = () => useContext(AuthContext);

// withAuthorization.js import React from 'react'; import { useAuth } from './AuthContext'; import { RolePermissions } from './roles'; const withAuthorization = (WrappedComponent, requiredPermission) => { return (props) => { const { user } = useAuth(); const userPermissions = RolePermissions[user.role]; if (userPermissions.includes(requiredPermission)) { return <WrappedComponent {...props} />; } else { return <div>You do not have permission to view this page.</div>; } }; }; export default withAuthorization;

// App.js import React from 'react'; import { AuthProvider } from './AuthContext'; import Dashboard from './Dashboard'; import Settings from './Settings'; function App() { return (<AuthProvider><div className="App"><Dashboard /><Settings /></div></AuthProvider>); } export default App;

you can enhance your application's security by restricting module access based on user roles. By Steps🚀🔒

Authorization #RBAC #reactjs #nextjs #softwaredevelopment #javascript #HOC #security

Types of Scopes in javascript

Kiran — Sat, 15 Jun 2024 14:36:32 +0000

In JavaScript, scope determines the accessibility or visibility of variables and functions at various parts of the code during execution. Understanding the different types of scopes in JavaScript is crucial for writing efficient and error-free code. Here are the primary types of scopes in JavaScript:

Global Scope Definition: Variables declared outside any function or block have global scope, meaning they are accessible from anywhere in the code. Creation: Variables become global if they are declared with var outside any function or if they are not declared with let, const, or var inside a function (implicitly global).

`var globalVar = 'I am a global variable';

function displayGlobalVar() {
console.log(globalVar); // Accessible here
}

displayGlobalVar();
console.log(globalVar); // Accessible here too
`

Local Scope (Function Scope) Definition: Variables declared within a function are in the local scope (or function scope). They are only accessible within that function. Creation: Any variable declared inside a function using var, let, or const.

`function myFunction() {
var localVar = 'I am a local variable';
console.log(localVar); // Accessible here
}

myFunction();
console.log(localVar); // Uncaught ReferenceError: localVar is not defined
`

Block Scope Definition: Variables declared within a block (denoted by {}) are only accessible within that block. This type of scope was introduced with ES6 and applies to variables declared using let and const. Creation: Any variable declared inside a block using let or const.

`{
let blockVar = 'I am a block-scoped variable';
const blockConst = 'I am also block-scoped';
console.log(blockVar); // Accessible here
console.log(blockConst); // Accessible here
}

console.log(blockVar); // Uncaught ReferenceError: blockVar is not defined
console.log(blockConst); // Uncaught ReferenceError: blockConst is not defined
`

Lexical Scope (Static Scope) Definition: Lexical scope means that the accessibility of variables is determined by their physical location in the code at the time of writing. Inner functions have access to variables defined in outer functions. Creation: Automatically created based on where functions are declared.

`function outerFunction() {
var outerVar = 'I am an outer variable';

function innerFunction() {
    console.log(outerVar); // Accessible due to lexical scope
}

innerFunction();

}

outerFunction();
`

Module Scope Definition: Variables declared within a module (using the ES6 module system) are scoped to that module. They are not accessible outside the module unless explicitly exported. Creation: Using import and export statements in ES6 modules.

`// module1.js
export const moduleVar = 'I am a module-scoped variable';

// main.js
import { moduleVar } from './module1.js';
console.log(moduleVar); // Accessible here
`

Scope Chain
The scope chain is a hierarchical structure that determines the order in which scopes are looked up to resolve variable names. When a variable is referenced, JavaScript starts looking in the current scope, then moves up to the outer scope, and continues this process until it reaches the global scope.

`var globalVar = 'I am global';

function outerFunction() {
var outerVar = 'I am outer';

function innerFunction() {
    var innerVar = 'I am inner';
    console.log(innerVar); // Found in inner scope
    console.log(outerVar); // Found in outer scope
    console.log(globalVar); // Found in global scope
}

innerFunction();

}

outerFunction();
`

Closures
Closures are functions that remember their lexical scope even when they are executed outside of that scope. This allows inner functions to access variables from their outer function scope even after the outer function has returned.

`function outerFunction() {
var outerVar = 'I am outer';

function innerFunction() {
    console.log(outerVar);
}

return innerFunction;

}

const closureFunction = outerFunction();
closureFunction(); // 'I am outer' - outerVar is still accessible
`

Summary
Understanding these different types of scopes and their behavior is essential for managing variable accessibility and preventing issues like variable shadowing and unintentional global variable creation. It also helps in writing clean, maintainable, and error-free JavaScript code.

𝐌𝐚𝐬𝐭𝐞𝐫𝐢𝐧𝐠 𝐃𝐞𝐬𝐢𝐠𝐧 𝐏𝐚𝐭𝐭𝐞𝐫𝐧𝐬 𝐢𝐧 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭: 𝟤/𝟔 - 𝐑𝐞𝐯𝐞𝐚𝐥𝐢𝐧𝐠 𝐌𝐨𝐝𝐮𝐥𝐞 𝐏𝐚𝐭𝐭𝐞𝐫𝐧

Kiran — Tue, 11 Jun 2024 04:28:08 +0000

𝐌𝐚𝐬𝐭𝐞𝐫𝐢𝐧𝐠 𝐃𝐞𝐬𝐢𝐠𝐧 𝐏𝐚𝐭𝐭𝐞𝐫𝐧𝐬 𝐢𝐧 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭: 𝟤/𝟔 - 𝐑𝐞𝐯𝐞𝐚𝐥𝐢𝐧𝐠 𝐌𝐨𝐝𝐮𝐥𝐞 𝐏𝐚𝐭𝐭𝐞𝐫𝐧

𝖤𝗏𝖾𝗋 𝗐𝗈𝗇𝖽𝖾𝗋𝖾𝖽 𝗁𝗈𝗐 𝗍𝗈 𝖾𝗇𝖼𝖺𝗉𝗌𝗎𝗅𝖺𝗍𝖾 𝗒𝗈𝗎𝗋 𝖩𝖺𝗏𝖺𝖲𝖼𝗋𝗂𝗉𝗍 𝖼𝗈𝖽𝖾 𝖾𝖿𝖿𝗂𝖼𝗂𝖾𝗇𝗍𝗅𝗒 𝗐𝗁𝗂𝗅𝖾 𝗄𝖾𝖾𝗉𝗂𝗇𝗀 𝗂𝗍 𝖼𝗅𝖾𝖺𝗇 𝖺𝗇𝖽 𝗋𝖾𝖺𝖽𝖺𝖻𝗅𝖾? 𝖳𝗁𝖾 𝖱𝖾𝗏𝖾𝖺𝗅𝗂𝗇𝗀 𝖬𝗈𝖽𝗎𝗅𝖾 𝖯𝖺𝗍𝗍𝖾𝗋𝗇 𝗆𝗂𝗀𝗁𝗍 𝖻𝖾 𝗒𝗈𝗎𝗋 𝖺𝗇𝗌𝗐𝖾𝗋!

𝖳𝗁𝗂𝗌 𝗏𝖺𝗋𝗂𝖺𝗍𝗂𝗈𝗇 𝗈𝖿 𝗍𝗁𝖾 𝗆𝗈𝖽𝗎𝗅𝖾 𝗉𝖺𝗍𝗍𝖾𝗋𝗇 𝗇𝗈𝗍 𝗈𝗇𝗅𝗒 𝖾𝗇𝖼𝖺𝗉𝗌𝗎𝗅𝖺𝗍𝖾𝗌 𝗒𝗈𝗎𝗋 𝖼𝗈𝖽𝖾 𝖻𝗎𝗍 𝖺𝗅𝗌𝗈 𝗆𝖺𝗄𝖾𝗌 𝗂𝗍 𝗆𝗈𝗋𝖾 𝗂𝗇𝗍𝗎𝗂𝗍𝗂𝗏𝖾 𝖻𝗒 𝖽𝖾𝖿𝗂𝗇𝗂𝗇𝗀 𝖺𝗅𝗅 𝗏𝖺𝗋𝗂𝖺𝖻𝗅𝖾𝗌 𝖺𝗇𝖽 𝖿𝗎𝗇𝖼𝗍𝗂𝗈𝗇𝗌 𝗂𝗇 𝖺 𝗉𝗋𝗂𝗏𝖺𝗍𝖾 𝗌𝖼𝗈𝗉𝖾 𝖺𝗇𝖽 𝗍𝗁𝖾𝗇 "𝗋𝖾𝗏𝖾𝖺𝗅𝗂𝗇𝗀" 𝖺𝗇 𝗈𝖻𝗃𝖾𝖼𝗍 𝗐𝗂𝗍𝗁 𝗉𝗈𝗂𝗇𝗍𝖾𝗋𝗌 𝗍𝗈 𝗍𝗁𝖾 𝗉𝗋𝗂𝗏𝖺𝗍𝖾 𝗆𝖾𝗍𝗁𝗈𝖽𝗌. 𝖧𝖾𝗋𝖾'𝗌 𝖺 𝗊𝗎𝗂𝖼𝗄 𝗅𝗈𝗈𝗄 𝖺𝗍 𝗁𝗈𝗐 𝗂𝗍 𝗐𝗈𝗋𝗄𝗌:

`𝖼𝗈𝗇𝗌𝗍 𝗋𝖾𝗏𝖾𝖺𝗅𝗂𝗇𝗀𝖬𝗈𝖽𝗎𝗅𝖾 = (𝖿𝗎𝗇𝖼𝗍𝗂𝗈𝗇() {
𝖼𝗈𝗇𝗌𝗍 𝗉𝗋𝗂𝗏𝖺𝗍𝖾𝖵𝖺𝗋 = '𝖨 𝖺𝗆 𝗉𝗋𝗂𝗏𝖺𝗍𝖾';
𝖿𝗎𝗇𝖼𝗍𝗂𝗈𝗇 𝗉𝗋𝗂𝗏𝖺𝗍𝖾𝖥𝗎𝗇𝖼𝗍𝗂𝗈𝗇() {
𝖼𝗈𝗇𝗌𝗈𝗅𝖾.𝗅𝗈𝗀(𝗉𝗋𝗂𝗏𝖺𝗍𝖾𝖵𝖺𝗋);
}

𝖿𝗎𝗇𝖼𝗍𝗂𝗈𝗇 𝗉𝗎𝖻𝗅𝗂𝖼𝖥𝗎𝗇𝖼𝗍𝗂𝗈𝗇() {
𝗉𝗋𝗂𝗏𝖺𝗍𝖾𝖥𝗎𝗇𝖼𝗍𝗂𝗈𝗇();
}
𝗋𝖾𝗍𝗎𝗋𝗇 {
𝗉𝗎𝖻𝗅𝗂𝖼𝖥𝗎𝗇𝖼𝗍𝗂𝗈𝗇: 𝗉𝗎𝖻𝗅𝗂𝖼𝖥𝗎𝗇𝖼𝗍𝗂𝗈𝗇
};
})();
𝗋𝖾𝗏𝖾𝖺𝗅𝗂𝗇𝗀𝖬𝗈𝖽𝗎𝗅𝖾.𝗉𝗎𝖻𝗅𝗂𝖼𝖥𝗎𝗇𝖼𝗍𝗂𝗈𝗇(); // 𝖮𝗎𝗍𝗉𝗎𝗍: 𝖨 𝖺𝗆 𝗉𝗋𝗂𝗏𝖺𝗍𝖾`

𝐖𝐡𝐲 𝐬𝐡𝐨𝐮𝐥𝐝 𝐲𝐨𝐮 𝐜𝐨𝐧𝐬𝐢𝐝𝐞𝐫 𝐮𝐬𝐢𝐧𝐠 𝐭𝐡𝐞 𝐑𝐞𝐯𝐞𝐚𝐥𝐢𝐧𝐠 𝐌𝐨𝐝𝐮𝐥𝐞 𝐏𝐚𝐭𝐭𝐞𝐫𝐧?

𝐈𝐦𝐩𝐫𝐨𝐯𝐞𝐝 𝐑𝐞𝐚𝐝𝐚𝐛𝐢𝐥𝐢𝐭𝐲: 𝖢𝗅𝖾𝖺𝗋𝗅𝗒 𝗌𝖾𝗉𝖺𝗋𝖺𝗍𝖾𝗌 𝗉𝗋𝗂𝗏𝖺𝗍𝖾 𝖺𝗇𝖽 𝗉𝗎𝖻𝗅𝗂𝖼 𝗉𝖺𝗋𝗍𝗌 𝗈𝖿 𝗒𝗈𝗎𝗋 𝖼𝗈𝖽𝖾.
𝐄𝐧𝐜𝐚𝐩𝐬𝐮𝐥𝐚𝐭𝐢𝐨𝐧: 𝖪𝖾𝖾𝗉𝗌 𝗉𝗋𝗂𝗏𝖺𝗍𝖾 𝗏𝖺𝗋𝗂𝖺𝖻𝗅𝖾𝗌 𝗍𝗋𝗎𝗅𝗒 𝗉𝗋𝗂𝗏𝖺𝗍𝖾, 𝗉𝗋𝖾𝗏𝖾𝗇𝗍𝗂𝗇𝗀 𝖾𝗑𝗍𝖾𝗋𝗇𝖺𝗅 𝖺𝖼𝖼𝖾𝗌𝗌.
𝐂𝐥𝐞𝐚𝐧𝐞𝐫 𝐂𝐨𝐝𝐞: 𝖱𝖾𝖽𝗎𝖼𝖾𝗌 𝖼𝗅𝗎𝗍𝗍𝖾𝗋 𝖻𝗒 𝖾𝗑𝗉𝗈𝗌𝗂𝗇𝗀 𝗈𝗇𝗅𝗒 𝗍𝗁𝖾 𝗇𝖾𝖼𝖾𝗌𝗌𝖺𝗋𝗒 𝗉𝖺𝗋𝗍𝗌 𝗈𝖿 𝗒𝗈𝗎𝗋 𝖼𝗈𝖽𝖾.

𝖦𝗂𝗏𝖾 𝗂𝗍 𝖺 𝗍𝗋𝗒 𝗂𝗇 𝗒𝗈𝗎𝗋 𝗇𝖾𝗑𝗍 𝗉𝗋𝗈𝗃𝖾𝖼𝗍 𝖺𝗇𝖽 𝗌𝖾𝖾 𝗍𝗁𝖾 𝖽𝗂𝖿𝖿𝖾𝗋𝖾𝗇𝖼𝖾 𝗂𝗍 𝗆𝖺𝗄𝖾𝗌 𝗂𝗇 𝖼𝗈𝖽𝖾 𝗆𝖺𝗂𝗇𝗍𝖺𝗂𝗇𝖺𝖻𝗂𝗅𝗂𝗍𝗒 𝖺𝗇𝖽 𝖼𝗅𝖺𝗋𝗂𝗍𝗒!

💬 𝖧𝗈𝗐 𝖽𝗈 𝗒𝗈𝗎 𝗆𝖺𝗇𝖺𝗀𝖾 𝖼𝗈𝖽𝖾 𝖾𝗇𝖼𝖺𝗉𝗌𝗎𝗅𝖺𝗍𝗂𝗈𝗇 𝗂𝗇 𝗒𝗈𝗎𝗋 𝖩𝖺𝗏𝖺𝖲𝖼𝗋𝗂𝗉𝗍 𝗉𝗋𝗈𝗃𝖾𝖼𝗍𝗌? 𝖲𝗁𝖺𝗋𝖾 𝗒𝗈𝗎𝗋 𝗍𝗁𝗈𝗎𝗀𝗁𝗍𝗌 𝖺𝗇𝖽 𝖾𝗑𝗉𝖾𝗋𝗂𝖾𝗇𝖼𝖾𝗌 𝖻𝖾𝗅𝗈𝗐!

JavaScript #DesignPatterns #Encapsulation #CodingBestPractices #WebDevelopment

𝐌𝐚𝐬𝐭𝐞𝐫𝐢𝐧𝐠 𝐃𝐞𝐬𝐢𝐠𝐧 𝐏𝐚𝐭𝐭𝐞𝐫𝐧𝐬 𝐢𝐧 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭: 𝟏/𝟔 - 𝐓𝐡𝐞 𝐌𝐨𝐝𝐮𝐥𝐞 𝐏𝐚𝐭𝐭𝐞𝐫𝐧

Kiran — Mon, 10 Jun 2024 04:17:23 +0000

🎯 𝐌𝐚𝐬𝐭𝐞𝐫𝐢𝐧𝐠 𝐃𝐞𝐬𝐢𝐠𝐧 𝐏𝐚𝐭𝐭𝐞𝐫𝐧𝐬 𝐢𝐧 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭: 𝟏/𝟔 - 𝐓𝐡𝐞 𝐌𝐨𝐝𝐮𝐥𝐞 𝐏𝐚𝐭𝐭𝐞𝐫𝐧

𝖨𝗇 𝗈𝗎𝗋 𝖿𝖺𝗌𝗍-𝗉𝖺𝖼𝖾𝖽 𝗍𝖾𝖼𝗁 𝗐𝗈𝗋𝗅𝖽, 𝗐𝗋𝗂𝗍𝗂𝗇𝗀 𝖼𝗅𝖾𝖺𝗇 𝖺𝗇𝖽 𝗆𝖺𝗂𝗇𝗍𝖺𝗂𝗇𝖺𝖻𝗅𝖾 𝖼𝗈𝖽𝖾 𝗂𝗌 𝖾𝗌𝗌𝖾𝗇𝗍𝗂𝖺𝗅. 𝖳𝗁𝖾 𝐌𝐨𝐝𝐮𝐥𝐞 𝐏𝐚𝐭𝐭𝐞𝐫𝐧 𝗂𝗇 𝖩𝖺𝗏𝖺𝖲𝖼𝗋𝗂𝗉𝗍 𝗂𝗌 𝖺 𝗉𝗈𝗐𝖾𝗋𝖿𝗎𝗅 𝖽𝖾𝗌𝗂𝗀𝗇 𝗉𝖺𝗍𝗍𝖾𝗋𝗇 𝗍𝗁𝖺𝗍 𝗁𝖾𝗅𝗉𝗌 𝖺𝖼𝗁𝗂𝖾𝗏𝖾 𝗍𝗁𝗂𝗌 𝖻𝗒 𝖾𝗇𝖺𝖻𝗅𝗂𝗇𝗀 𝗉𝗎𝖻𝗅𝗂𝖼 𝖺𝗇𝖽 𝗉𝗋𝗂𝗏𝖺𝗍𝖾 𝖾𝗇𝖼𝖺𝗉𝗌𝗎𝗅𝖺𝗍𝗂𝗈𝗇 𝗐𝗂𝗍𝗁𝗂𝗇 𝖺 𝗌𝗂𝗇𝗀𝗅𝖾 𝗈𝖻𝗃𝖾𝖼𝗍.

🚀 𝐖𝐡𝐲 𝐔𝐬𝐞 𝐭𝐡𝐞 𝐌𝐨𝐝𝐮𝐥𝐞 𝐏𝐚𝐭𝐭𝐞𝐫𝐧?
𝟣. 𝐄𝐧𝐜𝐚𝐩𝐬𝐮𝐥𝐚𝐭𝐢𝐨𝐧: 𝖪𝖾𝖾𝗉 𝗉𝖺𝗋𝗍𝗌 𝗈𝖿 𝗒𝗈𝗎𝗋 𝖼𝗈𝖽𝖾 𝗁𝗂𝖽𝖽𝖾𝗇 𝖺𝗇𝖽 𝗉𝗋𝗈𝗍𝖾𝖼𝗍𝖾𝖽.
𝟤. 𝐌𝐚𝐢𝐧𝐭𝐚𝐢𝐧𝐚𝐛𝐢𝐥𝐢𝐭𝐲: 𝖲𝗂𝗆𝗉𝗅𝗂𝖿𝗒 𝖼𝗈𝖽𝖾 𝗆𝖺𝗂𝗇𝗍𝖾𝗇𝖺𝗇𝖼𝖾 𝖻𝗒 𝗈𝗋𝗀𝖺𝗇𝗂𝗓𝗂𝗇𝗀 𝗋𝖾𝗅𝖺𝗍𝖾𝖽 𝖿𝗎𝗇𝖼𝗍𝗂𝗈𝗇𝗌 𝖺𝗇𝖽 𝗏𝖺𝗋𝗂𝖺𝖻𝗅𝖾𝗌.
𝟥. 𝐍𝐚𝐦𝐞𝐬𝐩𝐚𝐜𝐞 𝐌𝐚𝐧𝐚𝐠𝐞𝐦𝐞𝐧𝐭: 𝖯𝗋𝖾𝗏𝖾𝗇𝗍 𝗀𝗅𝗈𝖻𝖺𝗅 𝗇𝖺𝗆𝖾𝗌𝗉𝖺𝖼𝖾 𝗉𝗈𝗅𝗅𝗎𝗍𝗂𝗈𝗇.

𝖧𝖾𝗋𝖾'𝗌 𝖺 𝗊𝗎𝗂𝖼𝗄 𝖾𝗑𝖺𝗆𝗉𝗅𝖾 𝗍𝗈 𝗂𝗅𝗅𝗎𝗌𝗍𝗋𝖺𝗍𝖾 𝗍𝗁𝖾 𝖬𝗈𝖽𝗎𝗅𝖾 𝖯𝖺𝗍𝗍𝖾𝗋𝗇 𝗂𝗇 𝖺𝖼𝗍𝗂𝗈𝗇:

𝖼𝗈𝗇𝗌𝗍 𝗆𝗒𝖬𝗈𝖽𝗎𝗅𝖾 = (𝖿𝗎𝗇𝖼𝗍𝗂𝗈𝗇() {
 𝖼𝗈𝗇𝗌𝗍 𝗉𝗋𝗂𝗏𝖺𝗍𝖾𝖵𝖺𝗋𝗂𝖺𝖻𝗅𝖾 = '𝖨 𝖺𝗆 𝗉𝗋𝗂𝗏𝖺𝗍𝖾';
 𝖿𝗎𝗇𝖼𝗍𝗂𝗈𝗇 𝗉𝗋𝗂𝗏𝖺𝗍𝖾𝖬𝖾𝗍𝗁𝗈𝖽() {
 𝖼𝗈𝗇𝗌𝗈𝗅𝖾.𝗅𝗈𝗀(𝗉𝗋𝗂𝗏𝖺𝗍𝖾𝖵𝖺𝗋𝗂𝖺𝖻𝗅𝖾);
 }
𝗋𝖾𝗍𝗎𝗋𝗇 {
 𝗉𝗎𝖻𝗅𝗂𝖼𝖬𝖾𝗍𝗁𝗈𝖽: 𝖿𝗎𝗇𝖼𝗍𝗂𝗈𝗇() {
 𝗉𝗋𝗂𝗏𝖺𝗍𝖾𝖬𝖾𝗍𝗁𝗈𝖽();
 }
 };
})();
𝗆𝗒𝖬𝗈𝖽𝗎𝗅𝖾.𝗉𝗎𝖻𝗅𝗂𝖼𝖬𝖾𝗍𝗁𝗈𝖽(); // 𝖮𝗎𝗍𝗉𝗎𝗍: 𝖨 𝖺𝗆 𝗉𝗋𝗂𝗏𝖺𝗍𝖾

🔍 𝐊𝐞𝐲 𝐓𝐚𝐤𝐞𝐚𝐰𝐚𝐲𝐬:

𝟣. 𝐏𝐫𝐢𝐯𝐚𝐭𝐞 𝐕𝐚𝐫𝐢𝐚𝐛𝐥𝐞𝐬 𝐚𝐧𝐝 𝐌𝐞𝐭𝐡𝐨𝐝𝐬: 𝖣𝖾𝖿𝗂𝗇𝖾𝖽 𝗂𝗇𝗌𝗂𝖽𝖾 𝗍𝗁𝖾 𝗆𝗈𝖽𝗎𝗅𝖾, 𝗍𝗁𝖾𝗒 𝖺𝗋𝖾 𝗂𝗇𝖺𝖼𝖼𝖾𝗌𝗌𝗂𝖻𝗅𝖾 𝖿𝗋𝗈𝗆 𝗈𝗎𝗍𝗌𝗂𝖽𝖾.
𝟤. 𝐏𝐮𝐛𝐥𝐢𝐜 𝐌𝐞𝐭𝐡𝐨𝐝𝐬: 𝖱𝖾𝗍𝗎𝗋𝗇𝖾𝖽 𝖿𝗋𝗈𝗆 𝗍𝗁𝖾 𝗆𝗈𝖽𝗎𝗅𝖾, 𝖺𝗅𝗅𝗈𝗐𝗂𝗇𝗀 𝖼𝗈𝗇𝗍𝗋𝗈𝗅𝗅𝖾𝖽 𝖺𝖼𝖼𝖾𝗌𝗌 𝗍𝗈 𝗉𝗋𝗂𝗏𝖺𝗍𝖾 𝗆𝖾𝗆𝖻𝖾𝗋𝗌.

𝖨𝗇𝖼𝗈𝗋𝗉𝗈𝗋𝖺𝗍𝗂𝗇𝗀 𝗍𝗁𝖾 𝖬𝗈𝖽𝗎𝗅𝖾 𝖯𝖺𝗍𝗍𝖾𝗋𝗇 𝗂𝗇𝗍𝗈 𝗒𝗈𝗎𝗋 𝖩𝖺𝗏𝖺𝖲𝖼𝗋𝗂𝗉𝗍 𝗉𝗋𝗈𝗃𝖾𝖼𝗍𝗌 𝖼𝖺𝗇 𝗌𝗂𝗀𝗇𝗂𝖿𝗂𝖼𝖺𝗇𝗍𝗅𝗒 𝖾𝗇𝗁𝖺𝗇𝖼𝖾 𝗒𝗈𝗎𝗋 𝖼𝗈𝖽𝖾'𝗌 𝗌𝗍𝗋𝗎𝖼𝗍𝗎𝗋𝖾 𝖺𝗇𝖽 𝖼𝗅𝖺𝗋𝗂𝗍𝗒.

🔗 𝖶𝗁𝖺𝗍 𝖽𝖾𝗌𝗂𝗀𝗇 𝗉𝖺𝗍𝗍𝖾𝗋𝗇𝗌 𝗁𝖺𝗏𝖾 𝗒𝗈𝗎 𝖿𝗈𝗎𝗇𝖽 𝗆𝗈𝗌𝗍 𝗎𝗌𝖾𝖿𝗎𝗅 𝗂𝗇 𝗒𝗈𝗎𝗋 𝖩𝖺𝗏𝖺𝖲𝖼𝗋𝗂𝗉𝗍 𝗃𝗈𝗎𝗋𝗇𝖾𝗒? 𝖲𝗁𝖺𝗋𝖾 𝗒𝗈𝗎𝗋 𝖾𝗑𝗉𝖾𝗋𝗂𝖾𝗇𝖼𝖾𝗌 𝖺𝗇𝖽 𝗅𝖾𝗍'𝗌 𝖽𝗂𝗌𝖼𝗎𝗌𝗌! 💬

Shallow Copy v/s Deep Copy

Kiran — Mon, 03 Jun 2024 03:54:20 +0000

The main difference between a shallow copy and a deep copy in JavaScript lies in how they handle the copying of nested objects. Here’s a detailed explanation:

Shallow Copy
A shallow copy of an object is a new object that has the same top-level properties as the original object. However, if any of these properties are themselves objects, the shallow copy does not create a new instance of those nested objects. Instead, it copies the references to the original nested objects.

Characteristics:

Top-level properties: A shallow copy duplicates the top-level properties of the original object.
Nested objects: Any nested objects or arrays are not duplicated. Instead, their references are copied.

Methods to create a shallow copy:

Using Object.assign:

const original = { a: 1, b: { c: 2 } }; const shallowCopy = Object.assign({}, original); shallowCopy.b.c = 3; console.log(original.b.c); // Output: 3 (reference is shared)

Using the spread operator (...):

const original = { a: 1, b: { c: 2 } }; const shallowCopy = { ...original }; shallowCopy.b.c = 3; console.log(original.b.c); // Output: 3 (reference is shared)

Deep Copy
A deep copy of an object is a new object that is a complete duplicate of the original object, including all nested objects. This means that any changes made to the deep copy do not affect the original object, and vice versa.

Characteristics:

Top-level properties: A deep copy duplicates the top-level properties of the original object.
Nested objects: Any nested objects or arrays are also duplicated, creating new instances of these objects rather than copying references.

Methods to create a deep copy:

Using JSON.parse(JSON.stringify(obj)) (simple cases):

const original = { a: 1, b: { c: 2 } }; const deepCopy = JSON.parse(JSON.stringify(original)); deepCopy.b.c = 3; console.log(original.b.c); // Output: 2 (reference is not shared)

Note: This method has limitations with functions, special objects like Date, and undefined properties.

Using a recursive function:

Summary

Shallow Copy:
- Duplicates top-level properties.
- Copies references to nested objects.
- Changes to nested objects in the copy affect the original object.
- Methods: Object.assign, spread operator (...).
Deep Copy:
- Duplicates all properties, including nested objects.
- Creates new instances of nested objects.
- Changes to nested objects in the copy do not affect the original object.
- Methods: JSON.parse(JSON.stringify(obj)) (for simple cases), *recursive functions *(for complex objects).