JavaScript Array Methods: slice(), splice(), split() Explained

Day 23/50 – JavaScript Interview Question? Question: What is memoization and how do you implement it? Simple Answer: Memoization is an optimization technique that caches function results based on input arguments. When the function is called again with the same arguments, it returns the cached result instead of recalculating. 🧠 Why it matters in real projects: Memoization dramatically improves performance for expensive computations like recursive Fibonacci, API response parsing, or complex filtering/sorting. React's useMemo and React.memo are built on this principle to prevent unnecessary re-renders. 💡 One common mistake: Over-memoizing everything, which adds memory overhead. Only memoize truly expensive operations. Also, not considering cache size limits, which can cause memory leaks in long-running applications. 📌 Bonus: // Basic memoization implementation function memoize(fn) { const cache = new Map(); return function(...args) { const key = JSON.stringify(args); if (cache.has(key)) { console.log('Returning cached result'); return cache.get(key); } const result = fn.apply(this, args); cache.set(key, result); return result; }; } // Usage: Expensive calculation const fibonacci = memoize((n) => { if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2); }); fibonacci(40); // Calculated once fibonacci(40); // Instant! (from cache) // React example const expensiveComponent = React.memo(({ data }) => { // Only re-renders if data changes }); #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews

Day 24/50 – JavaScript Interview Question? Question: What is the difference between Object.freeze(), Object.seal(), and Object.preventExtensions()? Simple Answer: Object.freeze() makes an object completely immutable (can't add, delete, or modify properties). Object.seal() prevents adding/deleting properties but allows modifying existing ones. Object.preventExtensions() only prevents adding new properties. 🧠 Why it matters in real projects: These methods enforce immutability and data integrity, crucial for functional programming, Redux state management, and preventing accidental mutations in configuration objects or constants. 💡 One common mistake: Thinking Object.freeze() creates a deep freeze. It only freezes the top level—nested objects remain mutable. You need recursive freezing for complete immutability. 📌 Bonus: // Object.freeze() - completely immutable const frozen = Object.freeze({ name: 'Alice', age: 30 }); frozen.age = 31; // ✗ Ignored (or throws in strict mode) frozen.city = 'NYC'; // ✗ Can't add delete frozen.name; // ✗ Can't delete // Object.seal() - modify only const sealed = Object.seal({ name: 'Bob', age: 25 }); sealed.age = 26; // ✓ Can modify sealed.city = 'LA'; // ✗ Can't add delete sealed.name; // ✗ Can't delete // Object.preventExtensions() - most permissive const limited = Object.preventExtensions({ name: 'Charlie' }); limited.name = 'Chad'; // ✓ Can modify limited.age = 30; // ✗ Can't add delete limited.name; // ✓ Can delete // Deep freeze for nested objects function deepFreeze(obj) { Object.freeze(obj); Object.values(obj).forEach(val => { if (typeof val === 'object' && val !== null) { deepFreeze(val); } }); } #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews

🚀 JavaScript Interview Prep Series — Day 12 Topic: Error Handling in JavaScript (try, catch, finally) Continuing my JavaScript interview revision series, today’s focus was on a very important but often overlooked topic: 👉 Error Handling using try–catch–finally Good developers don’t just write code that works — they write code that handles failures gracefully. 🎪 Real-World Example: Circus Safety Net Imagine a trapeze performance in a circus. 1️⃣ Acrobat attempts a risky trick (TRY). 2️⃣ If something goes wrong, the safety net catches them (CATCH). 3️⃣ After performance, crew resets equipment no matter what (FINALLY). Whether success or failure, cleanup always happens. JavaScript error handling works the same way. 💻 Practical JavaScript Example async function fetchUser() { try { console.log("Fetching user data..."); const response = await fetch("https://lnkd.in/dAktZdHe"); if (!response.ok) { throw new Error("Failed to fetch data"); } const data = await response.json(); console.log("User:", data); } catch (error) { console.error("Something went wrong:", error.message); } finally { console.log("Cleanup: Stop loader / close connection"); } } fetchUser(); Execution Flow ✅ If request succeeds → catch block is skipped ❌ If request fails → catch handles error 🔁 finally runs in both cases ✅ Why Interviewers Ask This Because it tests: • Defensive coding skills • Async error handling understanding • Custom error throwing • Production-ready code thinking 📌 Goal: Share daily JavaScript concepts while preparing for interviews and help others revise fundamentals. Next topics: Event delegation, closures deep dive, execution context, and more. Let’s keep learning in public 🚀 #JavaScript #InterviewPreparation #ErrorHandling #AsyncJavaScript #Frontend #WebDevelopment #LearningInPublic #Developers #CodingJourney

Common JavaScript Interview Question 🧠 💡 Scenario: You have an array of users: const users = [ { name: "Mohit", city: "Delhi" }, { name: "Amit", city: "Delhi" }, { name: "Rohit", city: "Noida" } ]; The interviewer asks: “How would you group these users by their city using JavaScript?” 👀 Simple-looking, but it tests: • Mastery of array methods • Understanding of reduce and object manipulation • Problem-solving mindset for real-world data 💡 Tip: Questions like this aren’t about memorizing syntax. They’re about how you think about transforming data efficiently 🚀 #JavaScript #JSInterview #FullStackInterview #CodingInterview #WebDevelopment #MERNStack #ProblemSolving #FrontendDeveloper

🚀 **JavaScript: var vs let vs const (Explained Clearly)** If you're learning JavaScript or preparing for interviews, this is a concept you MUST understand 👇 --- ## 🔹 var ```js var name = "Ali"; var name = "Ahmed"; // ✅ Allowed name = "John"; // ✅ Allowed ``` ✔ Function scoped ✔ Can be redeclared ✔ Can be updated ⚠ Problem: Can cause unexpected bugs due to scope issues. --- ## 🔹 let ```js let name = "Ali"; let name = "Ahmed"; // ❌ Error name = "John"; // ✅ Allowed ``` ✔ Block scoped ❌ Cannot be redeclared in same scope ✔ Can be updated ✅ Use when the value needs to change. --- ## 🔹 const ```js const name = "Ali"; name = "Ahmed"; // ❌ Error ``` ✔ Block scoped ❌ Cannot be redeclared ❌ Cannot be reassigned ✅ Use by default in modern JavaScript. --- ## 💡 Best Practice (Modern JS Rule) 👉 Use **const** by default 👉 Use **let** when value needs to change 👉 Avoid **var** --- ### 🎯 Interview Tip Most scope-related bugs happen because of `var`. Understanding block scope vs function scope makes you a stronger developer. --- https://lnkd.in/gzGAbU8A 💬 Quick question: Do you still use `var` in your projects? #JavaScript #FrontendDevelopment #WebDevelopment #Programming #CodingInterview #JSConcepts #SoftwareEngineering #FullStackDeveloper #LearnToCode #DeveloperTips #100DaysOfCode #TechCommunity

Day 28/50 – JavaScript Interview Question? Question: What is destructuring in JavaScript? Simple Answer: Destructuring is a syntax that unpacks values from arrays or properties from objects into distinct variables. It provides a concise way to extract multiple values in a single statement. 🧠 Why it matters in real projects: Destructuring makes code cleaner and more readable, especially with React props, API responses, and function parameters. It's ubiquitous in modern JavaScript and reduces boilerplate code significantly. 💡 One common mistake: Trying to destructure null or undefined, which throws an error. Always provide default values or check for existence when destructuring data from APIs or external sources. 📌 Bonus: // Array destructuring const [first, second, ...rest] = [1, 2, 3, 4, 5]; console.log(first); // 1 console.log(second); // 2 console.log(rest); // [3, 4, 5] // Object destructuring const user = { name: 'Alice', age: 30, city: 'NYC' }; const { name, age } = user; console.log(name); // "Alice" // Renaming variables const { name: userName, age: userAge } = user; // Default values (prevents undefined) const { country = 'USA' } = user; console.log(country); // "USA" // Nested destructuring const data = { user: { profile: { email: 'a@b.com' } } }; const { user: { profile: { email } } } = data; // React props destructuring function UserCard({ name, age, onDelete }) { return <div>{name}, {age}</div>; } // Function parameters function displayUser({ name, age = 18 }) { console.log(`${name} is ${age}`); } // Common mistake - destructuring undefined const { x } = null; // ✗ TypeError! const { x } = null || {}; // ✓ Safe with fallback #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews #ES6 #Destructuring #WebDev #InterviewPrep

🚀 JavaScript Interview Prep Series — Day 16 Topic: Map, Set & WeakMap in JavaScript Continuing my JavaScript interview revision journey, today I focused on modern JavaScript data structures: 👉 Map, Set, and WeakMap These are powerful alternatives to traditional objects and arrays for managing data efficiently. 🏨 Real-World Example 1️⃣ Map — Hotel Reception System At a hotel reception: Room number acts as a key Guest information is the value Receptionist can quickly fetch guest info using the room number. Similarly, Map stores key-value pairs, and keys can be any data type. 2️⃣ Set — VIP Guest List At a club entrance: Each guest name can appear only once Duplicate entries are rejected Set works the same way — it stores only unique values. 3️⃣ WeakMap — Temporary Visitor Badges Visitors receive temporary badges: Once they leave, badges become invalid automatically System cleans up unused badges WeakMap automatically removes entries when keys (objects) are no longer referenced. 💻 Practical JavaScript Examples Map Example const guestMap = new Map(); guestMap.set("room101", "John"); guestMap.set("room102", "Alice"); console.log(guestMap.get("room101")); console.log(guestMap.size); Set Example const guests = new Set(); guests.add("John"); guests.add("Alice"); guests.add("John"); // ignored console.log(guests); WeakMap Example const cache = new WeakMap(); let user = { name: "Raja" }; cache.set(user, "Session data"); user = null; // automatically cleanes ✅ Why Interviewers Ask This Because it tests: • Knowledge of modern JS features • Efficient data handling • Memory management concepts • Choosing correct data structure 📌 Goal: Share daily JavaScript concepts while revising fundamentals and learning in public. Next topics: WeakSet, Event Delegation, Deep Copy vs Shallow Copy, and more. Let’s keep learning consistently 🚀 #JavaScript #InterviewPreparation #Map #Set #WeakMap #Frontend #WebDevelopment #LearningInPublic #Developers #CodingJourney

Day 27/50 – JavaScript Interview Question? Question: What is the difference between for...in and for...of loops? Simple Answer: for...in iterates over enumerable property keys (strings) of an object, including inherited properties. for...of iterates over iterable values (like arrays, strings, Maps, Sets) and doesn't work with plain objects. 🧠 Why it matters in real projects: Using the wrong loop causes bugs. for...in on arrays gives you indices as strings (not ideal), while for...of gives values directly. For objects, use Object.keys/values/entries with for...of instead of for...in. 💡 One common mistake: Using for...in on arrays and expecting numeric indices or values, but getting string keys. Also, for...in can iterate over inherited properties from the prototype chain. 📌 Bonus: const arr = ['a', 'b', 'c']; // for...in - keys (indices as strings) for (let key in arr) { console.log(key); // "0", "1", "2" (strings!) console.log(typeof key); // "string" } // for...of - values for (let value of arr) { console.log(value); // "a", "b", "c" } // Object iteration const person = { name: 'Alice', age: 30 }; // for...in works on objects for (let key in person) { console.log(key, person[key]); // "name Alice", "age 30" } // for...of doesn't work on plain objects for (let value of person) {} // ✗ TypeError! // Better object iteration: for (let [key, value] of Object.entries(person)) { console.log(key, value); // ✓ Best practice } // Prototype pollution issue with for...in Array.prototype.custom = 'surprise'; for (let key in arr) { console.log(key); // "0", "1", "2", "custom" - Oops! } #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews #Loops #ES6

🤔 Ever wanted to “lock” a JavaScript object… but realized there are 3 different locks? Object.preventExtensions, Object.seal, and Object.freeze all restrict objects, but at different levels. 🧠 JavaScript interview question What’s the difference between preventExtensions, seal, and freeze? ✅ Short answer • preventExtensions(obj) → can’t add new props • seal(obj) → can’t add OR delete props (and can’t reconfigure them) • freeze(obj) → can’t add, delete, reconfigure, OR change values (for data props) 🔍 A bit more detail • preventExtensions Blocks adding new properties Existing properties may still be deleted or changed (depends on descriptors) • seal Makes all existing properties non-configurable So: no add, no delete, no redefining (like changing enumerable/configurable) Values can still change if the property is writable • freeze Seals + makes data properties non-writable So: values can’t change either ⚠️ Small but important All 3 are shallow. Nested objects are still mutable unless you freeze them too. 💻 Example const a = { x: 1 }; Object.preventExtensions(a); a.y = 2; // ignored (or throws in strict mode) delete a.x; // allowed if x is configurable const b = { x: 1 }; Object.seal(b); b.x = 2; // ✅ works (if writable) delete b.x; // ❌ fails const c = { x: 1 }; Object.freeze(c); c.x = 2; // ❌ ignored (or throws in strict mode) 👀 Quick mental model • preventExtensions = “no new keys” • seal = “no new keys, no removing keys” • freeze = “read-only object (top level)” #javascript #frontend #webdev #interviewprep #reactjs #programming #softwareengineering

🚀 JavaScript Interview Prep Series — Day 7 Topic: Currying in JavaScript (Made Simple) Continuing my JavaScript interview prep series, today’s topic is: 👉 Currying in JavaScript Currying is often asked in interviews and used in functional programming patterns, but it’s actually simpler than it sounds. 🥪 Real-World Example: Sandwich Customization Imagine ordering a sandwich in steps: 1️⃣ Choose bread 2️⃣ Choose protein 3️⃣ Choose toppings At each step, your previous choice is remembered until the sandwich is complete. You don’t choose everything at once — choices are applied step by step. JavaScript works similarly with currying: A function takes one argument at a time and returns another function that takes the next argument. 💻 Currying Example in JavaScript Normal function Copy code Javascript function makeSandwich(bread, protein, toppings) { return `${bread} sandwich with ${protein} and ${toppings}`; } Curried version const makeSandwich = (bread) => (protein) => (toppings) => `${bread} sandwich with ${protein} and ${toppings}`; const wheatBase = makeSandwich("Wheat"); const turkeySandwich = wheatBase("Turkey"); console.log(turkeySandwich("Lettuce & Tomato")); Output Wheat sandwich with Turkey and Lettuce & Tomato Each step locks in previous values. ✅ Why Currying Matters in Interviews Currying helps with: • Partial application • Reusable functions • Functional programming patterns • Cleaner data pipelines • Framework-level optimizations 📌 Goal: Share daily JavaScript interview concepts while revising fundamentals and learning in public. Next topics: Debouncing, Throttling, Hoisting deep dive, Execution Context, and more. Let’s keep building consistency 🚀 #JavaScript #InterviewPreparation #Currying #FunctionalProgramming #Frontend #WebDevelopment #LearningInPublic #Developers #CodingJourney