Mastering JavaScript Fundamentals: this, try...catch, Arrow Functions, setTimeout, setInterval

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

Day 4 – Going Deep into JavaScript Foundations Most people rush to frameworks. Today, I went deeper into the core of JavaScript. Not just watching lectures — but actually testing everything in the browser console. 📌 What I practiced today: Linking JS with HTML Script tag placement Understanding defer How browser loads JS Variables (var, let, const) Scope differences Reassignment & redeclaration Why const should be default Expressions vs Statements Why 5 + 10 gives value instantly Why let x = 10; doesn’t Data Types & Special Values Infinity NaN undefined null Symbol typeof behavior Primitive vs Reference (Mind-Blowing Part 🧠) Copy by value Copy by reference Memory visualization with objects Realization today: JavaScript isn’t confusing. We just skip understanding how it actually works. Strong fundamentals = fewer bugs + better logic. This is Day 4 of rebuilding my foundation from scratch. Consistency over hype 🔥 #JavaScript #FrontendDeveloper #BuildInPublic #DeveloperJourney #SheriyansCodingSchool #WebDevelopment

📌 LinkedIn Post Content 🚀 30 Days of JavaScript – Day 7 Continuing my journey of improving JavaScript logical thinking by solving small problems daily. 💡 Today’s Program: Remove Duplicate Numbers from an Array This program takes numbers as input and removes duplicate values to create a list of unique numbers. 🧠 Concepts Used: • Arrays • split() and map() • includes() method • for loop • Conditional logic Example: Input → 1,2,3,2,4,1,5 Output → [1,2,3,4,5] 🎥 Demo below 👇 Full source code in the First comment. #JavaScript #CodingJourney #ProblemSolving #WebDevelopment #LearningJavaScript

🚀 30 Days of JavaScript – Day 6 Continuing my journey to improve my JavaScript logical thinking by building small programs every day. 💡 Today’s Program: Find the Largest Number (User Input) This program allows the user to enter numbers separated by commas and then finds the largest number in the list. 🧠 Concepts Used: • prompt() for user input • split() to convert input into an array • map(Number) to convert strings into numbers • for loop for iteration • Conditional comparison (if statement) 📌 Example Input: 10,25,7,90,30 Output: Largest Number: 90 🎥 Demo below 👇 Full source code in the First comment. #JavaScript #WebDevelopment #CodingJourney #ProblemSolving #LearningJavaScript #30DaysOfCode

🚀 Today’s JavaScript Practice: Merging Two Arrays Using a For Loop Today I practiced how to merge two arrays in JavaScript using a for loop instead of built-in methods. This helped me better understand how array indexing and loops work internally. 🔹 First, I created two arrays with some numbers. 🔹 Then I used a for loop to copy elements from the first array into a new array. 🔹 After that, I used another for loop to add elements of the second array after the first array’s elements. 💻 Example idea: data1 = [10,20,30,40,50] data2 = [60,70,80,90,100] ✅ Result → [10,20,30,40,50,60,70,80,90,100] You can also check my GitHub profile for more practice projects and code. #DSA #JavaScript #WebDevelopment #CodingPractice 😊

Today I explored one of the most confusing but fascinating concepts in JavaScript — The Event Loop. JavaScript is single-threaded, but it still handles asynchronous tasks like API calls, timers, and promises smoothly. The magic behind this is the Event Loop. Here’s the simple flow: 1️⃣ Call Stack – Executes synchronous code 2️⃣ Web APIs – Handles async tasks (setTimeout, fetch, DOM events) 3️⃣ Callback Queue / Microtask Queue – Stores callbacks waiting to execute 4️⃣ Event Loop – Moves tasks to the call stack when it’s empty 💡 Example: console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); Promise.resolve().then(() => { console.log("Promise"); }); console.log("End"); 🧠 Output: Start End Promise Timeout Why? Because Promises go to the Microtask Queue which runs before the Callback Queue. ✨ Learning this helped me finally understand how JavaScript manages async behavior without multi-threading. Tomorrow I plan to explore another interesting JavaScript concept! Devendra Dhote Ritik Rajput #javascript #webdevelopment #frontenddeveloper #100DaysOfCode #learninginpublic #codingjourney #sheryianscodingschool

🚀 Day 85 of My #100DaysOfCode Challenge One of the most confusing things in JavaScript is the "this" keyword. Many developers think "this" always refers to the current object… but that’s not always true. In JavaScript, the value of "this" depends on how a function is called, not where it is written. Let’s see a quick example 👇 const user = { name: "Tejal", greet() { console.log(this.name); } }; user.greet(); ✅ Output Tejal Here "this" refers to the object that called the function. But look at this 👇 const user = { name: "Tejal", greet: () => { console.log(this.name); } }; user.greet(); ❌ Output undefined Why? Because arrow functions don’t create their own "this". They inherit "this" from the surrounding scope. ⚡ Simple rule to remember • Regular functions → "this" depends on how the function is called • Arrow functions → "this" comes from the outer scope Understanding this small concept can save hours of debugging in real projects. JavaScript keeps reminding me that small details often make the biggest difference. #Day85 #100DaysOfCode #JavaScript #CodingJourney #WebDevelopment #LearningInPublic

📚 JavaScript Call Stack — Explained Without Code Imagine studying with a stack of books. You start Book A → It tells you to check Book B → Book B sends you to the Dictionary… Now you have a stack. You must finish the top book first before going back. 👉 That’s exactly how the JavaScript Call Stack works. ⚡ New function → Pushed onto the stack ✅ Finished task → Popped off the stack Rule: 🧠 Last In → First Out (LIFO) JavaScript has one desk and can do one task at a time. And yes… this is where the famous “Stack Overflow” error comes from 😄 Which concept confused you most while learning JavaScript? 1️⃣ Call Stack 2️⃣ Execution Context 3️⃣ Event Loop 4️⃣ Async / Promises Comment your number 👇 Let’s learn together 🚀 #JavaScript #WebDevelopment #Frontend #CodingConcepts #LearnInPublic #Developers #TechExplained

⚠️ The Danger of Splicing Arrays in a Loop "While solving the 'Move Zeroes' challenge today, I encountered a classic JavaScript pitfall: Modifying an array's length while iterating over it. The Mistake: Using .splice() inside a for loop. When you remove an element, the next one shifts left, and your loop index skips it! The Lesson: Always adjust your index or, even better, use the Two-Pointer technique. It's not just safer; it's much more performant for large datasets. Small bugs teach the biggest lessons! 🚀" "Did you know? JavaScript (ES6) allows you to swap array elements in a single line using destructuring : [a, b] = [b, a]. Clean, readable, and efficient!" Feel free to check out my progress and solutions on my LeetCode profile: I've shared my LeetCode profile link in the first comment below! #JavaScript #CodingTips #WebDevelopment #ProblemSolving #LeetCode #AngularDeveloper

🚀 Day 2/30 – Random Color Generator Continuing my 30 Days JavaScript Challenge. Today I built a Random Color Generator using HTML, CSS, and JavaScript. What it does: 🎨 Generates a random HEX color 🖱 Changes background on button click 🔢 Displays the color code dynamically What I learned: ✔ Math.random() logic ✔ DOM manipulation ✔ Updating styles dynamically ✔ Handling events properly Small projects, but strong fundamentals 💪 Live Demo: https://lnkd.in/gTw_h_G3 GitHub Repository: https://lnkd.in/gci2tTXc 28 more projects to go 🚀 #javascript #webdevelopment #codingjourney #30daysofcode #mernstack