Understanding JavaScript Functions and Objects

The Truth Behind JavaScript’s Oldest “Bug” 🐞 Ever felt like JavaScript was gaslighting you? 😅 typeof null === "object" has confused developers for decades. It’s often called a 30-year-old bug—but technically, it’s a legacy behavior preserved for backward compatibility. What actually happened? In the first implementation of JavaScript, values were represented as a combination of two parts,  a type tag(The first 3 bits) and an actual value(with the remaining bits). The type tag for objects was 0. And null was represented as the NULL pointer which is nothing but all zeros. The JS engine saw those 3 first zeros of null and misclassified it as an object! It was a simple storage mistake. Once the web depended on it, fixing it would’ve broken the internet. So the JS team made a deliberate choice: don’t fix it. 📚 References: • MDN Web Docs: https://lnkd.in/gqAB6zJ5 • TC39 discussions: https://lnkd.in/gU3aRR3r • 2ality deep dive: https://lnkd.in/gX_qDZyz 🛡️ Safe pattern: if (data !== null && typeof data === "object") { ... } JavaScript didn’t lie to you—it just has a very long memory 😄 #JavaScript #WebDevelopment #SoftwareEngineering #ProgrammingHumor

So, you wanna get a grip on JavaScript. It's all about functions and objects, really. They're the building blocks. A function is like a recipe - it's a set of instructions that does something, and you can use it over and over. You can make functions in a few different ways: - the classic function declaration, - function expressions, which are kinda like assigning a function to a variable, - and then there's the arrow function, which is like a shorthand way of doing things. For example, you can use functions like this: console.log(greet("Ajmal")); - it's like calling a friend to say hello. Or, you can create a function that adds two numbers together, like this: const add = function (a, b) { return a + b; }; - it's basic, but it works. And then there's the arrow function, which is super concise, like this: const multiply = (a, b) => a * b; - it's like a quick math trick. Objects, on the other hand, are like containers - they store data in key-value pairs, so you can keep things organized. It's like having a toolbox, where you can store all your functions and data in one place. You can use objects to make your code more manageable, and that's a beautiful thing. Check out this article for more info: https://lnkd.in/gTMkkSGP #JavaScript #Functions #Objects

✅ Understanding undefined vs null Clearly This morning’s code was: let x; console.log(x); console.log(typeof x); x = null; console.log(x); console.log(typeof x); 💡 Correct Output undefined undefined null object Yes , the last line surprises many 😄 Let’s understand why. 🧠 Simple Explanation : 🔹 Line 1: console.log(x); let x; x is declared But no value is assigned So JavaScript automatically gives it: undefined ✔ Output: undefined 🔹 Line 2: console.log(typeof x); The type of undefined is: "undefined" ✔ Output: undefined 🔹 Line 3: x = null; Here, we explicitly assign null. Important rule 👇 👉 null means intentional absence of value So: console.log(x); ✔ Output: null 🔹 Line 4: console.log(typeof x); This is the classic JavaScript quirk 👀 Even though x is null: typeof null returns: "object" ✔ Output: object 📌 This is a known bug in JavaScript kept for backward compatibility. 🎯 Key Takeaways : undefined → variable declared, value not assigned null → value explicitly set to “nothing” typeof undefined → "undefined" typeof null → "object" ❌ (historical JS bug) 📌 That’s why many developers check null like this: x === null 💬 Your Turn Did you already know typeof null is "object"? 😄 Comment “Knew it 👍” or “Learned today 😮” #JavaScript #LearnJS #FrontendDevelopment #CodingInterview #Basics #TechWithVeera #WebDevelopment

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

Did you know you can clean an array in JavaScript with just ONE line? If your array contains dummy values like null, undefined, "", or false, you don’t need loops or extra logic. JavaScript’s .filter(Boolean) does the job beautifully. How it works (no magic, just JS): When you pass Boolean to filter, each element is automatically converted to a boolean value. All falsy values are removed. What gets removed? false 0 "" (empty string) null undefined NaN Why this is useful: Cleaner code ✨ No manual checks Perfect for API responses & form data Improves readability instantly Browser support: ✅ Supported in all modern browsers Have you used this trick before, or do you clean arrays differently? 🔁 Reshare this post so more developers can learn this simple JS tip!

❓ What are the advantages of using the spread operator with arrays and objects? ✅ The spread operator (...) in JavaScript allows you to easily copy arrays and objects, merge them, and add new elements or properties. It simplifies syntax and improves readability. For arrays, it can be used to concatenate or clone arrays. For objects, it can be used to merge objects or add new properties. // Arrays const arr1 = [1, 2, 3]; const arr2 = [...arr1, 4, 5]; console.log(arr2); // [1, 2, 3, 4, 5] // Objects const obj1 = { a: 1, b: 2 }; const obj2 = { ...obj1, c: 3 }; console.log(obj2); // { a: 1, b: 2, c: 3 } Cheers, Binay 🙏 #javascript #namastejavascript #frontend

𝗪𝗵𝘆 𝗢𝗯𝗷𝗲𝗰𝘁𝘀 𝗔𝗿𝗲 𝗡𝗼𝘁 𝗘𝗾𝘂𝗮𝗹 You compare objects in JavaScript. But do you know how it works? In JavaScript, you have different data types. You can compare them: -test === "test" // true - true === true // true - 1 === 1 // true But objects are different: - {} === {} // false - [] === [] // false Why does this happen? JavaScript is a dynamically typed language. It has two main types: - Primitive types are immutable. They are compared by value. - Reference types are mutable. They are compared by reference. Here are some types and how they are compared: - Number: by value - String: by value - Boolean: by value - Object: by reference - Array: by reference When you compare objects, you compare their addresses in memory. This is why {} === {} is always false. Each object is allocated a new place in memory. You can learn more about this topic. Source: https://lnkd.in/gue2Us4C

📘 Day 69: JavaScript Loops (for & while) 🔹 Loops in JavaScript • Loops are used to repeat a block of code multiple times • Helpful for continuous iteration and data processing • <br> is often used with document.writeln() to print on new lines 🔸 For Loop 💡 Structure: for(start; condition; step) • Executes code while the condition is true • Order in JS: 1️⃣ Initialize → 2️⃣ Check condition → 3️⃣ Print → 4️⃣ Increment Example: for(let i=0;i<10;i++) prints 0–9 🔸 Start, Stop, Step • i=0 → start • i<10 → stop condition • i+=2 or i+=3 → step (skip values) • Useful for controlling iteration speed 🔸 For…of Loop • Used to print values from: ✅ Arrays ✅ Sets ✅ Maps Example: for(let i of array) → prints elements one by one 🔸 For…in Loop • Used mainly for Objects • Prints keys (indexes/properties) To print key + value: object[key] Example output: Name : John 🔸 While Loop • Runs while condition is true • Manual increment is required Example: while(i<=10) 🔸 Step in While Loop • Controlled using i+=2, i+=3, etc. • Helps skip numbers and reduce iterations ✨ Today’s focus was mastering iteration techniques in JavaScript — a core skill for handling arrays, objects, and dynamic data efficiently. #JavaScript #Day69 #WebDevelopment #JSLoops #ForLoop #WhileLoop #CodingJourney #FrontendDevelopment #LearnJavaScript #ProgrammingBasics #DeveloperJourney

Understanding Higher-Order Functions and .map() in JavaScript In this short example, we explore two useful JavaScript features: 🔹 1. Higher-Order Function with multiply Here’s what’s happening: multiply() is a higher-order function — it returns another function. When we call multiply(2), it returns a new function (numberMul) that remembers the value 2. Calling double(5) then uses that value to compute 2 * 5, giving 10. This is a simple example of closures, where a function “remembers” the environment in which it was created. 🔹 2. Using .map() with an Arrow Function With .map(): We pass an arrow function that takes three parameters: element – the current value in the array index – the position of that element array – the full array being processed Every time .map() runs, it logs those values and returns the doubled result. The result is a new array with each number multiplied by 2. 📁 See the Full Exercise You can view and download the complete JavaScript exercise on GitHub: ➡️ https://lnkd.in/ej4fNeZs

Most developers reach for IDs, classes, or extra state before remembering this: JavaScript already gives you a clean way to attach structured metadata directly to DOM elements. If you have ever used data-* attributes in HTML, you can access them in JavaScript through the dataset property. No parsing. No brittle string manipulation. No unnecessary DOM lookups. It is simple, readable, and surprisingly underused. This pattern is especially useful for event delegation, lightweight UI state, dynamic lists, and keeping behaviour close to the element it belongs to. Small details like this make frontend systems cleaner and easier to reason about without introducing extra abstractions. Not everything needs global state. Sometimes the platform already solved the problem. In the example attached, notice how `data-user-id` becomes `dataset.userId`. Hyphenated attributes automatically convert to camelCase. It is a small feature, but small features compound into cleaner, more maintainable frontend code. What is one underrated JavaScript feature you think more developers should use? Github Gist: https://lnkd.in/d6pjMP7J #webdevelopment #javascript #cleancode