JavaScript Variables: Primitives vs Objects

💡 Everything in JavaScript is an object (almost). ❓ Why is null also an object? When you check the type of null in JavaScript, you’ll see something strange: typeof null; // "object" 😵 But here’s the truth 👉 null is NOT actually an object. 🔹 So why does this happen? This is a historical bug from the early days of JavaScript. Internally, JavaScript used type tags to identify values, and null was given the same tag as objects. Once JavaScript became widely used, this mistake couldn’t be fixed—changing it would break millions of existing programs. 🔹 What is null really? null is a primitive value that means: “No value” “Intentionally empty” “Nothing here” It’s often used to reset variables or show that something is missing on purpose. ⚠️ Why this matters If you rely only on typeof, you can write buggy logic. if (typeof value === "object") { // This will also run for null ❌ } ✅ Best practice Always check for null explicitly: value === null; 💡 Takeaway null showing up as "object" is a JavaScript bug that became a feature. Knowing this helps you avoid confusing bugs and write safer code #learnwithisnaan #JavaScriptTips #ModernJavaScript #ES6 #DeveloperTips #CleanCode #JSDevelopers

So you want to share behavior in JavaScript without all the inheritance drama. It's a problem, because JavaScript has a bunch of ways to share behavior - like inheritance, mixins, composition, and interfaces. But, there's a gap: it's hard to expose a specific capability of an object without messing with the object itself. That's where Trait Views come in - they're like a runtime pattern inspired by Rust traits. It's simple: you create a trait that defines a behavior, then an object that implements it, and finally, you use the trait to create a view of that object. Done. The view shows off the behavior defined by the trait, and the original object stays unchanged - no fuss. Trait Views are cool because they have two modes: stateless, which doesn't own any state, and stateful, which has its own internal state. Both are useful, depending on the problem you're trying to solve. And the best part? Trait Views reduce the surface area by only exposing the necessary behavior - it's like a consistent abstraction with a clear boundary between object state and trait behavior. So, what do you think about this idea? Check out the source for more info: https://lnkd.in/gZgP2cDJ #JavaScript #TraitViews #Innovation

𝗪𝗵𝘆 𝗗𝗼𝗲𝘀 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗡𝗲𝗲𝗱 𝗔𝘀𝘆𝗻𝗰 𝗖𝗼𝗱𝗲? JavaScript runs on a single thread. This means it can do one task at a time. You might wonder: if JavaScript can only do one thing at a time, why do we need async code? The answer is simple: to avoid waiting and freezing. - Async code helps JavaScript start a task and continue doing other work. - It comes back when the task is finished. Think of it like cooking rice. You put the rice on the stove and let it cook. While waiting, you can use your phone, clean your room, or drink water. When the rice is ready, you come back. If JavaScript was not async, it would start a long task and wait. During that time, buttons would not work, and the page would feel frozen. Async code tells JavaScript to start a task and handle the result later. For example, you can use setTimeout to log a message after some time: console.log("Start"); setTimeout(() => { console.log("Doing other work"); } JavaScript needs async code so it does not sit idle while waiting for slow tasks. Source: https://lnkd.in/dQHSk38w

What is prototype in Javascript? Prototype allows JavaScript objects to inherit properties and methods from another object.Instead of storing the same method in every object, JavaScript keeps it in the prototype. 📌__proto__ vs prototype: 📌prototype is a property of constructor functions. 📌__proto__ is the internal link that objects use to access that prototype. Both are connected and point to the same thing behind the scenes. 📌Every value in JavaScript (array, function, number) is linked to a prototype. An array like [1,2,3] gets methods such as slice() from Array.prototype. A function gets methods like call() from Function.prototype. A number like 5 gets methods like toFixed() from Number.prototype. 📌All these prototypes finally point to Object.prototype. 📌Object.prototype points to null, which ends the prototype chain.

So, "this" in JavaScript is a total wild card. You ask 10 devs, you get 10 different answers. It's a bug magnet, especially for those coming from other languages where "this" is straightforward. It's simple: "this" is all about how a function is called, not where it's defined. That's the root of most confusion. Now, let's break it down - there are four binding rules. Default binding: "this" goes global (or undefined in strict mode) when a function is called on its own. Implicit binding:this is the object before the dot when a function is called as a method. Explicit binding: you can setthis using call(), apply(), or bind(). And new binding: "this" is bound to the new object when you call a function with new. Arrow functions are different - they lexically bind "this" from their surrounding scope. So, losing "this" in callbacks is a common gotcha - just use arrow functions or bind(). In React, class components need binding in the constructor or arrow functions. But functional components with hooks? They avoid "this" altogether. The key takeaways: "this" depends on the function call, not definition. Arrow functions inherit "this" lexically. And in React, event handlers need binding because they're called as standalone functions. Check out this explanation for more: https://lnkd.in/gYxS529W #JavaScript #ThisKeyword #React

So, "this" in JavaScript is a total wild card. You ask 10 devs, you get 10 different answers. It's a bug magnet, especially for those coming from other languages where "this" is straightforward. It's simple: "this" is all about how a function is called, not where it's defined. That's the root of most confusion. Now, let's break it down - there are four binding rules. Default binding: "this" goes global (or undefined in strict mode) when a function is called on its own. Implicit binding:this is the object before the dot when a function is called as a method. Explicit binding: you can setthis using call(), apply(), or bind(). And new binding: "this" is bound to the new object when you call a function with new. Arrow functions are different - they lexically bind "this" from their surrounding scope. So, losing "this" in callbacks is a common gotcha - just use arrow functions or bind(). In React, class components need binding in the constructor or arrow functions. But functional components with hooks? They avoid "this" altogether. The key takeaways: "this" depends on the function call, not definition. Arrow functions inherit "this" lexically. And in React, event handlers need binding because they're called as standalone functions. Check out this explanation for more: https://lnkd.in/gYxS529W #JavaScript #ThisKeyword #React

🇮🇳 Republic Day meets JavaScript Hoisting 🇮🇳 Just like our National Flag is hoisted before the Republic Day ceremony begins, JavaScript also has a concept called Hoisting 🚀 🔹 What is JavaScript Hoisting? Hoisting is JavaScript’s default behaviour of moving declarations to the top of their scope before code execution. 📌 During the memory creation phase: 1) var variables are hoisted and initialized with undefined 2) Function declarations are hoisted completely 🧠 Example: x = 10; greet(); console.log(x); var x; function greet() {   console.log("Hello!"); } Even though x and greet() appear later in the code, JavaScript already knows about them before execution starts. ⚠️ Important Notes: 1) var is hoisted (initialized as undefined) 2) let and const are hoisted but stay in the Temporal Dead Zone 3) Function declarations are fully hoisted 4) Function expressions are not hoisted like functions 🎯 Takeaway: Understanding hoisting helps avoid bugs and write cleaner, predictable JavaScript code. Happy Learning & Happy Republic Day! 🇮🇳✨ #JavaScript #Hoisting #WebDevelopment #MERNStack #Frontend #LearningEveryday #RepublicDay #ProgrammingConcepts

💡 Hoisting happens before code execution. ❓ Why are function declarations hoisted but arrow functions are not? In JavaScript, hoisting means the JS engine moves declarations to the top of the file before running the code. ✅ Function declarations are fully hoisted. That means both the function name and its body are stored in memory during the creation phase. So you can call a function declaration even before writing it in the code. ❌ Arrow functions are not hoisted the same way because they are treated like variables. If an arrow function is assigned to const or let, only the variable name is hoisted—not its value. Until the code reaches that line, the arrow function doesn’t exist yet. 👉 So if you try to call an arrow function before it’s defined, JavaScript throws an error. #engineer #webdevelopment #javascript #mernstackdeveloper #fullstackdeveloper #learnwithisnaan

Day 8 of 15 –Learn Frontend in 1 Minute JavaScript doesn’t run magically in the browser. It follows a very strict order. There is only one main thread. Only one thing can run at a time. What confuses most developers is this: JavaScript can start async work, but it doesn’t execute it in parallel. When you call setTimeout, fetch data, or attach events: -JavaScript hands the task to the browser -continues running the next line -comes back later when the stack is free This is why code sometimes logs in an unexpected order. Nothing is random. The rules are just invisible at first. Once you understand that JavaScript never multitasks, a lot of “weird” bugs stop being weird.