JavaScript Array.find() Returns Reference to Object

JavaScript Hoisting: The Concept That Separates “I use JS” from “I understand JS” Hoisting is one of those JavaScript behaviors that silently explains why some code works, and why some bugs are so hard to catch. In JavaScript, code runs in two phases: 1️⃣ Compilation (creation) phase 2️⃣ Execution phase During compilation, JavaScript sets up memory for variables and functions. This is where hoisting happens. 🔹 var hoisting Only the declaration is hoisted, not the initialization. ex: console.log(x); // undefined var x = 5; Behind the scenes, JavaScript treats it like: var x; console.log(x); x = 5; No error, but also no value yet. This behavior has caused countless subtle bugs in real-world apps. 🔹 Function declarations Function declarations are fully hoisted, name and body. sayHello(); // works function sayHello() { console.log("Hello"); } This is why function declarations behave differently from function expressions. 🔹 let & const (ES6) They are hoisted, but not initialized. Accessing them before declaration throws a ReferenceError. console.log(y); // ReferenceError let y = 10; This period is known as the Temporal Dead Zone (TDZ), a design choice to make code safer and more predictable. 💡 Why this matters in real projects - Explains unexpected undefined - Helps debug scope-related issues - Shows you understand how JS actually works under the hood 📌 Best practice Don’t rely on hoisting. Write code that’s clear, intentional, and predictable, your future self (and your team) will thank you. #JavaScript #Frontend #WebDevelopment #SoftwareEngineering #CleanCode

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

🔍 Null vs Undefined in JavaScript -> Understanding the difference between null and undefined and Let's break down. 🔹 undefined undefined means a variable has been declared but not assigned any value. It is the default value assigned by the JavaScript engine. Common cases where you get undefined: A variable declared but not initialized A function that does not return anything Accessing a non-existent object property Examples: let a; console.log(a); // undefined function test() {} console.log(test()); // undefined let obj = {}; console.log(obj.name); // undefined ✔ undefined is a falsy value ✔ Assigned automatically by JavaScript 🔹 null null is an intentional assignment that represents no value or an empty object reference. It is explicitly set by the developer. Example: let user = null; console.log(user); // null ✔ null is also a falsy value ✔ It must be assigned manually 🔹 Behavior in Arithmetic Operations JavaScript handles null and undefined differently in calculations: null + 20    // 20 → null is converted to 0 undefined + 20 // NaN 🔹 Equality Comparison null == undefined  // true (loose equality) null === undefined // false (strict equality) 🧠 Key Takeaway Use undefined when a value is not yet assigned (default behavior) Use null when you want to explicitly indicate “no value” Ajay Suneja 🇮🇳 ( Technical Suneja ) #JavaScript #WebDevelopment #Frontend #Programming #JSBasics

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

Mastering Set in JavaScript Set in JavaScript allows us to store unique values only. Arrays can do something similar but there are important differences we should know. In this post, we’ll explore how Set works and when to use it. For the full comparison with Array, please watch the video. A Set is an unordered collection that stores only unique values and is optimised for quick existence checks. 🔹 Create a Set const mySet = new Set([1,2,3]); 🔹 Add values mySet.add(4); If we try to add a duplicate value: mySet.add(3); it will be ignored, because a Set only stores unique values. We can also add strings, arrays, and objects in the same way. In the case of objects though, a Set treats values as duplicates if they share the same reference. const a = {id: 1}; mySet.add(a); mySet.add(a); 🔹 Finding values Unlike arrays, Sets don’t have indexes, so values can’t be accessed by position. Instead, values are accessed through iteration using forEach or for...of: mySet.forEach((value) => console.log(value)); or for (const value of mySet) { console.log(value); } There is no index available during iteration. 🔹 Remove or clear values: mySet.delete(2); mySet.clear(); 🔹 Check for value: mySet.has(2); 🔹 Get size: mySet.size; Use a Set when we need to track only unique values and want fast checks to see if something already exists. #frontend #javascript #set #array

𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗧𝗶𝗽: 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻 𝗗𝗲𝗰𝗹𝗮𝗿𝗮𝘁𝗶𝗼𝗻 𝘃𝘀 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻 𝗘𝘅𝗽𝗿𝗲𝘀𝘀𝗶𝗼𝗻 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

𝐔𝐬𝐢𝐧𝐠 𝐧𝐞𝐰 𝐢𝐧 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 — 𝐰𝐡𝐞𝐧 𝐭𝐨 𝐮𝐬𝐞 𝐢𝐭 𝐚𝐧𝐝 𝐰𝐡𝐞𝐧 𝐧𝐨𝐭 𝐭𝐨 • JavaScript has fundamental objects  - (formerly called built-in or native objects) • These are NOT primitive types They are object representations layered on top of primitives • Use new with these fundamental objects – 𝐎𝐛𝐣𝐞𝐜𝐭 – 𝐀𝐫𝐫𝐚𝐲 – 𝐅𝐮𝐧𝐜𝐭𝐢𝐨𝐧 – 𝐃𝐚𝐭𝐞 – 𝐑𝐞𝐠𝐄𝐱𝐩 – 𝐄𝐫𝐫𝐨𝐫 • Date is the most important case  - There is no date literal in JavaScript  - Creating dates requires new Date • Do NOT use new with these – 𝐒𝐭𝐫𝐢𝐧𝐠 – 𝐍𝐮𝐦𝐛𝐞𝐫 – 𝐁𝐨𝐨𝐥𝐞𝐚𝐧 • Why you should avoid new String / Number / Boolean  - They create object wrappers instead of primitives  - This leads to confusing behavior and bugs • These should be used as functions, not constructors • They are best used for type coercion, not object creation • Example use case  - Converting values (like JSON data) into strings or numbers  - This is where String, Number, and Boolean shine 𝐑𝐮𝐥𝐞: 👉 𝐔𝐬𝐞 𝐧𝐞𝐰 𝐨𝐧𝐥𝐲 𝐟𝐨𝐫 𝐟𝐮𝐧𝐝𝐚𝐦𝐞𝐧𝐭𝐚𝐥 𝐨𝐛𝐣𝐞𝐜𝐭𝐬 (𝐎𝐛𝐣𝐞𝐜𝐭, 𝐀𝐫𝐫𝐚𝐲, 𝐃𝐚𝐭𝐞, 𝐞𝐭𝐜.) 👉 𝐔𝐬𝐞 𝐒𝐭𝐫𝐢𝐧𝐠, 𝐍𝐮𝐦𝐛𝐞𝐫, 𝐚𝐧𝐝 𝐁𝐨𝐨𝐥𝐞𝐚𝐧 𝐰𝐢𝐭𝐡𝐨𝐮𝐭 𝐧𝐞𝐰 𝐟𝐨𝐫 𝐜𝐨𝐞𝐫𝐜𝐢𝐨𝐧 Follow HAREESH BHITTAM for more JavaScript internals and edge cases. #JavaScript #Fundamentals #CleanCode #Frontend #YouDontKnowJS

In JavaScript what does it mean when something is both a function and has prototype as undefined? When a Function Has prototype === undefined In JavaScript, functions are objects, and most functions have a .prototype property because they can be used as constructors. someFunction.prototype === undefined What’s really happening? If a function’s .prototype is undefined, it means: - The function cannot be used as a constructor - You cannot call it with new - The function is not a “constructor-capable” function - This behavior exists because not all functions are designed to create objects. Example: console.log(Math.max.prototype); undefined -> built-in function, not a constructor console.log((() => {}).prototype); undefined -> arrow functions have no prototype console.log((async function () {}).prototype); {} -> async functions CAN be constructors console.log((function* () {}) .prototype); {} -> generator functions CAN be constructors Quick recap: Normal functions -> have .prototype Arrow functions -> no .prototype Built-in utility functions (like Math.max) -> no .prototype prototype === undefined -> function is callable, but not constructible How it can help you? Debugging TypeError: function is not a constructor. Writing cleaner APIs. Deepening your mental model of JavaScript’s object system. JavaScript isn’t inconsistent here — it’s intentional design.

JavaScript can be pretty confusing. It's pass-by-value, but what does that even mean? So, let's dive in. In a nutshell: everything in JavaScript is passed by value - it's that simple. But, the type of data you're working with changes everything. Primitives, like numbers or strings, are passed by value - no surprises there. Objects, on the other hand, are passed by value too, but the value is a reference to the object, which is where things get tricky. When you pass a primitive, JavaScript makes a copy of the data, and the original and the copy are independent - easy peasy. But with objects, it's like sharing a secret: if you change the object, everyone who has a reference to it sees the change. You can use the spread operator or structuredClone() to create copies of objects, but be careful - objects and arrays can share references, which can lead to some weird behavior. It's like trying to have a conversation in a crowded room: you think you're talking to one person, but really, everyone is listening. So, to write clean code, use immutability - never change the original data, just return a new version. It's like taking a snapshot: you capture the moment, and then you can move on. And, yeah, it's worth repeating: JavaScript is always pass-by-value. Primitives are safe from external changes, but objects and arrays share references, so be careful. Use the spread operator or structuredClone() to create copies, and always, always embrace immutability for predictable code. Check out this article for more info: https://lnkd.in/g-Nj9Rh6 #JavaScript #Immutability #CleanCode #PassByValue #ProgrammingBestPractices