JavaScript Variables: var, let & const Explained

🚀 JavaScript Tip: var vs let vs const — Explained Simply Understanding how variables work in JavaScript can save you from hard-to-debug issues later. Think of variables as containers that hold values ☕ 🔹 var – Old Style (Not Recommended) ➡️ Function scoped ➡️ Can be re-declared & reassigned ➡️ Gets hoisted → may cause unexpected bugs 👉 Use only if maintaining legacy code 🔹 let – Modern & Safe ➡️ Block scoped {} ➡️ Cannot be re-declared ➡️ Can be reassigned ➡️ Hoisted but protected by Temporal Dead Zone 👉 Best for values that change over time 🔹 const – Locked & Reliable ➡️ Block scoped {} ➡️ Cannot be re-declared or reassigned ➡️ Must be initialized immediately 👉 Best for fixed values and cleaner code ✅ Best Practice Use const by default, switch to let only when reassignment is needed, and avoid var 🚫 💡 Small fundamentals like these make a big difference in writing clean, scalable JavaScript. #JavaScript #WebDevelopment #FrontendDevelopment #ProgrammingTips #LearnJavaScript #CodingBestPractices #DeveloperLearning #SoftwareEngineering #100DaysOfCode

Day-36 | JavaScript Objects 🧠 Today, I learned about Objects in JavaScript, a core concept used to store and manage related data in a structured way. Objects allow us to represent real-world entities by grouping values under meaningful names. I explored: • What an Object is and why it exists • How data is stored as key–value pairs • Different ways to access object properties • How objects can hold values like numbers, strings, arrays, and even functions • Why objects are the foundation of real-world JavaScript applications Understanding objects changed how I look at data — it’s no longer just variables, but organized information with behavior. This concept is essential for building scalable applications and writing clean, readable code. On to Day-37 👉 #BuildInPublic #JavaScript #WebDevelopment #LearningInPublic #Frontend #Objects #DeveloperJourney #Consistency

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

𝗛𝗼𝘄 𝗛𝗼𝗶𝘀𝘁𝗶𝗻𝗴 𝗪𝗼𝗿𝗸𝘀 𝗜𝗻𝘁𝗲𝗿𝗻𝗮𝗹𝗹𝘆 You want to know how hoisting works in JavaScript. Hoisting is when JavaScript moves declarations to the top of their scope. This happens before the code is executed. JavaScript runs in two phases: - Memory Creation Phase: JavaScript parses the code and allocates memory for variables and functions. - Execution Phase: The code runs line by line. There are different types of hoisting in JavaScript: - var hoisting: Variables declared with var are fully hoisted. - let and const hoisting: Variables declared with let and const are hoisted but not initialized. - Function declaration hoisting: Function declarations are fully hoisted. - Function expression hoisting: Function expressions are not fully hoisted. When you run your code, JavaScript creates an execution context. This context has two main things: - Memory: Where variables and functions are stored. - Code: Where the code is executed line by line. Source: https://lnkd.in/d9Zen2Dc

Day 64 – JavaScript String Methods Today I explored essential JavaScript String methods that help in manipulating and validating text data effectively. These methods are widely used in real-world applications such as form validation, data formatting, and UI handling. Topics Covered: length – Find the number of characters (including spaces) replace() – Replace the first occurrence of a specified value replaceAll() – Replace all matching values in a string split() – Convert a string into an array based on a separator indexOf() – Get the index position of a character or word slice() – Extract a portion of a string using index values trim() – Remove extra spaces from both ends trimStart() – Remove spaces from the beginning trimEnd() – Remove spaces from the end startsWith() – Check if a string starts with a specific value endsWith() – Check if a string ends with a specific value Understanding these methods makes string handling more efficient and improves code clarity and performance in JavaScript applications. #JavaScript #StringMethods #FrontendDevelopment #WebDevelopment #LearningJavaScript

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

𝗛𝗼𝘄 𝗛𝗼𝗶𝘀𝘁𝗶𝗻𝗴 𝗪𝗼𝗿𝗸𝘀 𝗜𝗻𝘁𝗲𝗿𝗻𝗮𝗹𝗹𝘆 You want to know how hoisting works in JavaScript. Hoisting is when JavaScript moves declarations to the top of their scope. This happens during the memory creation phase, before code execution. JavaScript runs in two phases: - Memory Creation Phase: JavaScript parses the code and allocates memory for variable and function declarations. - Execution Phase: Code runs line by line, and assignments happen. There are different types of hoisting in JavaScript: - var hoisting: fully hoisted - let and const hoisting: hoisted but not initialized - function declaration hoisting: fully hoisted - function expression hoisting: not fully hoisted For example, with var hoisting: ``` console.log(a); var a = 10; ``` Internally, it becomes: ``` var a; console.log(a); a = 10; ``` But with let and const hoisting, you get a ReferenceError if you try to access the variable before declaration. When JavaScript runs your code, it creates an execution context. This context has two main things: memory and code. Memory stores variables and functions, and code executes line by line. Source: https://lnkd.in/d9Zen2Dc

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