How libuv powers Node.js async operations

🔍 𝗪𝗵𝗮𝘁 𝗶𝘀 𝘁𝗵𝗲 𝗖𝗮𝗹𝗹 𝗦𝘁𝗮𝗰𝗸? The Call Stack is a LIFO (Last In, First Out) data structure that JavaScript uses to track function execution. Every time a function is called, it’s pushed onto the stack, and once executed, it’s popped off. 📘 𝗘𝘅𝗮𝗺𝗽𝗹𝗲: function first() {   console.log("First");   second(); } function second() {   console.log("Second"); } first(); 𝗘𝘅𝗲𝗰𝘂𝘁𝗶𝗼𝗻 𝗙𝗹𝗼𝘄: 1️⃣ first() is pushed to the stack 2️⃣ console.log("First") runs 3️⃣ second() is called → pushed to stack 4️⃣ console.log("Second") runs → popped from stack 5️⃣ first() finishes → popped from stack ⚡ 𝗪𝗵𝗮𝘁 𝗶𝘀 𝘁𝗵𝗲 𝗘𝘃𝗲𝗻𝘁 𝗟𝗼𝗼𝗽? JavaScript is single-threaded, meaning it executes one task at a time. The Event Loop allows JS to handle asynchronous tasks like setTimeout, fetch, or DOM events without blocking the main thread. 𝗜𝘁 𝘄𝗼𝗿𝗸𝘀 𝗹𝗶𝗸𝗲 𝘁𝗵𝗶𝘀: 1. JS executes synchronous code in the Call Stack. 2. Asynchronous tasks are sent to Web APIs (like timers, HTTP requests). 3. Once ready, callbacks are queued in the Callback/Task Queue. 4. The Event Loop continuously checks if the Call Stack is empty — if yes, it pushes the next callback from the queue. 📘 𝗘𝘅𝗮𝗺𝗽𝗹𝗲: console.log("Start"); setTimeout(() => {   console.log("Inside Timeout"); }, 0); console.log("End"); 𝗢𝘂𝘁𝗽𝘂𝘁: Start   End   Inside Timeout Even with 0ms, setTimeout runs after the current stack is empty — that’s the Event Loop in action! 💡 𝗪𝗵𝘆 𝗧𝗵𝗶𝘀 𝗠𝗮𝘁𝘁𝗲𝗿𝘀 ✅ Helps you write non-blocking, performant code ✅ Explains tricky behaviors like async/await, promises, and timers ✅ Essential for interview questions — every JS developer should master it 🧠 𝗧𝗼𝗽 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄 𝗤𝘂𝗲𝘀𝘁𝗶𝗼𝗻 #𝟯: Q: Explain the Event Loop in JavaScript. A: The Event Loop is a mechanism that allows JS to handle asynchronous operations. It monitors the Call Stack and Callback Queue, ensuring that async callbacks are executed only when the stack is empty. 🎯 𝗞𝗲𝘆 𝗧𝗮𝗸𝗲𝗮𝘄𝗮𝘆𝘀: 1. JS is single-threaded, but async tasks are handled via the Event Loop. 2. The Call Stack manages execution context in LIFO order. 3. Understanding this prevents bugs related to timers, async code, and promise chaining. Comment if you’ve ever been confused why setTimeout(..., 0) doesn’t run immediately! #JavaScript #EventLoop #CallStack #AsyncJS #WebDevelopment #NodeJS #InterviewPreparation #TechTips #JavaScriptInterviewQuestions #FrontendDevelopment #CodingTips #AsyncProgramming

Day 77 of 100DaysOfCode – Understanding Async/Await, JS Engine & Geolocation API 🌍 Let’s break down three key JavaScript concepts every developer should understand 👇 🔹 1. What Is Async/Await, and How Does It Work? JavaScript is asynchronous — meaning it doesn’t wait for long tasks like fetching data or file reading to finish before moving on. That’s where async/await shines. It makes async code look simple and readable, like synchronous code. async function delayedGreeting(name) { console.log("A Messenger entered the chat..."); await new Promise(resolve => setTimeout(resolve, 2000)); console.log(`Hello, ${name}!`); } delayedGreeting("Alice"); console.log("First Printed Message!"); Here, the function pauses for 2 seconds before greeting Alice — but the rest of the program keeps running! We can also handle errors neatly using try/catch: async function fetchUserData() { try { let response = await fetch(`https://lnkd.in/dWvHabH4); let userData = await response.json(); console.log(userData); } catch (error) { console.log("Error fetching user data:", error); } } Async/await = cleaner syntax + better error handling ✨ 🔹 2. How Does the JavaScript Engine Work (and What Is a Runtime)? Think of the JavaScript engine as the “brain” that reads, understands, and executes your code. For example, Google Chrome and Node.js use the V8 Engine. When you run: const greeting = "Hello, World!"; console.log(greeting); The engine: Parses the code (checks for errors) Compiles it into machine-readable bytecode Executes it to print “Hello, World!” But the JavaScript runtime is more than just the engine — it’s the whole environment your code runs in. In the browser → runtime includes the DOM, Fetch API, and timers. In Node.js → runtime includes file systems, HTTP, etc. So the engine executes, while the runtime provides tools to interact with the outside world 🌍 🔹 3. What Is the Geolocation API and How Does getCurrentPosition Work? The Geolocation API lets websites request your location — but only with your permission (for privacy reasons). Example: navigator.geolocation.getCurrentPosition( (position) => { console.log("Latitude: " + position.coords.latitude); console.log("Longitude: " + position.coords.longitude); }, (error) => { console.log("Error: " + error.message); } ); This uses your device’s GPS, Wi-Fi, or IP address to determine your location. You get a position object that contains details like: latitude longitude accuracy altitude, and more. Always explain why your app needs location data and how it’ll be used — user trust is key. 💡 Wrap-Up: Async/Await simplifies asynchronous programming. JavaScript Engine executes code; Runtime gives it superpowers. Geolocation API helps apps know “where” the user is — responsibly.

🛑𝗦𝘁𝗼𝗽 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗙𝗿𝗮𝗺𝗲𝘄𝗼𝗿𝗸𝘀 𝗕𝗲𝗳𝗼𝗿𝗲 𝘁𝗵𝗲 𝗘𝗻𝗴𝗶𝗻𝗲: 𝗬𝗼𝘂𝗿 6-𝗣𝗵𝗮𝘀𝗲 𝗩𝗮𝗻𝗶𝗹𝗹𝗮 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗠𝗮𝘀𝘁𝗲𝗿𝘆 𝗥𝗼𝗮𝗱𝗺𝗮𝗽 The most common mistake I see new developers make? Skipping the foundation. You can learn a framework like React in a month, but you'll use pure JavaScript for a lifetime. If you want to be a resilient developer who can troubleshoot anything, this structured roadmap is for you. 🗺️ 𝗧𝗵𝗲 6-𝗣𝗵𝗮𝘀𝗲 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗪𝗲𝗯 𝗠𝗮𝘀𝘁𝗲𝗿𝘆 𝗥𝗼𝗮𝗱𝗺𝗮𝗽: This is the path to building a rock-solid foundation that recruiters and senior devs respect. I've curated the best free resources for each phase: 1️⃣ 𝗖𝗼𝗿𝗲 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗙𝗼𝘂𝗻𝗱𝗮𝘁𝗶𝗼𝗻 𝗙𝗼𝗰𝘂𝘀: Syntax, functions, arrays, loops, and objects. 𝗣𝗿𝗮𝗰𝘁𝗶𝗰𝗲: Build a Counter App or Random Quote Generator. 𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀: ➡️FreeCodeCamp : JS Algorithms ➡️Codewars ➡️HackerRank: 10 Days of JS ➡️ JSHero 2️⃣ 𝗗𝗢𝗠 𝗠𝗮𝗻𝗶𝗽𝘂𝗹𝗮𝘁𝗶𝗼𝗻 (𝗳𝗼𝗿 𝘁𝗵𝗲 𝗪𝗲𝗯) 𝗙𝗼𝗰𝘂𝘀: Make webpages dynamic with querySelector, addEventListener, etc. 𝗣𝗿𝗮𝗰𝘁𝗶𝗰𝗲: To-Do App or Color Theme Switcher. 𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀: ➡️Frontend Mentor: Real web component challenges ➡️JSFiddle ➡️CodePen 3️⃣ 𝗔𝗱𝘃𝗮𝗻𝗰𝗲𝗱 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 (𝗳𝗼𝗿 𝘁𝗵𝗲 𝗕𝗿𝗼𝘄𝘀𝗲𝗿) 𝗙𝗼𝗰𝘂𝘀: Closures, Promises, Async/Await, Fetch API. 𝗣𝗿𝗼𝗷𝗲𝗰𝘁: Fetch and display public API data (GitHub users, weather app). 𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀: ➡️JavaScript30 by Wes Bos ➡️Frontend Practice ➡️Exercism JS Track 4️⃣ 𝗕𝗿𝗼𝘄𝘀𝗲𝗿 + 𝗟𝗼𝗰𝗮𝗹 𝗦𝘁𝗼𝗿𝗮𝗴𝗲 / 𝗔𝗣𝗜 𝗣𝗿𝗼𝗷𝗲𝗰𝘁𝘀 𝗙𝗼𝗰𝘂𝘀: Real-world JS : persisting data & handling APIs. 𝗧𝗼𝗽𝗶𝗰𝘀: Local Storage, API integration, Error handling. 𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀: ➡️DevChallenges ➡️Scrimba ➡️Roadmap.sh 5️⃣ 𝗣𝗿𝗼𝗯𝗹𝗲𝗺-𝗦𝗼𝗹𝘃𝗶𝗻𝗴 & 𝗗𝗮𝘁𝗮 𝗦𝘁𝗿𝘂𝗰𝘁𝘂𝗿𝗲𝘀 𝗙𝗼𝗰𝘂𝘀: Logic, recursion, sorting, algorithms. 𝗣𝗿𝗮𝗰𝘁𝗶𝗰𝗲: Daily challenges to sharpen thinking. 𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀: ➡️LeetCode ➡️Edabit ➡️Codewars ➡️Coderbyte 6️⃣ 𝗕𝘂𝗶𝗹𝗱 𝗣𝗼𝗿𝘁𝗳𝗼𝗹𝗶𝗼 𝗣𝗿𝗼𝗷𝗲𝗰𝘁𝘀 Goal: Combine everything you’ve learned. Ideas: Expense Tracker (LocalStorage) or Movie App (OMDB API). 𝗠𝘆 𝗧𝗮𝗸𝗲𝗮𝘄𝗮𝘆: The time you spend mastering vanilla JS (Phases 1–3) pays lifelong dividends in debugging speed, framework fluency, and interview success. Which phase are you currently working on in your JavaScript journey? Drop the number (1–6) and one challenge you’ve overcome! #WebDevelopment #JavaScript #CodingJourney #FrontendDeveloper #Freelancing #LearningInPublic

💡 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗘𝘃𝗲𝗻𝘁 𝗟𝗼𝗼𝗽 — 𝗧𝗵𝗲 𝗥𝗲𝗮𝘀𝗼𝗻 𝗬𝗼𝘂𝗿 𝗖𝗼𝗱𝗲 𝗗𝗼𝗲𝘀𝗻’𝘁 𝗥𝘂𝗻 𝗶𝗻 𝗢𝗿𝗱𝗲𝗿⚙️ Most developers know about the Event Loop, but few truly understand how JavaScript executes your code step by step — from the Global Execution Context to Web APIs, Task Queues, and Microtasks 🌀 Let’s break it down like a system engineer 👇 🧠 𝗛𝗼𝘄 𝗶𝘁 𝗦𝘁𝗮𝗿𝘁𝘀 — 𝗧𝗵𝗲 𝗚𝗹𝗼𝗯𝗮𝗹 𝗘𝘅𝗲𝗰𝘂𝘁𝗶𝗼𝗻 𝗖𝗼𝗻𝘁𝗲𝘅𝘁 When JavaScript runs, it first creates a Global Execution Context (GEC) — this contains: -> the Memory Component (variables, functions) -> the Code Component (thread of execution) It’s stored in the Call Stack, which works on a simple principle — LIFO (Last In, First Out). ⚙️ 𝗪𝗵𝗮𝘁 𝗛𝗮𝗽𝗽𝗲𝗻𝘀 𝗪𝗵𝗲𝗻 𝗬𝗼𝘂 𝗖𝗮𝗹𝗹 𝗮 𝗧𝗶𝗺𝗲𝗿 𝗼𝗿 𝗔𝗣𝗜 The browser (or Node.js) provides Web APIs like: -> setTimeout -> fetch -> DOM events These are not part of JS itself — they are handled by the environment. Once completed, their callbacks move to the Task Queues. 🧩 𝗧𝘆𝗽𝗲𝘀 𝗼𝗳 𝗧𝗮𝘀𝗸 𝗤𝘂𝗲𝘂𝗲𝘀 1️⃣ Macrotask Queue (Task Queue): Contains → setTimeout, setInterval, setImmediate, fetch callbacks, and DOM events. 2️⃣ Microtask Queue: Contains → Promise.then, async/await, and process.nextTick (Node.js). ⚡ 𝗧𝗵𝗲 𝗘𝘃𝗲𝗻𝘁 𝗟𝗼𝗼𝗽 — 𝗧𝗵𝗲 𝗕𝗿𝗮𝗶𝗻 𝗼𝗳 𝗜𝘁 𝗔𝗹𝗹 After every macrotask, the Event Loop checks the Microtask Queue — and executes all microtasks before picking up the next macrotask. Why? Because microtasks are usually short, immediate reactions (like resolved Promises) and must run before the next rendering or I/O task. 🧩 𝗤𝘂𝗶𝗰𝗸 𝗗𝗲𝗺𝗼 console.log("Start"); setTimeout(() => console.log("Macrotask"), 0); Promise.resolve().then(() => console.log("Microtask")); console.log("End"); 📤 Output: Start End Microtask Macrotask ✅ The Microtask Queue (Promise) runs before Macrotask Queue (setTimeout). 💭 𝗧𝗮𝗸𝗲𝗮𝘄𝗮𝘆: JavaScript is single-threaded, but not blocking — thanks to the event loop and task queues managing concurrency intelligently⚙️ Understanding this flow separates coders from engineers. #JavaScript #EventLoop #FrontendDevelopment #AsyncProgramming #WebDevelopment #FrontendEngineer #100DaysOfCode #SoftwareEngineering #TechLearning #Coding

Have you ever explored how your JS code actually runs under the hood? Let’s discuss! 👇 🔹 #V8 Engine ⚙️ 🚀 You know! how JavaScript runs so fast inside Chrome and Node.js? Let’s talk about the secret here — the V8 Engine 🚀 What is the V8 Engine in JavaScript? The V8 engine is the “brain” that runs JavaScript code. It is made by Google, and it is used in Google Chrome and Node.js. V8 is Google’s open-source JavaScript engine that executes JS code directly as machine code, making it super fast and efficient. ⚙️ How does it work? 1. You write JavaScript code (like console.log("Hello World")). 2. The V8 engine: First reads and parses the code. Then converts it into machine code (the 0s and 1s your computer understands). Finally, it executes that machine code very fast. So V8 acts like a translator + executor — it turns JavaScript into computer language quickly. There are two Memory managements: 1)Heap Memory Heap Memory is where objects and dynamic data are stored.Heap Memory is like a storage space for your program's data. 2)Garbage Collector The Garbage Collector automatically cleans up unused memory, helping to free up space and prevent memory leaks. Garbage Collector is like a cleanup crew that removes stuff you don't need anymore . ✅ Advantages of V8 Engine 1. ⚡ High Performance – Runs JS faster than older interpreters. 2. 🔁 Just-In-Time (JIT) Compilation – Converts code to machine language while running it, improving speed. 3. 💻 Cross-platform – Works on Windows, Mac, Linux, etc. 4. 🧠 Memory Management – Handles garbage collection automatically (removes unused data from memory). 5. 🌍 Used in Node.js – Lets developers use JavaScript for both frontend and backend. Your JavaScript Code ↓ (Parsed by V8) ↓ V8 converts it to Machine Code ↓ Computer executes it fast! Example: console.log("Hello Everyone"); ↓ V8 reads it → converts to machine code → prints "Hello Everyone" ⚙️ Why it’s important to learn about it: -->It helps you understand how JavaScript actually runs behind the scenes. -->Gives you deeper insight into performance optimization. It’s the core reason JavaScript can be used for both frontend and backend development. 📘 #MyTakeAway: Learning about the V8 engine helped me understand JavaScript beyond syntax — it’s the technology that makes modern web apps and servers possible! #JavaScript #V8Engine #WebDevelopment #Learningjourney

𝗘𝘃𝗲𝗿𝘆 𝗥𝗲𝗮𝗰𝘁 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿 𝗛𝗮𝘀 𝗛𝗶𝘁 𝗧𝗵𝗲𝘀𝗲 𝗣𝗮𝗶𝗻 𝗣𝗼𝗶𝗻𝘁𝘀 👇 • You rename a prop → part of your page stops working. • The API returns null → your component crashes. • You forget one field in a state object → UI breaks. • You update a variable name → another file throws an error. • You deploy confidently - QA finds it in quick time. • You fix one bug → two new ones appear. 🔷 𝗪𝗵𝘆 𝗜𝘁 𝗛𝗮𝗽𝗽𝗲𝗻𝘀 • React doesn’t know what kind of data it’s getting • React uses plain JavaScript. • JavaScript is flexible and trusts you blindly - that means: • You can send a number where a string was expected. • You can forget a field like name or email. • You can call .map() on something that isn’t an array. • You won’t know it’s wrong until the browser crashes. 🔷 𝗪𝗵𝗮𝘁 𝗧𝘆𝗽𝗲𝗦𝗰𝗿𝗶𝗽𝘁 𝗔𝗰𝘁𝘂𝗮𝗹𝗹𝘆 𝗙𝗶𝘅𝗲𝘀 - 𝗮𝗻𝗱 𝗛𝗼𝘄 TypeScript adds a check layer before your React code runs. It looks at your props, state, and variables - and warns you early. 🔷 𝗨𝗻𝗱𝗲𝗿 𝘁𝗵𝗲 𝗵𝗼𝗼𝗱 • The TypeScript compiler (tsc) scans your code before React runs. • It checks what type of data each variable holds. • If something doesn’t match, it throws an error right in your editor. • TypeScript isn’t runtime validation -it’s compile-time protection. 🔷 𝗘𝘅𝗮𝗺𝗽𝗹𝗲: 𝗪𝗶𝘁𝗵𝗼𝘂𝘁 𝗧𝘆𝗽𝗲𝗦𝗰𝗿𝗶𝗽𝘁 const [user, setUser] = useState(); setUser({ id: 1, name: 123 }); // 𝗔𝗹𝗹𝗼𝘄𝗲𝗱, 𝗲𝘃𝗲𝗻 𝘁𝗵𝗼𝘂𝗴𝗵 '𝗻𝗮𝗺𝗲' 𝗶𝘀𝗻’𝘁 𝗮 𝘀𝘁𝗿𝗶𝗻𝗴 console.log(user.name.toUpperCase()); //𝗖𝗿𝗮𝘀𝗵: 𝘂𝘀𝗲𝗿 𝗶𝘀 𝘂𝗻𝗱𝗲𝗳𝗶𝗻𝗲𝗱 🔷 𝗪𝗶𝘁𝗵 𝗧𝘆𝗽𝗲𝗦𝗰𝗿𝗶𝗽𝘁 type User = { id: string; name: string }; const [user, setUser] = useState<User | null>(null); setUser({ id: "1", name: 123 }); // ❌ 𝗖𝗼𝗺𝗽𝗶𝗹𝗲-𝘁𝗶𝗺𝗲 𝗲𝗿𝗿𝗼𝗿 console.log(user?.name.toUpperCase()); // ✅ 𝗦𝗮𝗳𝗲 - 𝗵𝗮𝗻𝗱𝗹𝗲𝗱 𝗰𝗼𝗿𝗿𝗲𝗰𝘁𝗹𝘆 🔷 𝗕𝗲𝗻𝗲𝗳𝗶𝘁𝘀 𝗼𝗳 𝘂𝘀𝗶𝗻𝗴 𝗧𝘆𝗽𝗲𝘀𝗰𝗿𝗶𝗽𝘁 • Fewer runtime crashes • Safer API integration - types match backend responses • Shared types across projects (frontend + backend) • Easier debugging - errors point to the exact variable • 𝗧𝘆𝗽𝗲𝗦𝗰𝗿𝗶𝗽𝘁 𝗺𝗼𝘃𝗲𝘀 𝗲𝗿𝗿𝗼𝗿𝘀 𝗳𝗿𝗼𝗺 𝘁𝗵𝗲 𝗯𝗿𝗼𝘄𝘀𝗲𝗿 → 𝘁𝗼 𝘁𝗵𝗲 𝗲𝗱𝗶𝘁𝗼𝗿 𝗡𝗼𝘁𝗲: TypeScript isn’t needed in every React project. You can skip it in small apps, but as your codebase grows, it becomes more valuable. 🔷 𝗧𝗵𝗲 𝗖𝗼𝗿𝗲 𝗜𝗱𝗲𝗮 TypeScript isn’t about speed. It’s about stability, clarity, and control. You code faster, safer, and without fear of breaking things. Follow Saurav Kumar for practical React and TypeScript insights ✨ #TypeScript #ReactJS #React #Frontend #FrontendDevelopment #WebDevelopment #CleanCode #Programming

Day 76 of #100daysOfCode Understanding the Fetch API and Promises in JavaScript Today I learned about how the Fetch API works and how it connects with Promises in handling asynchronous operations. The Fetch API is what allows web applications to make network requests, retrieving or sending data to a server. A simple example looks like this: fetch('api.example.com/data') By default, fetch() makes a GET request, which is used to retrieve data. To work with the returned data, we usually convert it to JSON first: fetch('api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) Using the .then() method, we can handle the data once it’s ready — this is where Promises come in. A Promise represents the result of an asynchronous operation that may complete successfully or fail. Fetch isn’t limited to just GET requests, it can also handle: POST (send data to the server) PUT (update existing data) DELETE (remove data) We also use response.json() to parse the data before using it in our app. Common types of resources fetched from the network include APIs for weather data, country lists, or even media files like images, audio, and video. I also learned about Promise chaining, which lets us perform multiple async tasks in sequence: fetch('api.example.com/data') .then(res => res.json()) .then(data => fetch('api.example.com/more-data')) .then(res => res.json()) .then(moreData => console.log(moreData)) .catch(error => console.error('Error:', error)) The .catch() method handles any error in the entire chain, keeping our code cleaner and more predictable. Today’s lesson helped me understand how data actually flows between the client and server in modern JavaScript apps, and why promises are such a powerful tool for managing that flow.

Master Javascript : The JavaScript Tree | |── Variables | ├── var | ├── let | └── const | |── Data Types | ├── String | ├── Number | ├── Boolean | ├── Object | ├── Array | ├── Null | └── Undefined | |── Operators | ├── Arithmetic | ├── Assignment | ├── Comparison | ├── Logical | ├── Unary | └── Ternary (Conditional) ||── Control Flow | ├── if statement | ├── else statement | ├── else if statement | ├── switch statement | ├── for loop | ├── while loop | └── do-while loop | |── Functions | ├── Function declaration | ├── Function expression | ├── Arrow function | └── IIFE (Immediately Invoked Function Expression) | |── Scope | ├── Global scope | ├── Local scope | ├── Block scope | └── Lexical scope ||── Arrays | ├── Array methods | | ├── push() | | ├── pop() | | ├── shift() | | ├── unshift() | | ├── splice() | | ├── slice() | | └── concat() | └── Array iteration | ├── forEach() | ├── map() | ├── filter() | └── reduce()| |── Objects | ├── Object properties | | ├── Dot notation | | └── Bracket notation | ├── Object methods | | ├── Object.keys() | | ├── Object.values() | | └── Object.entries() | └── Object destructuring ||── Promises | ├── Promise states | | ├── Pending | | ├── Fulfilled | | └── Rejected | ├── Promise methods | | ├── then() | | ├── catch() | | └── finally() | └── Promise.all() | |── Asynchronous JavaScript | ├── Callbacks | ├── Promises | └── Async/Await | |── Error Handling | ├── try...catch statement | └── throw statement | |── JSON (JavaScript Object Notation) ||── Modules | ├── import | └── export | |── DOM Manipulation | ├── Selecting elements | ├── Modifying elements | └── Creating elements | |── Events | ├── Event listeners | ├── Event propagation | └── Event delegation | |── AJAX (Asynchronous JavaScript and XML) | |── Fetch API ||── ES6+ Features | ├── Template literals | ├── Destructuring assignment | ├── Spread/rest operator | ├── Arrow functions | ├── Classes | ├── let and const | ├── Default parameters | ├── Modules | └── Promises | |── Web APIs | ├── Local Storage | ├── Session Storage | └── Web Storage API | |── Libraries and Frameworks | ├── React | ├── Angular | └── Vue.js ||── Debugging | ├── Console.log() | ├── Breakpoints | └── DevTools | |── Others | ├── Closures | ├── Callbacks | ├── Prototypes | ├── this keyword | ├── Hoisting | └── Strict mode | | END __

Can we have a boolean index signature in TypeScript? 🤔 In #javascript we can use any data to index object properties, but in reality the object will have only string keys, as the keys will be serialized. 💡 #typescript reflects this fact - it will display an error, when we use boolean, Date, Array or other values as an object property key. The exception is the number type, for which the compiler recognizes an index signature. This supports the array semantics, where we access properties sequentially, so we can do arr[i++] instead of arr[`${i++}`]. 👍 So what if we want to use the boolean values as object keys without typescript stopping us? I've explored this problem, not as a practical one, but as a type challenge. As it turns out the TypeScript mapped types and template literals are powerful enough to get this done. ⚡ Read more: https://lnkd.in/evxDp3Re

#4 Just wrapped up an intense session on the backbone of JavaScript: Arrays and Objects. These aren't just data structures; they're the building blocks for everything we do. Here’s a quick rundown of my key takeaways: JavaScript Deep Dive: Taming Arrays & Objects! 🚀 📌 Arrays: The Ordered Lists More than just [1, 2, 3], arrays are powerhouses with methods that can make or break your code. The Mutable vs. Immutable Showdown: slice(): The polite one. It takes a copy of a section without disturbing the original. splice(): The disruptive one. It removes/replaces elements in the original array. (A classic interview question! ✅) Combining Arrays: Forget push(array) which creates nested arrays! Use concat() or the more modern Spread Operator ... to cleanly merge arrays. Powerful Prototypes: Methods like Array.from() to create arrays from array-like objects (like a string) and flat() to flatten nested arrays are game-changers. 📌 Objects: The Key-Value Kings Objects store structured data, and mastering them is non-negotiable. Two Ways to Create: Object Literals: const obj = { key: 'value' } (Most common) Constructor: Object.create() (Creates a singleton) Constructor method with new Object() Accessing Properties: You can use dot notation (obj.key) or bracket notation (obj["key"]). Bracket notation is essential for keys with spaces or dynamically generated keys. Symbol as a Key: You can use a Symbol for a unique, non-enumerable property key. A hidden gem for defining special properties. Object.freeze() vs. Object.seal(): - freeze(): Makes an object immutable. No changes, additions, or deletions. - seal(): Allows modification of existing properties, but prevents adding or removing new ones. 🔥 Leveling Up: Higher-Order Functions & Destructuring Array Methods that Shine: - map(): Transform each element. (Create a new array of doubled values). - filter(): Select elements based on a condition. - reduce(): Boil down the array to a single value (like a sum). - forEach(): Execute a function for each element (but doesn't return a new array like map). Destructuring Magic: This is a syntax superpower! - Arrays: const [first, second] = myArray - Objects: const { name, email } = userObject It makes code incredibly clean and readable, especially in function parameters and React props. 💡 The Big Revelation: Understanding the difference between shallow copy and deep copy is crucial when working with these structures to avoid unintended side effects. It's amazing how much power is packed into these fundamentals. The more you learn, the more you realize how elegant and powerful JavaScript can be. What's your favorite JavaScript array or object method? Any "aha!" moments when you first understood destructuring? Share below! 👇 #JavaScript #Programming #WebDevelopment #Coding #LearnToCode #SoftwareEngineering #Arrays #Objects #Destructuring #LinkedInLearning #Tech