Understanding Fetch API in JavaScript with async/await

Just published another blog This time on Variables and Data Types in JavaScript. While revisiting the fundamentals, I realized how important it is to clearly understand how variables work and the different data types in JavaScript. These basics shape how we write and think about code. In this blog, I’ve tried to break things down in a simple and easy-to-understand way. If you’re starting out with JavaScript or brushing up your fundamentals, feel free to check it out: https://lnkd.in/d7zxdGMZ Open to feedback and suggestions 🙂 #JavaScript #WebDevelopment #LearningInPublic #BuildInPublic #ChaiCode

Just published a new blog on JavaScript Arrays 🚀 Arrays are one of the most commonly used data structures in JavaScript, but understanding how they actually work makes writing cleaner and more efficient code. In this post I covered: • How arrays are created in JavaScript • How they store and manage data • Basic operations developers use every day This article is part of my effort to revisit JavaScript fundamentals and document the learning along the way. If you're learning JavaScript or refreshing your basics, this might be helpful. #javascript #webdevelopment #programming #frontend #developers url - https://lnkd.in/d7kAfXpf Chai Aur Code Akash Kadlag Barun Tiwary @jay Hitesh Choudhary Piyush Garg

💡 Pass by Value vs Pass by Reference in JavaScript (Simple Explanation) If you're learning JavaScript, understanding how data is passed is crucial 👇 🔹 Pass by Value (Primitives) When you assign or pass a primitive type (number, string, boolean, null, undefined, symbol, bigint), JavaScript creates a copy. let a = 10; let b = a; b = 20; console.log(a); // 10 console.log(b); // 20 👉 Changing b does NOT affect a because it's a copy. 🔹 Pass by Reference (Objects) When you work with objects, arrays, functions or date objects, JavaScript passes a reference (memory address). let obj1 = { name: "Ali" }; let obj2 = obj1; obj2.name = "Ahmed"; console.log(obj1.name); // Ahmed console.log(obj2.name); // Ahmed 👉 Changing obj2 ALSO affects obj1 because both point to the same object. 🔥 Key Takeaway Primitives → 📦 Copy (Independent) Objects → 🔗 Reference (Shared) 💭 Pro Tip To avoid accidental changes in objects, use: Spread operator {...obj} Object.assign() Understanding this concept can save you from hidden bugs in real-world applications 🚀 #JavaScript #WebDevelopment #Frontend #Programming #CodingTips

🚀 JavaScript Day 2 – Deep Understanding of Core Concepts Today I focused on understanding each concept in detail with definitions and clarity 💻🔥 📌 Topics & Definitions: 🌐 Origin of JavaScript JavaScript was created in 1995 by Brendan Eich to make web pages interactive. 📝 Variables Declaration Variables are used to store data values using let, var, or const. 🔒 Constants Declaration Constants (const) store values that cannot be reassigned after declaration. ⚠️ Old Method: var var is the old way of declaring variables, function-scoped and can cause issues. ❌ Problems with var No block scope Can be redeclared Causes bugs due to hoisting 🔑 let vs const let → value can change const → value cannot change 📊 Data Types in JavaScript 👉 Primitive Data Types (Immutable) Number 🔢 → Stores numeric values String 🧵 → Stores text Boolean ✅❌ → true/false values Undefined ❓ → Variable declared but not assigned Null ⚪ → Intentional empty value BigInt 💡 → Large integers beyond Number limit Symbol 🔐 → Unique identifier 👉 Non-Primitive Data Types (Mutable) Array 📦 → Collection of values Object 🧱 → Key-value pairs Function ⚙️ → Reusable block of code 🧠 Important Concepts: 🔍 Null vs Undefined undefined → value not assigned null → intentionally empty ⚙️ typeof Operator Used to check data type of a value 🤯 typeof null Bug typeof null returns "object" (this is a known JavaScript bug) 🔒 Immutability (Primitive) Primitive values cannot be changed directly 🔄 Mutability (Non-Primitive) Objects & arrays can be modified 📥 Pass by Value Primitive values are copied when assigned 🔗 Pass by Reference Objects are assigned by reference (memory address) 💡 Why Pass by Reference? To save memory and improve performance 📅 Day 2 Complete ✔️ Building strong fundamentals step by step 💪 #JavaScript #LearningJourney #Day2 #Coding #WebDevelopment #Programming #Developer

Day 87 of me reading random and basic but important dev topicsss....... Today I read about the Blobs in JavaScript As a developer, we deal with file uploads or downloads in the browser. But what happens under the hood and how JS handles binary data? While ArrayBuffer is part of the core ECMA standard, the browser’s File API gives us a higher-level abstraction: The Blob (Binary Large Object). What exactly is a Blob? Unlike a raw ArrayBuffer, a Blob represents binary data with type. It consists of an optional string type (usually a MIME-type) and blobParts (a sequence of strings, BufferSources, or even other Blobs). Construction We construct them by passing an array of parts and an options object: let blob = new Blob( [new Uint8Array([72, 101, 108, 108, 111]), ' ', 'world'], { type: 'text/plain', endings: 'native' } ); Immutability Just like JavaScript strings, Blobs are entirely immutable. We cannot directly edit the data inside a Blob. However, we can create new Blobs from existing ones using the .slice() method: blob.slice([byteStart], [byteEnd], [contentType]); This allows us to chop up files for chunked uploads or assemble new files in memory without altering the original binary data. Keep Learning!!!!! #JavaScript #WebDevelopment #FrontendDev #SoftwareEngineering #WebAPIs

Array methods are built-in functions that make it easier to add, remove, search, or transform data in an array, without writing complex loops. If you’re learning JavaScript basics, this might be useful: https://lnkd.in/gDy7in5h Feedback is welcome. Hitesh Choudhary Piyush Garg Anirudh Jwala

🚀 JavaScript Concepts Series – Day 1 👀 Let's Revise Basics 🧐 📌 JavaScript has two main categories of data types: 1️⃣ Primitive Data Types (Immutable): These store a single value and are not objects. • String • Number • Boolean • Undefined • Null • Symbol • BigInt Example: let name = "Deepak"; // String let age = 27; // Number let isDev = true; // Boolean 2️⃣ Non-Primitive (Reference) Data Types: These store collections of data or complex entities. • Object • Array • Function 👀 Example: let user_Object = { name: "Deepak", role: "Developer" }; let skills_Array = ["JavaScript", "React"]; function greet_Function() { console.log("Hello Developer"); } 💡 Key Insight: Primitive values are stored by value, while non-primitive values are stored by reference. #javascript #webdevelopment #frontenddeveloper #reactjs #coding

𝗧𝗵𝗶𝘀 𝗜𝘀 𝗔 𝗟𝗶𝗻𝗸𝗲𝗱𝗜𝗻 𝗣𝗼𝘀𝘁 JavaScript has many small features that can make your code cleaner and easier to maintain. You can use these features to write better code. Here are some tricks to help you: - Remove duplicates from an array with Set - Convert anything to a boolean with double negation - Swap variables with destructuring - Use optional chaining to avoid long nested checks - Provide fallback values easily with ?? - Use console.table for debugging Some other tricks include: - Using Array.from to create an array - Using flat to flatten an array - Using Object.entries to get an array of key-value pairs - Using Object.fromEntries to create an object from an array - Using at to get the last element of an array - Using filter to remove falsey values - Using console.table to display data in a readable table - Using Promise.all to run multiple promises at the same time - Using debounce to delay a function - Using Math.random to generate a unique string - Using includes to check if an array includes a value - Using structuredClone for deep cloning You don't need to memorize all of these tricks. But using them can help you write cleaner code, reduce boilerplate, and improve readability. What's your favorite JavaScript trick? Share it in the comments. Source: https://lnkd.in/gUdrjCvm

Just wrapped up my 3rd JavaScript project - a Random Quote Generator! 🎲 This one was different. Not because it's complex (it's actually pretty simple), but because I finally *got* async/await. I've been reading about Promises and .then() chains for weeks. Understood them conceptually, but they always felt... messy? Like I was fighting with the syntax instead of just writing code. Then I rebuilt this project using async/await and something clicked. The code just reads like normal code. Top to bottom. No nesting. Clean error handling. It finally makes sense. Here's what changed for me: Before (with .then chains): fetch(url)  .then(response => response.json())  .then(data => displayQuote(data))  .catch(error => handleError(error)); After (with async/await): async function getQuote() {  try {   const response = await fetch(url);   const data = await response.json();   displayQuote(data);  } catch (error) {   handleError(error);  } } Same functionality. Way easier to read. The debugging moment that taught me the most: Spent 15 minutes wondering why my quote wasn't displaying. Kept getting "undefined." Turns out the API returns an array, not an object. So data.quote didn't work. But data[0].quote did. Simple fix. But it taught me to always console.log() API responses first before assuming their structure. Built in about an hour. Learned way more than an hour's worth. Small projects. Real learning. 🌐 Live: https://lnkd.in/gsf3dvfe 💻 Code: https://lnkd.in/gt2mwRFH #JavaScript #AsyncAwait #WebDevelopment #100DaysOfCode #LearningInPublic

ICYMI: By processing millions of CSV rows directly in the browser, this tutorial shows how WebAssembly outpaces JavaScript when the data gets big. By Jessica Wachtel