JavaScript Functions: Objects, Types, and More

JavaScript objects don’t behave the way many people expect. ✔ The output of the code in the picture will be: [  { id: 1, name: "Updated John" },  { id: 2, name: "Jane" } ] This surprises many people, but it is completely expected behavior in JavaScript. 🤔Why this happens? → Arrays in JavaScript store references to objects → Array.find() returns the actual object, not a copy → Objects are reference types, not value types So after this line: const foundUser = users.find(u => u.id === 1); 👉 Both of these point to the same object in memory: users[0] ────┐        ├──► { id: 1, name: "John" } foundUser ───┘ 👉 When you do: foundUser.name = "Updated John"; You are mutating that shared object. Since the array holds a reference to the same object, the array reflects the change. 💡 A safer approach is to update immutably (create a new array and a new object): const updatedUsers = []; const updatedUsers = users.map(user =>  user.id === 1 ? { ...user, name: "Updated John" } : user ); ▶ But remember: { ...user } is a shallow copy. If user contains nested objects, those nested references are still shared. In that case, you must copy the nested structure you modify, or use a deep clone. ▶ There is another option which is called structuredClone(). This function returns a deep copy of the object you are passing as an argument. const copy = structuredClone(user); Now mutating copy won’t affect the original object. #JavaScript #WebDevelopment #Coding

🚨  Still struggling with JavaScript Functions? Choosing the right function style can make your code look like a pro’s or a total mess. Let’s break down the 3 most common types so you never get confused again. 👇 🔵 Function Declaration (The Classic) function greet(name) { return `Hello, ${name}!`; } - Traditional way of writing functions. - Hoisted: You can call it even before you define it in your code. - Best for general-purpose utility functions. 🟢 Arrow Function (The Modern Standard) const greet = (name) => `Hello, ${name}!`; - Concise syntax: Saves lines of code. - Implicit Return: If it's one line, you don't even need the return keyword! - this binding: Does not have its own this (perfect for callbacks and React). 🟡 Return Functions (The Logic Powerhouse) function add(a, b) { return a + b; // Stops execution and sends a value back } - The "Output" tool: Use return when you need the function to give you a result to use later. - Pro Tip: Anything written after a return statement inside a function will never run! ✅ When to use what? - Use Arrow Functions for almost everything in modern projects (cleaner & better for scope). - Use Function Declarations if you need "hoisting" or want a more descriptive, traditional structure. - Always use return if your function is meant to calculate or "get" a value for another part of your code. Summary: Stop writing long functions when an arrow function can do it in one line! 🚀 👉 Follow Rahul R. Patil for more clear and simple JavaScript tips! #JavaScript #WebDevelopment #CodingTips #SoftwareEngineering #RahulPatil

Day 3: JavaScript Hoisting — Magic or Logic? Yesterday, we learned that JavaScript creates memory for variables before it executes the code. Today, let’s see the most famous (and sometimes confusing) result of that: Hoisting. What is Hoisting? Hoisting is a behavior where you can access variables and functions even before they are initialized in your code without getting an error. Wait... why didn't it crash? 🤔 If you try this in other languages, it might throw an error. But in JS: During Memory Phase: JS saw var x and gave it the value undefined. It saw the function getName and stored its entire code. During Execution Phase: When it hits console.log(x), it looks at memory and finds undefined. When it hits getName(), it finds the function and runs it! ⚠️ The "Let & Const" Trap Does hoisting work for let and const? Yes, but with a catch! They are hoisted, but they are kept in a "Temporal Dead Zone". If you try to access them before the line where they are defined, JS will throw a ReferenceError. Pro Tip: Always define your variables at the top of your scope to avoid "Hoisting bugs," even though JS "magically" handles them for you. Crucial Takeaway: Hoisting isn't code physically moving to the top; it’s just the JS Engine reading your "ingredients" before "cooking" (Phase 1 vs Phase 2). Did you know about the Temporal Dead Zone? Let me know in the comments! #JavaScript #WebDev #100DaysOfCode #Hoisting #CodingTips #FrontendDeveloper

🧠 A small JavaScript lesson I learned today While practicing JavaScript, I had a confusing moment. I wrote this HTML: <div id="displayData">Hello</div> In JavaScript, I forgot to select the element. I didn’t write: document.getElementById("displayData"); But I still wrote: displayData.innerHTML = "Hi"; And surprisingly… it worked 😲 For a moment, I wondered if JavaScript was doing magic. Here’s what’s really happening 👇 Browsers sometimes create a shortcut. If an element has an id, the browser may expose it as a global variable. ⚠️ This is not a JavaScript rule — just browser behavior. It can break in strict mode, frameworks, or real-world projects. ✅ The safe and correct way is always: const displayData = document.getElementById("displayData"); Lesson: Just because something works doesn’t mean it’s correct. Understanding why it works is what makes you a better developer. #JavaScript #LearningInPublic #WebDevelopment #BeginnerTips #CodingJourney #Brototype #BCR69 #BuildTogetherCommunity

What is Scope Chain in JavaScript? Understanding how JavaScript looks for variables helps everything make more sense. 🔹 Knowing why inner functions can access outer variables 🔹 Debugging undefined issues with confidence 🔹 Writing clean, predictable and bug-free JS code ❌ The code below can be confusing without understanding the Scope chain let x = 50; function outerFunction() {  function innerFunction() {   console.log(x); // Where does x come from?  }  innerFunction(); } outerFunction(); // output 50 ✅ The code below works because of the Scope Chain let x = 10; function outerFunction() {  let y = 20;  function innerFunction() {   console.log(x, y);  }  innerFunction(); } outerFunction(); // output 10 20 Scope chain follow some steps that are listed below. 1️⃣ First, it looks in the current scope 2️⃣ Then, it checks the outer (parent) scope 3️⃣ This continues up to the global scope 4️⃣ If the variable is not found, JavaScript throws a ReferenceError ✅ Key takeaway: Inner functions can access variables from their outer scopes because of the scope chain. #JavaScript #ScopeChain #JSConcepts #WebDevelopment #FrontendDevelopment #LearnJavaScript #SoftwareDevelopment #DeveloperTips

The JavaScript Feature That Simulates Private Variables 🔒 Let’s talk about one of JavaScript’s most powerful, yet often misunderstood features: Closures. Many developers struggle with the concept initially, but once it clicks, it changes how you architect your code. At its core, a closure gives you access to an outer function’s scope from an inner function. The magic happens because the inner function "remembers" the environment in which it was created, even after the outer function has finished executing. Why is this useful? JavaScript doesn't have native "private" variables in the traditional OOP sense (though class fields are changing this). Closures allow us to emulate data privacy. Look at this classic example: creates a counter where the count variable is completely inaccessible from the outside world except through the returned increment function. function createCounter() { let count = 0; // This variable is now "private" return function() { count++; return count; }; } const counter = createCounter(); console.log(counter()); // 1 console.log(counter()); // 2 // console.log(count); // ReferenceError: count is not defined You cannot accidentally modify count from the global scope. You have created a protected state. Are you using closures intentionally in your codebase today? #JavaScript #WebDevelopment #CodingTips #SoftwareEngineering #Closures

✅ JavaScript Output — Why This Date Confuses Almost Everyone This morning’s code was: const date = new Date(2025, 1, 1); console.log(date.getMonth()); console.log(date.getDate()); console.log(date.getFullYear()); 💡 Correct Output 1 1 2025 Now let’s understand why this happens 👇 🧠 Simple Explanation : 🔹 How new Date(year, month, day) really works JavaScript’s Date constructor follows this rule: 👉 Month is ZERO-based That means: 0 → January 1 → February 2 → March … 11 → December So when you write: new Date(2025, 1, 1) JavaScript reads it as: 👉 1st February 2025, not January. 🔹 Line 1: date.getMonth() Since February is internally stored as 1: getMonth() → 1 ✔ Output: 1 🔹 Line 2: date.getDate() This returns the day of the month, and here it is clearly: 1 ✔ Output: 1 🔹 Line 3: date.getFullYear() Year is straightforward: 2025 ✔ Output: 2025 🎯 Key Takeaways : JavaScript months are 0-based Days and years are 1-based new Date(2025, 1, 1) = Feb 1, 2025 This causes many real-world bugs if not remembered 📌 That’s why many developers prefer libraries or careful handling when working with dates 💬 Your Turn Did you expect 1 to mean February? 😄 Comment “Tricky 😮” or “Knew this 👍” #JavaScript #FrontendDevelopment #LearnJS #CodingInterview #Dates #TechWithVeera #WebDevelopment #100DaysOfCode

So you're working with JavaScript and you've got a string like "1,2,3" - it's all one thing. That's a problem. You can't just do math with it, because it's not separate numbers. First, you've got to split it up - that's where .split(",") comes in. It's like taking a big piece of string and cutting it at each comma, so you get an array with separate pieces: "1", "2", "3". But here's the thing: these are still just strings. If you try to add them together, you'll get "12", not 3 - that's not what you want. Then you use .map(Number), which is like a magic converter that goes through each piece and turns it into a real number. Now you've got an array of actual numbers: 1, 2, 3. You can do real math with this. And the best part is, .map(Number) is a shortcut - the longer way to write it is map(x => Number(x)), but since Number already expects one argument, you can just pass it directly to map. It's like a little trick that makes your code more efficient. But what if you skip that step? You'll be stuck with an array of strings, and when you try to add them together, JavaScript will just combine them as text - not what you're looking for. Try it out: without map, "1,2,3".split(",") gives you ["1", "2", "3"], and adding the first two gives you "12". But with map, "1,2,3".split(",").map(Number) gives you [1, 2, 3], and adding the first two gives you 3 - that's more like it. This little pattern is actually really useful in real-world JavaScript - you can use it to parse CSV data, convert URL parameters, and process form inputs. It's a small piece of code that makes JavaScript more expressive, more powerful. Source: https://lnkd.in/gBq6AWdp #javascript #coding #webdevelopment

𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗧𝗶𝗽: 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻 𝗗𝗲𝗰𝗹𝗮𝗿𝗮𝘁𝗶𝗼𝗻 𝘃𝘀 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻 𝗘𝘅𝗽𝗿𝗲𝘀𝘀𝗶𝗼𝗻 Both are common ways to write functions in JavaScript, but they behave differently under the hood 👇 // 𝘍𝘶𝘯𝘤𝘵𝘪𝘰𝘯 𝘋𝘦𝘤𝘭𝘢𝘳𝘢𝘵𝘪𝘰𝘯 𝘧𝘶𝘯𝘤𝘵𝘪𝘰𝘯 𝘨𝘳𝘦𝘦𝘵() {  𝘤𝘰𝘯𝘴𝘰𝘭𝘦.𝘭𝘰𝘨("𝘏𝘦𝘭𝘭𝘰"); } // 𝘍𝘶𝘯𝘤𝘵𝘪𝘰𝘯 𝘌𝘹𝘱𝘳𝘦𝘴𝘴𝘪𝘰𝘯 𝘤𝘰𝘯𝘴𝘵 𝘨𝘳𝘦𝘦𝘵 = 𝘧𝘶𝘯𝘤𝘵𝘪𝘰𝘯 () {  𝘤𝘰𝘯𝘴𝘰𝘭𝘦.𝘭𝘰𝘨("𝘏𝘦𝘭𝘭𝘰"); }; 𝗞𝗲𝘆 𝗗𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝗰𝗲𝘀 𝗛𝗼𝗶𝘀𝘁𝗶𝗻𝗴  • Function declarations are available before they appear in the code  • Function expressions are not 𝘨𝘳𝘦𝘦𝘵(); // 𝘸𝘰𝘳𝘬𝘴 𝘰𝘯𝘭𝘺 𝘸𝘪𝘵𝘩 𝘥𝘦𝘤𝘭𝘢𝘳𝘢𝘵𝘪𝘰𝘯 𝗦𝗰𝗼𝗽𝗲 & 𝗙𝗹𝗲𝘅𝗶𝗯𝗶𝗹𝗶𝘁𝘆  • Declarations are great for defining reusable, top-level logic  • Expressions work well for callbacks, closures, and conditional behaviour 𝘤𝘰𝘯𝘴𝘵 𝘩𝘢𝘯𝘥𝘭𝘦𝘳 = 𝘪𝘴𝘔𝘰𝘣𝘪𝘭𝘦  ? 𝘧𝘶𝘯𝘤𝘵𝘪𝘰𝘯 𝘮𝘰𝘣𝘪𝘭𝘦𝘏𝘢𝘯𝘥𝘭𝘦𝘳() {}  : 𝘧𝘶𝘯𝘤𝘵𝘪𝘰𝘯 𝘥𝘦𝘴𝘬𝘵𝘰𝘱𝘏𝘢𝘯𝘥𝘭𝘦𝘳() {}; 𝗡𝗮𝗺𝗲𝗱 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻 𝗘𝘅𝗽𝗿𝗲𝘀𝘀𝗶𝗼𝗻𝘀 (𝗹𝗲𝘀𝘀 𝗸𝗻𝗼𝘄𝗻) 𝘤𝘰𝘯𝘴𝘵 𝘨𝘳𝘦𝘦𝘵 = 𝘧𝘶𝘯𝘤𝘵𝘪𝘰𝘯 𝘴𝘢𝘺𝘏𝘦𝘭𝘭𝘰() {  𝘴𝘢𝘺𝘏𝘦𝘭𝘭𝘰(); // 𝘢𝘤𝘤𝘦𝘴𝘴𝘪𝘣𝘭𝘦 𝘩𝘦𝘳𝘦 }; 𝘴𝘢𝘺𝘏𝘦𝘭𝘭𝘰(); // 𝘯𝘰𝘵 𝘢𝘤𝘤𝘦𝘴𝘴𝘪𝘣𝘭𝘦 𝘩𝘦𝘳𝘦 👉 In named function expressions, the function name exists 𝗼𝗻𝗹𝘆 𝗶𝗻𝘀𝗶𝗱𝗲 𝘁𝗵𝗲 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻 𝗶𝘁𝘀𝗲𝗹𝗳. This keeps the outer scope clean while still allowing recursion and better debugging. 𝗪𝗵𝗲𝗻 𝘁𝗼 𝘂𝘀𝗲 𝘄𝗵𝗮𝘁? Function Declarations → shared utilities, clearer structure Function Expressions → dynamic logic, event handlers Arrow Functions → concise syntax for simple callbacks 📌 Small details like these make your JavaScript more predictable and maintainable. If this helped, feel free to share or add your thoughts 👇 #JavaScript #WebDevelopment #Frontend #ProgrammingTips #Learning