Function Reference vs Function Call in JavaScript

🚀 A Subtle JavaScript Array Bug This looks harmless: const arr = [1, 2, 3]; const copy = arr; copy.push(4); console.log(arr); Output? [1, 2, 3, 4] Why did the original array change? Because arrays (like objects) are reference types in JavaScript. copy is not a new array. It points to the same memory location. This can create unexpected side effects in larger applications. ✅ Better approach: const arr = [1, 2, 3]; const copy = [...arr]; copy.push(4); console.log(arr); // [1, 2, 3] Now you’re working with a new reference. In JavaScript, copying data is not always copying values. Sometimes it’s copying references. Understanding this saves hours of debugging. What JS concept took you the longest to truly understand? #javascript #frontenddeveloper #webdevelopment #coding #softwareengineering

🗓️ Day 61/100 – Understanding the JavaScript Scope Chain Today I finally understood why sometimes variables work… and sometimes they suddenly don’t. The answer = Scope Chain At first I thought JavaScript just “searches everywhere” for a variable. But no — it actually follows a very specific path. JavaScript looks for variables in this order: 1️⃣ Current function scope 2️⃣ Parent function scope 3️⃣ Global scope It climbs upward step-by-step until it finds the variable. This is called the scope chain. --- Example idea: A function inside a function inside a function… The inner function can access outer variables But the outer function cannot access inner variables So access flows inside → outside Never outside → inside --- Big realization today 💡 Most bugs I faced earlier were not logic mistakes… They were scope mistakes. If you understand scope chain: • Closures make sense • Hoisting becomes clearer • Debugging becomes easier JavaScript stops feeling random — It starts feeling predictable. Slowly the language is revealing its rules, not magic. #100DaysOfCode #JavaScript #Scope #WebDevelopment #Frontend #LearningInPublic

Day 3/30 JavaScript Challenge: Giving the Browser a Voice! 🗣️ I just finished Day 3 of my 30-day JavaScript series, and today was all about the Web Speech API. I built a Text-to-Voice application that turns any typed input into spoken words instantly! It’s amazing how much functionality is built right into the browser without needing any external libraries or APIs. Key Learnings Today: => Using SpeechSynthesisUtterance to handle voice properties. => Manipulating the DOM to capture user input. => Creating a clean, responsive UI with CSS gradients and transitions. Live Demo: https://lnkd.in/decEYAvw Onward to Day 4! ⚡ #JavaScript #WebDevelopment #CodingChallenge #100DaysOfCode #Frontend #LearningToCode

Reversing a string in JavaScript can be done in more than one way. I revisited this problem today and tried three approaches, each with a different mindset: // 1. Using built-in methods const reverse1 = (str) => str.split("").reverse().join(""); // 2. Using a loop (more control) function reverse2(str) {  let result = "";  for (let i = str.length - 1; i >= 0; i--) {   result += str[i];  }  return result; } // 3. Using reduce (functional style) const reverse3 = (str) =>  str.split("").reduce((acc, char) => char + acc, ""); console.log(reverse1("hello")); //"olleh" console.log(reverse2("hello")); //"olleh" console.log(reverse3("hello")); //"olleh" Methods I used: • Built-in methods → concise and readable • Loop → full control and clarity • reduce → functional and expressive This reminded me that in real projects, how you think about a problem matters as much as the answer itself. Still learning, still building, still showing up. #JavaScript #FrontendDevelopment #LearningInPublic #JuniorDeveloper

Why JavaScript doesn't crash when you call a function before defining it. 🧠 I recently dove deep into the "Execution Context" of JavaScript, and the concept of Hoisting finally clicked. If you’ve ever wondered why this code works: greet(); function greet() { console.log("Hello LinkedIn!"); } ...the answer lies in how the JS Engine treats your code before it even runs a single line. The Two-Phase Secret: Memory Creation Phase: Before the "Thread of Execution" starts, JavaScript scans your code and allocates memory for variables and functions. Functions are stored in their entirety in the Variable Environment. Variables (var) are stored as undefined. Code Execution Phase: Now, the engine runs the code line-by-line. Because the function is already sitting in the memory component, calling it on line 1 is no problem! The Key Takeaway: Hoisting isn't "moving code to the top" (that’s a common myth). It’s actually the result of the Memory Creation Phase setting aside space for your declarations before execution starts. Understanding the "how" behind the "what" makes debugging so much easier. #JavaScript #WebDevelopment #CodingTips #Hoisting #ProgrammingConcepts

🟡 Tuesday – JavaScript Concept You don’t fully understand JavaScript until you understand closures. Quick example: function outer() { let count = 0; return function inner() { count++; console.log(count); }; } const counter = outer(); counter(); // 1 counter(); // 2 Why does it remember count? Because JavaScript functions carry their lexical scope with them. Closures power: • React hooks • Event handlers • Memoization • Data privacy patterns If closures confuse you, debugging React will always feel hard. Master JS. React becomes easier. See you tomorrow for AI Integration Wednesday 🤖 #JavaScript #FrontendDevelopment #JSConcepts

𝐓𝐨𝐝𝐚𝐲 𝐈 𝐫𝐞𝐯𝐢𝐬𝐢𝐭𝐞𝐝 𝐚 𝐜𝐨𝐫𝐞 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐜𝐨𝐧𝐜𝐞𝐩𝐭 𝐭𝐡𝐚𝐭 𝐪𝐮𝐢𝐞𝐭𝐥𝐲 𝐚𝐟𝐟𝐞𝐜𝐭𝐬 𝐜𝐨𝐝𝐞 𝐪𝐮𝐚𝐥𝐢𝐭𝐲: 𝒗𝒂𝒓 𝒗𝒔 𝒍𝒆𝒕 𝒗𝒔 𝒄𝒐𝒏𝒔𝒕 👇 var x = 10; // function-scoped let y = 20; // block-scoped const z = 30; // block-scoped & cannot be reassigned Key differences that matter in real projects: > "var" is function-scoped and can lead to unexpected bugs due to hoisting. > "let" provides block scope, making control flow safer. > "const" enforces immutability of the reference, improving readability. Modern JavaScript favors const by default, uses let when reassignment is required and avoids var in most cases. Back to fundamentals — with a modern JS lens. Any insights or suggestions are welcome🙂 #DAY6 #JavaScript #WebDevelopment #FrontendDevelopment #LearningInPublic #dailyChallenge

Stop Shipping "Ghost Code" 👻 – Meet Knip! Is your codebase becoming a graveyard for unused files and "just in case" exports? 🏚️ As projects grow, we often leave behind dead code: exports that aren't imported anywhere, dependencies that are no longer used, and files that are just taking up space. This doesn't just look messy— hurts your bundle size, slows down CI/CD pipelines, and confuses new developers. Enter Knip ✂️ – the ultimate "dust-buster" for your JavaScript and TypeScript projects. What does Knip actually find? ✅ Unused Files: Clean up those orphaned .ts or .js files. ✅ Unused Dependencies: Identify packages in package.json that are just sitting there. ✅ Unused Exports: Find functions/types you exported but never actually used. ✅ Duplicate Exports: Spot redundant code before it becomes a headache. Why I’m a fan: Unlike many other tools, Knip is incredibly smart. It understands monorepos, supports major frameworks (React, Next.js, Svelte, etc.), and integrates seamlessly with your existing tools like ESLint and Prettier. How to get started in 10 seconds: To install: `npm install knip` To check: `npx knip` That’s it. No complex configuration is needed to get your first report. A clean codebase isn’t just about aesthetics; it’s about performance and maintainability. If you haven't audited your project recently, give Knip a try today! Have you used Knip before? What’s the biggest "dead code" monster you’ve uncovered? Let me know in the comments! 👇 #WebDevelopment #TypeScript #JavaScript #CleanCode #OpenSource #SoftwareEngineering #WebPerf #Knip Thanks to Lars Kappert

🔍 "this" behaves differently in arrow functions. ❓ Why does this not bind in arrow functions—and when is that useful? In JavaScript, the value of this usually depends on how a function is called. But arrow functions work differently. 👉 Arrow functions do NOT have their own this. Instead, they inherit this from their surrounding (lexical) scope. 🔹 Simple example const user = { name: "Isnaan", greet: function () { setTimeout(() => { console.log(this.name); }, 1000); } }; user.greet(); // "Isnaan" Here’s why this works: greet() is a normal function, so this refers to user. The arrow function inside setTimeout inherits this from greet, instead of creating its own. ❌ What happens without arrow functions? setTimeout(function () { console.log(this.name); }, 1000); // undefined ❌ Because this now points to the global object. ✅ When is this useful? Inside callbacks (setTimeout, event handlers, promises) In React components and hooks When you want predictable this without .bind() 💡 Takeaway: Arrow functions keep this simple and predictable—but avoid them as object methods when you need dynamic this #learnwithisnaan #mernstackdeveloper #JavaScriptTips #ModernJavaScript #ES6 #DeveloperTips #CleanCode #JSDevelopers

Day 57/100 — The JavaScript Event Loop finally made sense 🔄 For a long time I used setTimeout, Promise, and async/await… but honestly — I never truly understood why JavaScript behaves the way it does. Today I learned about the Event Loop — and everything clicked. JavaScript is single-threaded. So how does it still handle multiple tasks at once? Because of 3 things working together: 🧠 Call Stack – where code runs step by step 📬 Web APIs – timers, DOM events, fetch requests handled outside JS 📋 Callback Queue / Microtask Queue – waiting tasks And the Event Loop keeps checking: “Is the call stack empty? If yes → push the next task.” The biggest surprise for me: console.log("Start"); setTimeout(() => console.log("Timeout"), 0); Promise.resolve().then(() => console.log("Promise")); console.log("End"); Output is NOT what beginners expect: Start End Promise Timeout Because microtasks (Promises) run before macrotasks (setTimeout) 💡 Realization: JavaScript is not slow… I just didn’t understand its scheduling system. Now async code feels predictable instead of magical. Learning fundamentals is like turning chaos into logic. #100DaysOfCode #JavaScript #EventLoop #AsyncJS #WebDevelopment #LearningInPublic