JavaScript Getters & Setters: Control Data Access & Validation

How do you deep clone an object in JavaScript? If you answered JSON.parse(JSON.stringify(obj)), you're not alone. It's been the go-to hack for over a decade. But it's broken in ways that will bite you at the worst possible time. const original = {  name: "Pranjul",  joined: new Date("2024-01-01"),  skills: new Set(["React", "CSS", "TypeScript"]) }; const cloned = JSON.parse(JSON.stringify(original)); console.log(cloned.joined);  // "2024-01-01T00:00:00.000Z" (string, NOT a Date) console.log(cloned.skills);  // {} (empty object, NOT a Set) Everything silently broke. No errors and warnings. Your Date is now a string. Your Set is an empty object. And your code downstream has no idea. This is why structuredClone() exists. const cloned = structuredClone(original); console.log(cloned.joined);  // Date object (correct!) console.log(cloned.skills);  // Set {"React", "CSS", "TypeScript"} (correct!) One function call. Everything cloned properly. Let me highlight that circular reference row: const obj = { name: "Pranjul" }; obj.self = obj; // circular reference JSON.parse(JSON.stringify(obj)); // TypeError: Converting circular structure to JSON structuredClone(obj); // Works perfectly. Returns a proper deep clone. If you've ever hit that circular reference error in production, you know how painful it is. structuredClone just handles it. When JSON.parse/stringify still wins: There is one scenario where the JSON approach has an advantage: speed for simple, flat objects with only strings and numbers. The JSON functions are heavily optimized in V8. For this kind of data, JSON is faster: const simpleData = {  id: 1,  name: "Pranjul",  active: true,  tags: ["frontend", "react"] }; But the moment you have Dates, Sets, Maps, undefined, or nested structures, structuredClone is the correct choice. What structuredClone CANNOT clone: Not everything is supported. Functions and DOM nodes can't be cloned. Class instances get cloned as plain objects and lose their methods. That's by design. My rule of thumb: ✅ Need to clone plain data with possible Dates/Sets/Maps? Use structuredClone ✅ Need to serialize data for storage or network? Use JSON.stringify ✅ Need to clone class instances with methods? Write a custom clone method structuredClone ships in every modern browser and Node.js 17+. There's no reason to keep using the JSON hack for deep cloning in 2026. What's a JavaScript built-in that you learned about way too late? Share below 👇 w3schools.com JavaScript Mastery JavaScript Developer Frontend Masters

*⚡ Don’t Overwhelm to Learn JavaScript — JavaScript is Only This Much* *🔹 FOUNDATIONS* 1. Variables & Data Types - var, let, const - number - string - boolean - null - undefined - object - array - typeof operator 2. Operators - Arithmetic → + - * / % - Comparison → == === != !== > < - Logical → && || ! - Assignment operators - Ternary operator ? : (🔥 Important → == vs ===) 3. Control Flow - if, else if, else - switch statement - Truthy & falsy values 4. Loops - for loop - while loop - do...while - for...of - for...in - break, continue 5. Functions - Function declaration - Function expression - Arrow functions => - Parameters & return - Default parameters - Callback functions 6. Arrays - Creating arrays - push(), pop() - shift(), unshift() - map(), filter(), reduce() - find(), includes() - Array destructuring (🔥 Most used in interviews) 7. Objects - Object creation - Properties & methods - Object destructuring - Object.keys(), values(), entries() - Spread operator ... 8. Strings - Template literals `Hello ${name}` - slice(), substring() - replace() - split(), join() - trim() *🔥 CORE JAVASCRIPT CONCEPTS* 9. DOM Manipulation - document.getElementById() - querySelector() - Changing HTML & CSS - Creating elements - Event listeners (🔥 Makes websites interactive) 10. Events - click, submit, change - Event handling - Event bubbling - Event delegation 11. Scope - Global scope - Function scope - Block scope - let vs var vs const 12. Closures - Inner functions - Data privacy - Lexical scope (🔥 Frequently asked in interviews) 13. Hoisting - Variable hoisting - Function hoisting 14. this Keyword - Global context - Object methods - Arrow function behavior 15. ES6+ Features (Modern JavaScript) - let, const - Arrow functions - Destructuring - Spread / rest operator - Modules (import/export) - Optional chaining - Nullish coalescing *🚀 ADVANCED JAVASCRIPT* 16. Asynchronous JavaScript - setTimeout(), setInterval() - Callbacks - Promises - async / await - Fetch API (🔥 Very important skill) 17. Error Handling - try, catch, finally - throw errors 18. Modules - import / export - Code organization 19. OOP in JavaScript - Constructor functions - Classes - Inheritance - Prototypes 20. Browser Storage - localStorage - sessionStorage - Cookies *⚙️ ECOSYSTEM & TOOLS* 21. Package Manager - npm - package.json - Installing libraries 22. Version Control - Git basics - GitHub 23. Build Tools (Optional Advanced) - Webpack - Vite - Babel *🌐 JAVASCRIPT FRAMEWORKS (Next Step)* 24. Frontend - React (most popular) - Vue - Angular 25. Backend (Full Stack JavaScript) - Node.js - Express.js - REST APIs *⭐ Double Tap ♥️ For Detailed Explanation of Each Topic*

Learn JavaScript — JavaScript 🔹 FOUNDATIONS 1. Variables & Data Types - var, let, const - number - string - boolean - null - undefined - object - array - typeof operator 2. Operators - Arithmetic → + - * / % - Comparison → == === != !== > < - Logical → && || ! - Assignment operators - Ternary operator ? : 3. Control Flow - if, else if, else - switch statement - Truthy & falsy values 4. Loops - for loop - while loop - do...while - for...of - for...in - break, continue 5. Functions - Function declaration - Function expression - Arrow functions => - Parameters & return - Default parameters - Callback functions 6. Arrays - Creating arrays - push(), pop() - shift(), unshift() - map(), filter(), reduce() - find(), includes() - Array destructuring 7. Objects - Object creation - Properties & methods - Object destructuring - Object.keys(), values(), entries() - Spread operator ... 8. Strings - Template literals `Hello ${name}` - slice(), substring() - replace() - split(), join() - trim() CORE JAVASCRIPT CONCEPTS 9. DOM Manipulation - document.getElementById() - querySelector() - Changing HTML & CSS - Creating elements - Event listeners (Makes websites interactive) 10. Events - click, submit, change - Event handling - Event bubbling - Event delegation 11. Scope - Global scope - Function scope - Block scope - let vs var vs const 12. Closures - Inner functions - Data privacy - Lexical scope 13. Hoisting - Variable hoisting - Function hoisting 14. this Keyword - Global context - Object methods - Arrow function behavior 15. ES6+ Features (Modern JavaScript) - let, const - Arrow functions - Destructuring - Spread / rest operator - Modules (import/export) - Optional chaining - Nullish coalescing ADVANCED JAVASCRIPT 16. Asynchronous JavaScript - setTimeout(), setInterval() - Callbacks - Promises - async / await - Fetch API 17. Error Handling - try, catch, finally - throw errors 18. Modules - import / export - Code organization 19. OOP in JavaScript - Constructor functions - Classes - Inheritance - Prototypes 20. Browser Storage - localStorage - sessionStorage - Cookies ECOSYSTEM & TOOLS 21. Package Manager - npm - package.json - Installing libraries 22. Version Control - Git basics - GitHub 23. Build Tools (Optional Advanced) - Webpack - Vite - Babel JAVASCRIPT FRAMEWORKS 24. Frontend - React - Vue - Angular 25. Backend - Node.js - Express.js - REST APIs

🚀 Day 27/30 – Compact Object in JavaScript 🧹 | Remove Falsy Values Recursively Given an object or array obj, return a compact object. ✅ What is a Compact Object? It’s the same structure as the original — but with all keys containing falsy values removed. 🔎 Falsy Values in JavaScript: false 0 "" (empty string) null undefined NaN ⚠️ This removal applies: To the main object To nested objects To nested arrays You may assume: obj is valid JSON (output of JSON.parse) Arrays are treated as objects (indices are keys) 🧠 Example 1 obj = {"a": null, "b": [false, 1]} Output: {"b": [1]} 🧠 Example 2 obj = { "a": 0, "b": { "c": false, "d": 5 } } Output: { "b": { "d": 5 } } 💡 JavaScript Solution (Recursive) var compactObject = function(obj) { if (Array.isArray(obj)) { const result = []; for (let item of obj) { const compacted = compactObject(item); if (Boolean(compacted)) { result.push(compacted); } } return result; } else if (obj !== null && typeof obj === "object") { const result = {}; for (let key in obj) { const compacted = compactObject(obj[key]); if (Boolean(compacted)) { result[key] = compacted; } } return result; } return obj; }; 🔎 Why This Works Recursively traverse structure If array → build new filtered array If object → build new filtered object Only keep values where Boolean(value) === true Preserves structure while removing falsy values Time Complexity: O(n) Space Complexity: O(n) (n = total nested elements) 🧠 What This Teaches ✅ Recursive traversal ✅ Object vs Array handling ✅ Deep data transformation ✅ JSON structure processing ✅ Real-world data cleaning logic ⚡ Real-World Use Cases Cleaning API payloads Removing empty form fields Optimizing database writes Sanitizing user input Preprocessing configuration files #JavaScript #30DaysOfJavaScript #CodingChallenge #Recursion #DataStructures #FrontendDevelopment #WebDevelopment #SoftwareEngineering #CleanCode #LearnToCode #Programming #InterviewPrep #ProblemSolving #JSDeveloper #100DaysOfCode JavaScript remove falsy values Compact object JavaScript Remove null values from object JS Recursive object cleaning JS Deep object traversal JavaScript JSON data cleaning JavaScript JavaScript interview question recursion Remove empty keys from object JS

Complete JavaScript Road Map🔥 A-Z JavaScript👇 1.Variables ↳ var ↳ let ↳ const 2. Data Types ↳ number ↳ string ↳ boolean ↳ null ↳ undefined ↳ symbol 3.Declaring variables ↳ var ↳ let ↳ const 4.Expressions Primary expressions ↳ this ↳ Literals ↳ [] ↳ {} ↳ function ↳ class ↳ function* ↳ async function ↳ async function* ↳ /ab+c/i ↳ string ↳ ( ) Left-hand-side expressions ↳ Property accessors ↳ ?. ↳ new ↳ new .target ↳ import.meta ↳ super ↳ import() 5.operators ↳ Arithmetic Operators: +, -, *, /, % ↳ Comparison Operators: ==, ===, !=, !==, <, >, <=, >= ↳ Logical Operators: &&, ||, ! 6.Control Structures ↳ if ↳ else if ↳ else ↳ switch ↳ case ↳ default 7.Iterations/Loop ↳ do...while ↳ for ↳ for...in ↳ for...of ↳ for await...of ↳ while 8.Functions ↳ Arrow Functions ↳ Default parameters ↳ Rest parameters ↳ arguments ↳ Method definitions ↳ getter ↳ setter 9.Objects and Arrays ↳ Object Literal: { key: value } ↳ Array Literal: [element1, element2, ...] ↳ Object Methods and Properties ↳ Array Methods: push(), pop(), shift(), unshift(), splice(), slice(), forEach(), map(), filter() 10.Classes and Prototypes ↳ Class Declaration ↳ Constructor Functions ↳ Prototypal Inheritance ↳ extends keyword ↳ super keyword ↳ Private class features ↳ Public class fields ↳ static ↳ Static initialization blocks 11.Error Handling ↳ try, ↳ catch, ↳ finally (exception handling) ADVANCED CONCEPTS -------------------------- 12.Closures ↳ Lexical Scope ↳ Function Scope ↳ Closure Use Cases 13.Asynchronous JavaScript ↳ Callback Functions ↳ Promises ↳ async/await Syntax ↳ Fetch API ↳ XMLHttpRequest 14.Modules ↳ import and export Statements (ES6 Modules) ↳ CommonJS Modules (require, module.exports) 15.Event Handling ↳ Event Listeners ↳ Event Object ↳ Bubbling and Capturing 16.DOM Manipulation ↳ Selecting DOM Elements ↳ Modifying Element Properties ↳ Creating and Appending Elements 17.Regular Expressions ↳ Pattern Matching ↳ RegExp Methods: test(), exec(), match(), replace() 18.Browser APIs ↳ localStorage and sessionStorage ↳ navigator Object ↳ Geolocation API ↳ Canvas API 19.Web APIs ↳ setTimeout(), setInterval() ↳ XMLHttpRequest ↳ Fetch API ↳ WebSockets 20.Functional Programming ↳ Higher-Order Functions ↳ map(), reduce(), filter() ↳ Pure Functions and Immutability 21.Promises and Asynchronous Patterns ↳ Promise Chaining ↳ Error Handling with Promises ↳ Async/Await 22.ES6+ Features ↳ Template Literals ↳ Destructuring Assignment ↳ Rest and Spread Operators ↳ Arrow Functions ↳ Classes and Inheritance ↳ Default Parameters ↳ let, const Block Scoping 23.Browser Object Model (BOM) ↳ window Object ↳ history Object ↳ location Object ↳ navigator Object 24.Node.js Specific Concepts ↳ require() ↳ Node.js Modules (module.exports) ↳ File System Module (fs) ↳ npm (Node Package Manager) 25.Testing Frameworks ↳ Jasmine ↳ Mocha ↳ Jest Hope it helps 😊🌱

🚀 New Blog Alert: Understanding Variables, Data Types & Scope in JavaScript I’ve written a beginner-friendly blog explaining one of the most important foundations of JavaScript: 📦 What is a variable (the “labeled box” concept) 📊 Primitive vs Non-Primitive data types 🔎 Why choosing the right data type matters 🛠 Difference between var, let, and const 🌍 Understanding Global, Function, and Block Scope In this blog, I explained everything in simple terms with practical examples so that beginners can clearly understand how JavaScript handles data and memory. These concepts are the building blocks of writing clean, efficient, and dynamic JavaScript code. Mastering them makes advanced topics much easier to learn. If you're starting your JavaScript journey or revising fundamentals, this will definitely help. I’d love your feedback and thoughts! 💬 #JavaScript #WebDevelopment #Programming #Coding #FrontendDevelopment #Learning #Beginners 👉 Read the full blog here: https://lnkd.in/gtW4R4dG

𝗨𝗻𝗱𝗲𝗿𝗦𝘁𝗮𝗻𝗱𝗶𝗻𝗴 𝗩𝗮𝗿𝗶𝗮𝗯𝗹𝗲𝘀 𝗮𝗻𝗱 𝗗𝗮𝘁𝗮 𝗧𝘆𝗽𝗲𝘀 𝗶𝗻 𝗝𝗮𝗙𝗮𝗦𝗰𝗿𝗶𝗽𝘁 JavaScript seems easy at first. You write a few lines of code, run it, and everything works. But soon you realize that variables and data types are key. If you skip these basics, your code can become a guessing game. You will use console.log() everywhere just to understand what's happening. So, before moving deeper into JavaScript, understand how variables and data types work. Here's what you will learn: - What variables are and why they are needed - How to declare variables using var, let, and const - Primitive data types like string, number, and boolean - The differences between var, let, and const - What scope means in JavaScript A variable is a name used to store a value. Whenever you need that value, you can access it by using the variable's name. For example: let count = 1; Here, count is the variable name and 1 is the value stored in that variable. Good variable names should be short and descriptive. Examples: clickButton, addNumbers, userAge. A good variable name should be self-explanatory so that someone reading your code can easily understand what it represents. To create a variable in JavaScript, use one of these keywords: let, const, var. Example: let count = 1; This statement declares a variable called count and assigns the value 1 to it. In JavaScript, data types define what kind of value a variable can store. Think of data types like containers in real life. JavaScript data types are broadly divided into two categories: - Primitive data types: string, number, boolean, undefined, null - Other data types: BigInt, Symbol, Object, Array, Function For now, let's focus on primitive data types. A string represents text and is written inside quotes. let message = "Like this blog"; Numbers can be integers or decimals. let marks = 95; let price = 99.99; A boolean value can only be true or false. let isLoggedIn = true; let isAdmin = false; When a variable is declared but no value is assigned, its value becomes undefined. let x; null means a variable intentionally has no value. let data = null; Variables and data types are the foundation of JavaScript. If you understand these concepts well, learning more advanced topics will become much easier. Take time to practice writing small examples and experimenting with console.log() to see how values change. Source: https://lnkd.in/gdNskB_J Optional learning community: https://t.me/GyaanSetuAi

1. What are the different data types in JavaScript • String, Number, Boolean, Undefined, Null, Object, Symbol, BigInt Use `typeof` to check a variable’s type. 2. What is the difference between == and === • `==` compares values with type coercion • `===` compares both value and type (strict equality) 3. What is hoisting in JavaScript Variables and function declarations are moved to the top of their scope before execution. Only declarations are hoisted, not initializations. 4. What is a closure A function that remembers variables from its outer scope even after the outer function has finished executing. Example: function outer() { let count = 0; return function inner() { count++; console.log(count); }; } const counter = outer(); counter(); // 1 ``` 5. What is the difference between var, let, and const • `var`: function-scoped, can be re-declared • `let`: block-scoped, can be updated • `const`: block-scoped, cannot be re-assigned 6. What is event delegation Using a single event listener on a parent element to handle events from its child elements using `event.target`. 7. What is the use of promises in JavaScript Handle asynchronous operations. States: pending, fulfilled, rejected Example: ```js fetch(url) .then(res => res.json()) .catch(err => console.error(err)); ``` 8. What is async/await Syntactic sugar over promises for cleaner async code Example: ```js async function getData() { const res = await fetch(url); const data = await res.json(); console.log(data); } ``` 9. What is the difference between null and undefined • `null`: intentional absence of value • `undefined`: variable declared but not assigned 10. What is the use of arrow functions* Shorter syntax, no own `this` binding Example: ```js const add = (a, b) => a + b; ``` 11. What is the DOM Document Object Model — represents HTML as a tree structure. JavaScript can manipulate it using methods like `getElementById`, `querySelector`, etc. 12. What is the difference between call, apply, and bind • `call`: invokes function with arguments passed individually • `apply`: invokes function with arguments as array • `bind`: returns a new function with bound context 13. What is the use of setTimeout and setInterval • `setTimeout`: runs code once after delay • `setInterval`: runs code repeatedly at intervals 14. What is the difference between stack and heap • Stack: stores primitive values and function calls • Heap: stores objects and reference types 15. What is the use of the spread operator (...) Expands arrays/objects or merges them Example: ```js const arr = [1, 2]; const newArr = [...arr, 3]; // [1, 2, 3] ``` 16. What is the difference between map and forEach • `map`: returns a new array • `forEach`: performs action but returns undefined 17. What is the use of localStorage and sessionStorage • `localStorage`: persists data even after browser is closed • `sessionStorage`: persists data only for session

JavaScript Was Hard I’d hear from so many people that JavaScript is confusing because of its inconsistencies. But once I learned these concepts, it became so much easier to me : 𝟭. 𝗩𝗮𝗿𝗶𝗮𝗯𝗹𝗲𝘀 𝗮𝗻𝗱 𝗗𝗮𝘁𝗮 𝗧𝘆𝗽𝗲𝘀:  -> Declaration (`var`, `let`, `const`)  -> Primitive data types (strings, numbers, booleans, null, undefined)  -> Complex data types (arrays, objects, functions)  -> Type coercion and conversion 𝟮. 𝗢𝗽𝗲𝗿𝗮𝘁𝗼𝗿𝘀 𝗮𝗻𝗱 𝗘𝘅𝗽𝗿𝗲𝘀𝘀𝗶𝗼𝗻𝘀:  -> Arithmetic operators (+, -, *, /, %)  -> Assignment operators (=, +=, -=, *=, /=, %=)  -> Comparison operators (==, ===, !=, !==, <, >, <=, >=)  -> Logical operators (&&, || , !)  -> Ternary operator (conditional operator) 𝟯. 𝗖𝗼𝗻𝘁𝗿𝗼𝗹 𝗙𝗹𝗼𝘄:  -> Conditional statements (`if`, `else if`, `else`)  -> Switch statement  -> Loops (`for`, `while`, `do-while`)  -> Break and continue statements 𝟰. 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝘀:  -> Function declaration and expression  -> Arrow functions  -> Parameters and arguments  -> Return statement  -> Scope (global scope, function scope, block scope)  -> Closures  -> Callback functions 𝟱. 𝗔𝗿𝗿𝗮𝘆𝘀 𝗮𝗻𝗱 𝗢𝗯𝗷𝗲𝗰𝘁𝘀:  -> Creation and initialization  -> Accessing and modifying elements  -> Array methods (push, pop, shift, unshift, splice, slice, concat, etc.)  -> Object properties and methods  -> JSON (JavaScript Object Notation) 𝟲. 𝗖𝗹𝗮𝘀𝘀𝗲𝘀 𝗮𝗻𝗱 𝗣𝗿𝗼𝘁𝗼𝘁𝘆𝗽𝗲𝘀:  -> Class syntax (constructor, methods, static methods)  -> Inheritance  -> Prototypal inheritance  -> Object.create() and Object.setPrototypeOf() 𝟳. 𝗘𝗿𝗿𝗼𝗿 𝗛𝗮𝗻𝗱𝗹𝗶𝗻𝗴:  -> Try...catch statement  -> Throwing errors  -> Error objects (Error, SyntaxError, TypeError, etc.)  -> Error handling best practices 𝟴. 𝗔𝘀𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁:  -> Callbacks  -> Promises (creation, chaining, error handling)  -> Async/await syntax  -> Fetch API  -> setTimeout() and setInterval() 𝟵. 𝗗𝗢𝗠 𝗠𝗮𝗻𝗶𝗽𝘂𝗹𝗮𝘁𝗶𝗼𝗻:  -> Selecting DOM elements  -> Modifying element properties and attributes  -> Creating and removing elements  -> Traversing the DOM 𝟭𝟬. 𝗘𝘃𝗲𝗻𝘁 𝗛𝗮𝗻𝗱𝗹𝗶𝗻𝗴:  -> Adding event listeners  -> Event objects  -> Event propagation (bubbling and capturing)  -> Event delegation 𝟭𝟭. 𝗠𝗼𝗱𝘂𝗹𝗲𝘀 𝗮𝗻𝗱 𝗠𝗼𝗱𝘂𝗹𝗮𝗿𝗶𝘇𝗮𝘁𝗶𝗼𝗻:  -> ES6 modules (import/export)  -> CommonJS modules (require/module.exports)  -> Module bundlers (Webpack, Rollup) 𝟭𝟮. 𝗕𝗿𝗼𝘄𝘀𝗲𝗿 𝗖𝗼𝗺𝗽𝗮𝘁𝗶𝗯𝗶𝗹𝗶𝘁𝘆 𝗮𝗻𝗱 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲:  -> Cross-browser compatibility  -> Performance optimization techniques  -> Minification and code splitting  -> Lazy loading If you're struggling with JavaScript, understanding these topics can make the journey a lot easier! I've Created MERN Stack Guide for beginners to experienced,  𝗚𝗲𝘁 𝘁𝗵𝗲 𝗚𝘂𝗶𝗱𝗲 𝗵𝗲𝗿𝗲 - https://lnkd.in/d6EdjzCs Follow Mohit Decodes on YouTube: https://lnkd.in/dEqvkECV Keep Coding, Keep Building!