JavaScript Variable Declarations: var, let, and const Explained

🚀 JavaScript Concepts Series – Day 5 / 30 📌 Hoisting in JavaScript 👀 Let’s Revise the Basics 🧐 Understanding Hoisting in JavaScript helps you know how variables and functions behave before execution. Hoisting means JavaScript moves declarations to the top of their scope during the memory creation phase. 🔹 var Hoisting Declared variables are hoisted Initialized with undefined Can be accessed before declaration (but value will be undefined) 🔹 let & const Hoisting Also hoisted But not initialized Stay in Temporal Dead Zone (TDZ) until declared Accessing before declaration → ReferenceError 🔹 Function Hoisting Function declarations are fully hoisted Can be called before declaration Function expressions are not hoisted like functions 💡 Key Insight var → Hoisted with undefined let & const → Hoisted but in TDZ Functions → Fully hoisted (only declarations) Understanding hoisting helps you avoid unexpected bugs and write predictable code execution flow. More JavaScript concepts coming soon. 🚀 #javascript #js #webdevelopment #frontenddeveloper #coding #programming #developers #softwaredeveloper #learnjavascript #javascriptdeveloper #codinglife #devcommunity #webdev #reactjs #mernstack #codingjourney #codeeveryday #developerlife #100daysofcode #techlearning

🚀 5 Smart Ways to Create Functions in JavaScript – Pick Your Style! 💻 One challenge, multiple solutions – that's JS magic! ✨ Here's a beginner-friendly breakdown of function styles to make your code clean and powerful. 🔹Function Declaration- Classic & hoisted – use anywhere, even before it's defined! Perfect for core utils. 🔹 Function Expression- Assign to a variable for flexibility. No hoisting, so call it after defining. Great for modules! 🔹 Arrow Functions- Super short syntax: () => {}. No 'this' binding – ideal for callbacks & quick logic. Modern fave! 🚀 🔹 IIFE (Immediately Invoked)- (function() { ... })() – runs right away, keeps globals clean. One-time setup king! 🛡️ 🔹 Function Constructor- new Function('a', 'b', 'return a+b') – dynamic creation at runtime. Advanced & powerful! ⚡ Different vibes, same goal: readable, efficient code! Which one's your go-to? Drop it below 👇 Like if helpful, share with a dev friend! 👥 #JavaScript #JSFunctions #WebDevelopment #FrontendDev #CodingTips #LearnToCode #Programming #Developers #CodeNewbie #100DaysOfCode #DevCommunity #ReactJS #WebDev #CleanCode #TechTips #JavaScriptTips #BeginnerCoding #DeveloperLife 💪✨

🚀 Mastering JavaScript Functions: The Ultimate Guide! 🚀 Functions in JavaScript are reusable blocks of code that perform specific tasks when called. They help organize code and make it more efficient by reducing repetition. For developers, understanding functions is essential for writing clean, modular code and improving code readability. Here's a step-by-step breakdown to create and call functions in JavaScript: 1️⃣ Declare the function using the `function` keyword. 2️⃣ Add parameters inside the parentheses to pass data to the function. 3️⃣ Write the code block within curly braces to define the function's logic. 4️⃣ Call the function by using its name followed by parentheses, passing arguments if needed. 🚨 Pro Tip: Always give meaningful names to functions for better code understanding and maintenance. 💡 Common Mistake Alert: Forgetting to return a value from a function when necessary can lead to unexpected results. 🤔 Question: What's your favorite use case for JavaScript functions? Share below! 🌐 View my full portfolio and more dev resources at tharindunipun.lk #JavaScript #Functions #CodingTips #WebDevelopment #Programming #CodeNewbie #DeveloperCommunity #LearnToCode #TechTalks

5 JavaScript concepts that make everything else click. Learn these deeply and frameworks stop being magic. 1. Closures A function that remembers the scope it was created in. This is how callbacks, event listeners, and setTimeout actually work. Not understanding closures = constant bugs you can't explain. 2. The Event Loop JavaScript is single-threaded. The event loop is how async code doesn't block everything else. If you've ever wondered why setTimeout(fn, 0) still runs after synchronous code — this is why. 3. Prototypal Inheritance Every object in JS has a prototype chain. Classes are just syntax sugar over this. Knowing this means you understand how methods are shared and where "cannot read properties of undefined" is actually coming from. 4. this - and how it changes 'this' is not fixed. It depends on how a function is called, not where it's defined. Arrow functions inherit 'this' from their enclosing scope. Regular functions create their own. This one trips up everyone. 5. Promises and the microtask queue Promises don't just "make async code cleaner." They run in the microtask queue, which runs before the next macrotask (setTimeout). Understanding this makes async debugging dramatically easier. Which of these gave you the biggest headache? 👇 #webdeveloper #coding #javascript

🚀 Mastering JavaScript Array Methods Understanding array methods is a game-changer when writing clean, efficient JavaScript code. Here’s a quick breakdown of some essential ones: 🔹 map() – Transforms each element in an array 🔹 forEach() – Executes a function for every element 🔹 filter() – Selects elements based on a condition 🔹 push() & pop() – Add/remove elements from the end 🔹 shift() & unshift() – Add/remove elements from the beginning 🔹 reduce() – Combines elements into a single value These methods help simplify data manipulation and make your code more readable and powerful. Whether you're transforming data, filtering results, or aggregating values, knowing when to use each method can level up your JavaScript skills. 💡 Pro tip: Use map() for transformations and reduce() for calculations or summaries. #JavaScript #WebDevelopment #Coding #Frontend #Programming #DeveloperTips

🚀 Mastering JavaScript Array Methods Understanding array methods is a game-changer when writing clean, efficient JavaScript code. Here’s a quick breakdown of some essential ones: 🔹 map() – Transforms each element in an array 🔹 forEach() – Executes a function for every element 🔹 filter() – Selects elements based on a condition 🔹 push() & pop() – Add/remove elements from the end 🔹 shift() & unshift() – Add/remove elements from the beginning 🔹 reduce() – Combines elements into a single value These methods help simplify data manipulation and make your code more readable and powerful. Whether you're transforming data, filtering results, or aggregating values, knowing when to use each method can level up your JavaScript skills. 💡 Pro tip: Use map() for transformations and reduce() for calculations or summaries. #JavaScript #WebDevelopment #Coding #Frontend #Programming #DeveloperTips

🚀 JavaScript Concepts Series – Day 6 / 30 📌 Closures in JavaScript 👀 Let’s Revise the Basics 🧐 A closure is when a function remembers variables from its outer scope even after the outer function has finished execution. 🔹 Key Points • Inner function can access outer variables • Data persists even after function execution • Useful for data privacy and state management 🔹 Example function outer() { let count = 0; return function inner() { count++; console.log(count); }; } const counter = outer(); counter(); // 1 counter(); // 2 💡 Key Insight Closure → Function + its lexical scope Remembers → Outer variables after execution Closures are widely used in callbacks, event handlers, and React hooks. More JavaScript concepts coming soon. 🚀 #javascript #js #webdevelopment #frontenddeveloper #coding #programming #developers #softwaredeveloper #learnjavascript #javascriptdeveloper #codinglife #devcommunity #webdev #reactjs #mernstack #codingjourney #codeeveryday #developerlife #100daysofcode #techlearning

🚀 How JavaScript Runs Your Code (Super Simple) Ever wondered what happens behind the scenes when you run JavaScript? 🤔 Let’s break it down step by step 👇 🧠 Step 1: Read 👉 JavaScript reads your code line by line 🔍 Step 2: Break 👉 Code is broken into small pieces (tokens) 🌳 Step 3: Understand (AST) 👉 JavaScript creates a structure (AST) of your code ⚡ Step 4: Convert (JIT) 👉 Code is converted into machine code during execution ▶️ Step 5: Execute 👉 JavaScript runs the compiled code 💡 Easy Flow: 👉 Read → Break → Understand → Convert → Execute 🔥 One line to remember: 👉 “JavaScript understands and runs your code at the same time” 💬 Which step was new for you? 📌 Save this for interviews (very important concept) #javascript #webdevelopment #frontend #coding #programming #javascriptdeveloper #learncoding #developers #100DaysOfCode

🚀 Is JavaScript Single-Threaded? Most beginners get confused here… 😵 Let’s make it simple 👇 🧠 JavaScript is Single-Threaded 👉 It runs one task at a time 👉 Code executes line by line (synchronously) 😵 But then… How does it handle things like: 👉 setTimeout 👉 API calls 👉 Promises ⚡ The answer: Event Loop 👉 JS uses: ✔ Call Stack ✔ Web APIs ✔ Callback Queue ✔ Event Loop 💡 What actually happens? 👉 Async tasks go to Web APIs 👉 Then move to Callback Queue 👉 Event Loop pushes them back to Call Stack 🔥 Final Understanding: 👉 JavaScript = Single-threaded 👉 But handles async tasks smartly ⚡ One line to remember: 👉 “JS is single-threaded but non-blocking” 💬 Was this confusing before? Now clear? 📌 Save this — this is a must-know for interviews #javascript #webdevelopment #frontend #coding #programming #javascriptdeveloper #learncoding #developers #100DaysOfCode