Learning to use APIs and fetch() in JavaScript

Today marks Day 4 of my MERN Stack Learning Series! I explored one of the most important parts of JavaScript — Arrays and Strings, the foundation of data handling and manipulation in every modern web application. 📘 Key Concepts Covered: 🔹 What is an Array and how it works 🔹 Top 5 Array Methods — push(), pop(), map(), filter(), forEach() 🔹 Top 5 String Methods — length, toUpperCase(), slice(), replace(), split() 🔹 Real-life use cases in MERN projects This session helped me understand how these structures make JavaScript efficient for managing and transforming data — a skill every web developer needs! #MERNStack #JavaScript #LearningJourney #WebDevelopment #CodingCommunity #ShubhamJadhav #DeveloperGrowth

Async vs Sync… in real life (and in JavaScript) Ever notice how cooking and coding have a lot in common? If you cook synchronously, it goes like this: boil pasta → wait → chop veggies → wait → make sauce → wait. By the end, the pasta is mush, the sauce is cold, and you’re questioning your life choices. ⏳ Now, cook asynchronously: start boiling pasta, chop veggies while it cooks, prep the sauce while veggies are chopping, maybe even put a dessert in the oven. Everything happens at once, nothing waits around, and somehow, dinner is ready on time. ✅ JavaScript async works the same way. Fetching user data? Instead of freezing the whole app until the response arrives, async lets your page keep scrolling, buttons stay clickable, and typing uninterrupted. When the data arrives, the UI updates like magic. It’s basically multitasking… without chaos. Next time your code is waiting for something, think: “Could this be async?” 💡 #JavaScript #Coding #WebDevelopment #AsyncProgramming #FrontendDev #CodeTips #SyncProgramming

🔁 Exploring JavaScript Loops & Data Structures 🚀 Continuing my JavaScript journey, I moved ahead to one of the most essential concepts — Loops and Data Structures. Loops helped me understand how repetitive tasks can be automated efficiently. Learning how to use for, while, and forEach loops gave me clarity on how logic flows and how powerful iteration can be for problem-solving. I even built small projects to strengthen this understanding — each helping me think more logically and write cleaner, optimized code. Then came Data Structures, where I focused mainly on Arrays and Objects — the most commonly used structures in JavaScript. I explored: 🔹 Creating and updating objects 🔹 Working with arrays of objects 🔹 Common Array Methods like map(), filter(), reduce(), and find() 🔹 Array transformation techniques to handle data dynamically This part of learning made me realize how important it is to structure and manipulate data efficiently — something that forms the foundation of every modern web application. #JavaScript #WebDevelopment #CodingJourney #FrontendDevelopment #LearningJourney #MERNStack

🎯 𝗠𝗮𝘀𝘁𝗲𝗿 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝘄𝗶𝘁𝗵 𝗧𝗵𝗶𝘀 𝗨𝗹𝘁𝗶𝗺𝗮𝘁𝗲 𝗖𝗵𝗲𝗮𝘁 𝗦𝗵𝗲𝗲𝘁! If you want to level up your JavaScript skills, this comprehensive JavaScript Cheat Sheet is the perfect quick reference for developers at any stage — beginner to advanced. 💡 𝗪𝗵𝘆 𝗬𝗼𝘂’𝗹𝗹 𝗟𝗼𝘃𝗲 𝗧𝗵𝗶𝘀 𝗖𝗵𝗲𝗮𝘁 𝗦𝗵𝗲𝗲𝘁: This guide brings together all the essential syntax, concepts, and best practices to help you write cleaner, faster, and more efficient code. It’s designed to save time, enhance productivity, and simplify problem-solving in real-world projects. ⚙️ 𝗪𝗵𝗮𝘁’𝘀 𝗜𝗻𝘀𝗶𝗱𝗲: ✅ Core Concepts – Variables, data types, operators, and control structures ✅ Functions – Arrow functions, higher-order functions, and callbacks ✅ Objects & Arrays – Destructuring, spreading, and deep copying ✅ ES6+ Features – Let/const, template literals, modules, and classes ✅ Asynchronous JS – Promises, async/await, and event loop explained ✅ DOM Manipulation – Querying, events, and dynamic UI updates ✅ Error Handling – Try/catch, custom errors, and debugging tips ✅ Interview Essentials – Closures, hoisting, prototypes, and this keyword 🚀 Whether you’re building with React, Node.js, or working on MERN stack projects, this cheat sheet will help you code smarter and faster. credit 🫡 👉 Sushant Desai #JavaScript #MERN #ReactJS #NodeJS #TypeScript #MongoDB #WebDevelopment #SoftwareEngineering #TechInterview #Coding

🚀 Let’s talk about something every beginner confuses — JavaScript Objects vs JSON Strings 💡 👉 JavaScript Object It’s the real, usable data inside your code. Example: const user = { name: "Anas", age: 21 }; You can access it directly: user.name → gives you "Anas" 👉 JSON String It’s the text version of that object — like saving it in a file or sending it over the internet. Example: const jsonString = '{"name": "Anas", "age": 21}'; Looks similar, but it’s just text — you can’t do jsonString.name because it’s not an object yet! 💡 Real-world use case: When your app talks to a server — say a weather app fetching data — the server sends info as JSON strings. Your JavaScript code then converts it into an object using: const data = JSON.parse(jsonString); …and now you can use it easily! 🧠 Think of it like this: Object → your living data inside JS JSON → a suitcase carrying that data safely to another computer 💼 #JavaScript #WebDevelopment #Beginners #CodingSimplified #JSON #Frontend

🚀 𝗪𝗵𝘆 𝗱𝗼𝗲𝘀𝗻’𝘁 𝗺𝘆 𝗔𝗣𝗜 𝗰𝗮𝗹𝗹 𝘄𝗮𝗶𝘁? That’s a question every JavaScript learner faces at some point. You try this 👇 const data = fetch("https://lnkd.in/gGpgs-MU"); console.log(data); and get: Promise { <pending> } 😕 No data. No city name. Just… pending. Here’s why — JavaScript doesn’t stop and wait. It’s 𝗮𝘀𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 — meaning it moves on while your API call is still in progress. That’s where 𝗣𝗿𝗼𝗺𝗶𝘀𝗲𝘀 and 𝗔𝘀𝘆𝗻𝗰/𝗔𝘄𝗮𝗶𝘁 come in. They help your app “wait politely” for the data — without freezing everything else. 💡 In my latest beginner-friendly blog, I explain: - What Promises really are - How Async/Await makes async code readable - How to handle errors properly - And a mini project: Weather App with fetch() 📖 Read it here: 👉 https://lnkd.in/gBvD9DWD 🔗 Connect with me: 🌐 GitHub: https://lnkd.in/gE2g7ryy 💼 LinkedIn: https://lnkd.in/gx4HvWxF 💻 Dev.to: https://lnkd.in/g2ptGRBW 💬 What’s one JavaScript concept that confused you the most when you started learning? Let’s help each other out 👇 📢 Follow me for more beginner-friendly blogs, interview tips, and JavaScript explainers that actually make sense. #javascript #async #promises #react #frontend #webdevelopment #coding #programming #100daysofcode #learning #softwareengineering #beginners #devtips #developer #techcommunity

🔍 𝗛𝗼𝘄 `𝗪𝗲𝗮𝗸𝗠𝗮𝗽` 𝗮𝗻𝗱 `𝗪𝗲𝗮𝗸𝗦𝗲𝘁` 𝗛𝗲𝗹𝗽 𝗣𝗿𝗲𝘃𝗲𝗻𝘁 𝗠𝗲𝗺𝗼𝗿𝘆 𝗟𝗲𝗮𝗸𝘀 𝗶𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 Memory leaks can sneak up on any developer—even the most vigilant. Fortunately, JavaScript’s `WeakMap` and `WeakSet` offer powerful tools to manage object lifecycles and avoid lingering references. In this article, you’ll learn: ✅ What sets `WeakMap` and `WeakSet` apart from `Map` and `Set` ✅ How these weak-referenced structures let garbage collector clean up unused objects ✅ Practical patterns: caching objects safely, managing metadata, and building memory-safe data structures 👉 𝗥𝗲𝗮𝗱 𝘁𝗵𝗲 𝗳𝘂𝗹𝗹 𝗴𝘂𝗶𝗱𝗲 𝗵𝗲𝗿𝗲: https://lnkd.in/diZEe_k9 When your app runs longer, or handles complex object graphs, these tools are game-changers. #JavaScript #WebDevelopment #MemoryManagement #Performance #WeakMap #WeakSet #CodingTips

🚀 Deep Clone an Object in JavaScript (the right way!) Most of us have tried this at least once: const clone = JSON.parse(JSON.stringify(obj)); …and then realized it breaks when the object has functions, Dates, Maps, or undefined values 😬 Let’s fix that 👇 ❌ The Problem with JSON.parse(JSON.stringify()) >It’s quick, but it: >Removes functions >Converts Dates into strings >Skips undefined, Infinity, and NaN >Fails for Map, Set, or circular references ✅ Option 1: Use structuredClone() (Modern & Fast) Available in most modern browsers and Node.js (v17+). It can handle Dates, Maps, Sets, and even circular references — no errors, no data loss. const deepCopy = structuredClone(originalObject); Simple, native, and reliable 💪 ✅ Option 2: Write Your Own Recursive Deep Clone Useful for older environments or if you want to understand the logic behind cloning. 💡 Pro Tip: If you’re working with complex or nested data structures, always prefer structuredClone(). It’s the modern, built-in, and safest way to deep clone objects in JavaScript. 🔥 Found this useful? 👉 Follow me for more JavaScript deep dives made simple — one post at a time. #JavaScript #WebDevelopment #FrontendDevelopment #CodingTips #LearnJavaScript #Programming #DeveloperCommunity #WebDev #ES6 #JSDeveloper #JavaScriptTips #JavaScriptObjects #JavaScriptClone #JavaScriptCloneObject

DAY 20: * Node.js was developed by Ryan Dahl in 2009 to allow JavaScript to run on the server side, not just in browsers. * It uses Google’s V8 engine for fast execution and is designed for handling many simultaneous connections using an event-driven, non-blocking I/O model. * Node.js popularized using JavaScript for backend development, making full-stack development easier and introducing npm (Node Package Manager) for sharing and managing code libraries. * The V8 engine is an open-source JavaScript engine originally developed by Google for Chrome and adopted by Node.js. * It compiles JavaScript into native machine code (not just interpreting), making execution very fast, and supports modern JavaScript features. * Key technologies include Just-In-Time (JIT) compilation, efficient garbage collection, and runtime optimizations through its Ignition interpreter and Turbofan compiler logical operators: 1. && 2. || 3. ! * Comparsion operator 1.== : equal to 2. != : not equal to 3. > : greater than 4. < : less than 5. >= : greater than or equal to 6. <= : less than or equal to 7. === : strict equality (value and type) 9. !== : strict inequality JavaScript Objects * An object is a collection of key-value pairs (properties and methods). * Created using curly braces {} and can hold any data type. JavaScript Arrays * Arrays hold ordered lists of values (elements), which can be of any data type. * Elements are accessed via their index starting at 0.

🧩 Top-Level Await - Async Code Made Simple! ⚡ JavaScript just got smarter - you can now use await directly at the top level of your modules without wrapping it inside an async function! 😎 💡 What it means: No more writing this 👇 (async () => {  const data = await fetchData();  console.log(data); })(); Now you can simply do 👇 const data = await fetchData(); console.log(data); ✅ Why it’s awesome: • Cleaner async code at the module level • Great for initializing data before rendering apps • Works perfectly with ES modules (ESM) • Makes async setup logic feel synchronous ⚙️ Use Case Example: Fetching config, environment data, or translations before your app starts 🌍 JavaScript keeps getting better - less boilerplate, more clarity! 💪 #JavaScript #AsyncProgramming #WebDevelopment #ReactJS #ReactNative #ESModules #CodingTips #FrontendDevelopment #TypeScript #Developer