Sonjib Chetry’s Post

🚀 JavaScript Core Concept: Hoisting Explained Ever wondered why you can call a variable before it’s declared in JavaScript? 🤔 That’s because of Hoisting — one of JavaScript’s most important (and often misunderstood) concepts. When your code runs, JavaScript moves all variable and function declarations to the top of their scope before execution. 👉 But here’s the catch: Variables (declared with var) are hoisted but initialized as undefined. Functions are fully hoisted, meaning you can call them even before their declaration in the code. 💡 Example: console.log(name); // undefined var name = "Ryan"; During compilation, the declaration var name; is moved to the top, but the assignment (= "Ryan") happens later — that’s why the output is undefined. 🧠 Key Takeaway: Hoisting helps JavaScript know about variables and functions before execution, but understanding how it works is crucial to avoid tricky bugs. #JavaScript #WebDevelopment #Frontend #ProgrammingConcepts #Learning #Hoisting #CodeTips

📌 Day 19 of My JavaScript Brush-up Series Today, I tackled one of the most crucial yet often confusing topics in JavaScript: the Event Loop and Concurrency Model 🌀 If you’ve ever wondered how JavaScript handles multiple tasks at once (even though it’s single-threaded), this is the secret sauce behind it. 👉🏿 JavaScript Is Single-Threaded JavaScript runs on one main thread, meaning it can only execute one task at a time. But thanks to the event loop, it still manages to handle multiple operations efficiently like responding to clicks, fetching data, or running timers all without freezing. 👉🏿 How It Works (Simplified Flow) 1. Call Stack → Where synchronous code runs (line by line). 2. Web APIs → Handle async tasks like fetch(), setTimeout(), or event listeners. 3. Callback Queue / Microtask Queue → Store callbacks and promises waiting to be executed. 4. Event Loop → Keeps checking: “Is the call stack empty? If yes, push the next task from the queue.” This creates the illusion of concurrency while keeping everything non-blocking. 👉🏿 Example 👇🏿 console.log("Start"); setTimeout(() => console.log("Timeout"), 0); Promise.resolve().then(() => console.log("Promise")); console.log("End"); 🧠 Output: Start End Promise Timeout Here’s why: ✍🏿 console.log("Start") and console.log("End") run first (synchronous). ✍🏿 The promise goes into the microtask queue (executed before timeouts). ✍🏿 The timeout callback runs last from the callback queue. 💡 Key Takeaway: ✍🏿 JS runs on a single thread, but stays non-blocking through async APIs and the event loop. ✍🏿 Microtasks (Promises) run before macrotasks (timeouts, intervals). ✍🏿 The event loop keeps everything smooth and responsive. 📸 I’ve attached a visual showing how the call stack, web APIs, queues, and event loop interact 👇🏿 👉🏿 Question: When did the event loop finally “click” for you? #JavaScript #LearningInPublic #WebDevelopment #DaysOfCode #Frontend #AsyncJS

Mastering JavaScript Arrays: Complete Guide to Array Methods! If you’re working with JavaScript, arrays are your best friends—but knowing all their methods can make your life so much easier! 💡 Here’s a complete list of JS array methods you should know: Mutator Methods (change the original array): push(), pop(), shift(), unshift(), splice(), sort(), reverse(), fill(), copyWithin() Accessor Methods (return new array or value, original stays intact): concat(), includes(), indexOf(), lastIndexOf(), join(), slice(), toString(), toLocaleString() Iteration / Higher-Order Methods: forEach(), map(), filter(), reduce(), reduceRight(), some(), every(), find(), findIndex(), flat(), flatMap() Other Useful Methods: Array.from(), Array.isArray(), Array.of() ✅ Pro Tip: Mastering these will make your code cleaner, faster, and more readable. Start practicing each method on small arrays and see the magic happen! 💬 Comment below: Which array method do you use the most? #JavaScript #Coding #WebDevelopment #100DaysOfCode #LearnToCode #FrontendDevelopment #MERNStack #DeveloperTips

Variable Declarations @ JavaScript Simplified👨💻 In JavaScript, we have three keywords to declare variables: var, let, and const. 💢Each behaves differently when it comes to redeclaration and reassignment 👇 🔸 var ✅ Redeclaration: Allowed ✅ Reassignment: Allowed 🧩 Example: var x = 10; var x = 20; // works fine ⚠️ Best avoided — can cause accidental overwriting of variables. 🔸 let ❌ Redeclaration: Not allowed ✅ Reassignment: Allowed 🧩 Example: let y = 30; y = 40; // valid let y = 50; // ❌ SyntaxError 👍 Use let when the value of a variable might change later. 🔸 const ❌ Redeclaration: Not allowed ❌ Reassignment: Not allowed 🧩 Example: const z = 50; z = 60; // ❌ TypeError 🔒 Use const for values that should never change. 👉 Quick recap: 🔹Use let when updates are needed. 🔹Use const when the value stays fixed. 🔹Avoid var to keep your code predictable and clean. #JavaScript #WebDevelopment #CodingTips #LearningJS #FrontendDevelopment

“The Secret Behind JavaScript’s Magic — The Event Loop 🧠” When I first learned JavaScript, I used to wonder — how can it handle so many things at once even though it’s single-threaded? 🤔 The answer lies in one beautiful mechanism — The Event Loop. Here’s what actually happens behind the scenes 👇 1️⃣ JavaScript runs in a single thread — only one thing executes at a time. 2️⃣ But when something async happens (like setTimeout, fetch, or Promise), those tasks are offloaded to the browser APIs or Node.js APIs. 3️⃣ Once the main call stack is empty, the event loop takes pending callbacks from the task queue (or microtask queue) and pushes them back into the stack to execute. So while it looks like JavaScript is multitasking, it’s actually just scheduling smartly — never blocking the main thread. Example:- console.log("Start"); setTimeout(() => console.log("Inside Timeout"), 0); Promise.resolve().then(() => console.log("Inside Promise")); console.log("End"); Output:- Start   End   Inside Promise   Inside Timeout Even though setTimeout was “0 ms”, Promises (microtasks) always run before timeouts (macrotasks). That’s the secret sauce 🧠💫 Understanding this single concept can help you debug async behavior like a pro. #JavaScript #EventLoop #Async #WebDevelopment #Coding

*5 Things I Wish I Knew When Starting JavaScript 👨💻* Looking back, JavaScript was both exciting and confusing when I started. Here are 5 things I wish someone had told me earlier: *1. var is dangerous. Use "let" and "const" "var" is function-scoped and can lead to unexpected bugs. "let" and "const" are block-scoped and safer. *2. JavaScript is asynchronous Things like "setTimeout()"and "fetch()" don’t behave in a straight top-down flow. Understanding the *event loop* helps a lot. *3. Functions are first-class citizens* – You can pass functions as arguments, return them, and even store them in variables. It’s powerful once you get used to it. *4. The DOM is slow – avoid unnecessary access* – Repeated DOM queries and manipulations can hurt performance. Use "documentFragment" or batch changes when possible. *5. Don’t ignore array methods* map(), "filter()" , "reduce()", "find()"… they make code cleaner and more readable. I wish I started using them sooner. 💡 *Bonus Tip:* "console.log()" is your best friend during debugging! If you’re starting out with JS, save this. And if you're ahead in the journey — what do *you* wish you knew earlier? #JavaScript #WebDevelopment #CodingJourney #Frontend #LearnToCode #DeveloperTips

*5 Things I Wish I Knew When Starting JavaScript 👨💻* Looking back, JavaScript was both exciting and confusing when I started. Here are 5 things I wish someone had told me earlier: *1. `var` is dangerous. Use `let` and `const`* – `var` is function-scoped and can lead to unexpected bugs. `let` and `const` are block-scoped and safer. *2. JavaScript is asynchronous* – Things like `setTimeout()` and `fetch()` don’t behave in a straight top-down flow. Understanding the *event loop* helps a lot. *3. Functions are first-class citizens* – You can pass functions as arguments, return them, and even store them in variables. It’s powerful once you get used to it. *4. The DOM is slow – avoid unnecessary access* – Repeated DOM queries and manipulations can hurt performance. Use `documentFragment` or batch changes when possible. *5. Don’t ignore array methods* – `map()`, `filter()`, `reduce()`, `find()`… they make code cleaner and more readable. I wish I started using them sooner. 💡 *Bonus Tip:* `console.log()` is your best friend during debugging! If you’re starting out with JS, save this. And if you're ahead in the journey — what do *you* wish you knew earlier? #JavaScript #WebDevelopment #CodingJourney #Frontend #LearnToCode #DeveloperTips

🚀 JavaScript Hoisting Explained (Simply!) Hoisting means JavaScript moves all variable and function declarations to the top of their scope before code execution. If that definition sounds confusing, see this example 👇 console.log(a); var a = 5; Internally, JavaScript actually does this 👇 var a; // declaration is hoisted (moved up) console.log(a); a = 5; // initialization stays in place ✅ Output: undefined --- 🧠 In Short: > Hoisting = JS reads your code twice: 1️⃣ First, to register variables & functions 2️⃣ Then, to execute the code line by line --- 💡 Tip: var → hoisted & initialized as undefined let / const → hoisted but not initialized (stay in Temporal Dead Zone) --- #JavaScript #Hoisting #WebDevelopment #CodingTips #JSInterview #Frontend #React #100DaysOfCode

The JavaScript Event Loop — The Hidden Multitasking Hero If JavaScript is single-threaded, how does it look like it’s doing so many things at once? 🤔 Meet the Event Loop — the patient snake 🐍 that makes everything flow smoothly. 🧩 In simple words: JS runs one thing at a time (main thread). When async tasks finish, the Event Loop decides when to bring them back into action — like a patient teacher calling students one by one from different queues 😄 ✨ Takeaway: --> Promises (microtasks) always run before setTimeout (macrotasks). --> JS isn’t truly “multi-threaded” — it’s just a great illusionist. 🎩 Next up → 🧠 “this” Keyword — The Most Confused Owl in JavaScript 🦉 #JavaScript #EventLoop #AsyncJS #WebDevelopment #FrontendDevelopment #CodingCommunity #100DaysOfCode #LearnToCode #MERNStack #ProgrammingHumor

JavaScript for 15 Days – Day 5: Functions Today, You will learn about Functions, one of the most important concepts in JavaScript. A function is basically a reusable block of code that performs a specific task. It helps you write cleaner, more organized, and less repetitive code. Example: function greet(name) { return `Hello, ${name}!`; } console.log(greet("Moussa")); // Hello, Moussa! Why functions matter: - They make your code reusable and modular. - They improve readability. - They help you manage logic step by step. JavaScript also supports arrow functions and function expressions, which you’ll explore in slides! #JavaScript #FrontendDevelopment #CodingJourney #LearnToCode #WebDevelopment #15DaysJS #DevPerDay