Learning JavaScript Essentials with Hitesh Choudhary

Day 19 of my Chai Code web development journey Today was a revision day. I went through the last two lectures on JavaScript Essentials again, and honestly, this helped more than learning something new. When I first learned these topics, I understood them at a surface level. But during revision, things started making more sense, especially around arrays and objects. I focused mainly on the concepts that are actually used in real projects: Arrays: map, filter, reduce slice vs splice mutating vs non-mutating methods sort with compare function Objects: Object.keys, values, entries dot vs bracket notation freeze vs seal property checks using "in" and hasOwnProperty One thing I noticed: Before, I was just writing these methods. Now I’m starting to understand when and why to use them. For example: ->map for transforming data ->filter for selecting data ->reduce for combining data Also revised some important fundamentals: ->shallow vs deep copy ->how data can get unintentionally mutated ->why immutability matters in real applications Big takeaway from today: Revision is where actual understanding happens. Learning once is not enough, you have to revisit it. Day 19 done. Consistency continues. Thank you Hitesh Choudhary sir, Piyush Garg sir, Anirudh Jwala sir, Suraj Kumar Jha for the support. #JavaScript #WebDevelopment #CodingJourney #LearnInPublic #LearnToCode #100DaysOfCode #Developers #Programming #TechCareers

Day 19 / 40 – Frontend Learning Challenge Today I learned about the Spread (...) and Rest (...) Operators in JavaScript. At first, they look the same, but they serve different purposes depending on how they’re used. Spread Operator (...) The spread operator is used to expand elements from arrays or objects. Example with Arrays const nums = [1, 2, 3]; const newNums = [...nums, 4, 5]; console.log(newNums); // [1, 2, 3, 4, 5] Example with Objects const user = { name: "Alex", age: 22 }; const updatedUser = { ...user, role: "Frontend Developer" }; console.log(updatedUser); Useful for copying and merging data Rest Operator (...) The rest operator is used to collect multiple elements into one. Example with Function Parameters function sum(...numbers) { return numbers.reduce((total, num) => total + num, 0); } console.log(sum(1, 2, 3, 4)); // 10 Example with Arrays const [first, ...rest] = [10, 20, 30, 40]; console.log(first); // 10 console.log(rest); // [20, 30, 40] Useful when working with dynamic or unknown number of values Key Difference • Spread → Expands data • Rest → Collects data Why This Matters in Frontend Development These operators are widely used in: • React (props handling, state updates) • API data manipulation • Writing clean and concise code • Avoiding mutation of original data Day 19 complete — getting more comfortable with modern JavaScript #40DaysOfCode #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #Day10OfCoding #LearnToCode #HTML #CodingJourney #BuildInPublic #WebDesign #ProgrammingJourney

After understanding how JavaScript runs inside the engine (V8, JIT, etc.), today I moved one layer deeper into how JavaScript actually executes code internally. 🔹 Execution Context (EC) JavaScript runs code inside something called an Execution Context, which is basically the environment where code is evaluated and executed. There are two main types: 1. Global Execution Context (GEC) → created once when the program starts 2. Function Execution Context (FEC) → created every time a function is called Each execution context goes through two phases: 1. Creation Phase (Memory Setup) - Variables (var) are initialised as undefined - let/const are in the Temporal Dead Zone - Functions are fully stored in memory - Scope chain is determined 2. Execution Phase - Code runs line by line - Variables get actual values - Functions are executed 🔹 Call Stack (Execution Stack) JavaScript uses a call stack (LIFO) to manage execution: - When a function is called → pushed to stack - When it finishes → popped from stack - This helps track exactly what is running at any moment 🔹 Hoisting During the creation phase: - var → hoisted as undefined - let/const → hoisted but not initialised (TDZ) - Functions → fully hoisted 🔹 Lexical Scope Scope is determined by where code is written, not where it is called. This is why inner functions can access outer variables. 🔹 Closures Closures allow a function to remember variables from its outer scope, even after the outer function has finished execution. This is a powerful concept used in: - Data privacy - State management - Real-world application logic 💡 Big realisation from today: Understanding execution context and the call stack makes JavaScript feel much less “magical” and much more predictable. Instead of guessing what the code will do, I can now trace exactly how it runs step by step. On to Day 3 tomorrow 🔥 #javascript #webdevelopment #programming #softwareengineering #learning #developers

🔥 Master the art of coding loops in JavaScript! 🚀 Loops are a fundamental concept in programming that allow you to execute a block of code multiple times. They are essential for automating repetitive tasks and iterating over data structures. For developers, understanding loops is crucial for writing efficient and concise code. Whether you're working on data manipulation, user interfaces, or backend logic, loops help you process large amounts of data with ease. Here's a step-by-step breakdown: 1️⃣ Initialize a counter variable 2️⃣ Set the condition for the loop to continue 3️⃣ Execute the code block inside the loop 4️⃣ Update the counter variable at the end of each iteration Check out the code example below: ``` for (let i = 0; i < 5; i++) { console.log('Hello, loop ' + i); } ``` Pro Tip: Use caution with infinite loops! Always ensure your loop has a clear exit condition to avoid crashing your program. Common Mistake Alert: Forgetting to update the counter variable in a loop can lead to infinite loops. Always remember to increment or decrement the counter inside the loop. 🌟 Question for you: What creative project are you currently working on with loops in your code? Share below! 💡 🌐 View my full portfolio and more dev resources at tharindunipun.lk #JavaScript #CodingLoops #ProgrammingBasics #DevTips #LoopMastery #CodeNewbie #TechTalk #DeveloperCommunity #DigitalSkills

Day 61 of #90DaysOfCode Today I built a multi-page blog website using Flask and the Bootstrap Clean Blog template. The project demonstrates how Flask can structure a web application using reusable templates and multiple routes. How the application works • Flask handles routing for Home, About, and Contact pages • Templates are rendered dynamically using render_template • Shared layout components like header and footer are reused with Jinja includes • Static assets such as CSS, images, and scripts are served through Flask Key concepts explored • Flask routing for multi-page applications • Template reuse with Jinja • Integrating Bootstrap UI with Flask • Organizing static assets and templates This project helped reinforce how backend frameworks organize maintainable and scalable web applications. GitHub Repository https://lnkd.in/gAHWhnVT #Python #Flask #WebDevelopment #BackendDevelopment #SoftwareEngineering #90DaysOfCode

🚦 𝐋𝐞𝐭’𝐬 𝐚𝐝𝐝 𝐬𝐨𝐦𝐞 𝐥𝐨𝐠𝐢𝐜 𝐭𝐨 𝐭𝐡𝐚𝐭 𝐜𝐨𝐝𝐞! I’m excited to share the 3rd blog of my "JavaScript Essentials 101" series. After covering variables, data types and operators, it's time to learn how to guide your code through different paths. This time, we are diving deep into 𝐂𝐨𝐧𝐭𝐫𝐨𝐥 𝐅𝐥𝐨𝐰: 𝐈𝐟, 𝐄𝐥𝐬𝐞, 𝐚𝐧𝐝 𝐒𝐰𝐢𝐭𝐜𝐡. In my blog post, I breakdown exactly how JavaScript processes logic, using beginner-friendly examples that actually make sense. 𝐇𝐞𝐫𝐞 𝐢𝐬 𝐰𝐡𝐚𝐭 𝐰𝐞 𝐜𝐨𝐯𝐞𝐫: ✅ 𝐓𝐡𝐞 "𝐓𝐫𝐚𝐟𝐟𝐢𝐜 𝐑𝐮𝐥𝐞𝐬" 𝐨𝐟 𝐂𝐨𝐝𝐞: A simplified definition of what control flow actually means. ✅ 𝐈𝐟, 𝐄𝐥𝐬𝐞, 𝐚𝐧𝐝 𝐭𝐡𝐞 𝐋𝐚𝐝𝐝𝐞𝐫: Master foundational decision-making (using conditions like checking voting age or grading marks). ✅ 𝐓𝐡𝐞 𝐒𝐰𝐢𝐭𝐜𝐡 𝐒𝐭𝐚𝐭𝐞𝐦𝐞𝐧𝐭: How to use multi-way branching for cleaner, more readable alternatives to long else if chains. ✅ 𝐓𝐡𝐞 𝐁𝐫𝐞𝐚𝐤𝐢𝐧𝐠 𝐏𝐨𝐢𝐧𝐭: Why the break keyword is crucial inside switch. ✅ 𝐓𝐡𝐞 𝐆𝐨𝐥𝐝𝐞𝐧 𝐑𝐮𝐥𝐞: A practical breakdown of exactly when to use switch vs. if-else. Mastering these conditional structures is what transforms a simple "coder" into an "application builder." Stop letting your code run sequentially and start making it intelligent! 𝐑𝐞𝐚𝐝 𝐭𝐡𝐞 𝐟𝐮𝐥𝐥, 𝐝𝐞𝐭𝐚𝐢𝐥𝐞𝐝 𝐠𝐮𝐢𝐝𝐞 𝐡𝐞𝐫𝐞: https://lnkd.in/ghpw9iPc Mentions: Hitesh Choudhary Piyush Garg Chai Aur Code Akash Kadlag Jay Kadlag Suraj Kumar Jha Nikhil Rathore #JavaScript #CodingTips #WebDevelopment #LearnToCode #Programming #CodeLogic #Hashnode #ChaiAurCode #ChaiCode

Day 2 🔐 Encapsulation in JavaScript (Explained Simply) One of the most important concepts in programming is Encapsulation — and it’s something every developer should understand early. --- 🧠 What is Encapsulation? 👉 Encapsulation = Hiding data and controlling access to it Instead of letting anyone directly modify your data, you expose only safe and controlled ways to interact with it. --- ❌ Without Encapsulation let balance = 1000; balance = -5000; // ❌ Invalid change, no control --- ✅ With Encapsulation function createBankAccount(initialBalance) { let balance = initialBalance; return { deposit(amount) { balance += amount; }, withdraw(amount) { if (amount <= balance) { balance -= amount; } }, getBalance() { return balance; } }; } const acc = createBankAccount(1000); acc.deposit(500); console.log(acc.getBalance()); // 1500 --- 🔍 What’s happening here? balance is private 🔒 It cannot be accessed directly Only controlled via methods like: deposit() withdraw() getBalance() --- 🚀 Why Encapsulation Matters ✔ Prevents invalid data changes ✔ Improves code safety ✔ Makes code easier to maintain ✔ Builds strong programming fundamentals --- 🔥 Real-world analogy Think of an ATM machine: You can’t directly access your bank balance in the system You interact through options like withdraw, deposit, check balance 👉 That’s encapsulation in action. --- 💡 One-line takeaway: 👉 “Don’t expose data directly — control how it’s used.” --- Mastering this concept will make your JavaScript (and overall programming) much stronger. #JavaScript #Programming #WebDevelopment #Frontend #100DaysOfCode

- Temporal API: Replace every date library with this. Immutable, timezone-aware, no zero-indexed months. - using / await using: Stop writing try/finally for resource cleanup. Add [Symbol.dispose] to your resource types. - Error.isError(): Use this instead of instanceof Error in catch blocks, especially in library code. - Array.fromAsync(): Collect async iterables into arrays in one line. - Import attributes: Explicitly type your JSON and CSS imports. - Math.sumPrecise(): Precise floating point summation for when it matters. None of these require rewriting your existing codebase. Start using them in new code, add the polyfills where you need them, and watch the category of bugs each one addresses stop appearing in your projects. https://lnkd.in/gxbwbYgk

Chai Aur Code - Web Dev Cohort Learning Update (Lecture 11 to Lecture 21) Mentors: Hitesh Choudhary | Piyush Garg | Akash Kadlag Over the past few sessions, my journey has shifted from learning JavaScript basics to understanding how things actually work under the hood. 🔹JavaScript Foundations & Core Concepts (Lecture 11–14) Arrow functions & higher-order functions Deep dive into array methods: forEach, map, reduce Objects, functions & IIFE Implemented custom versions of map & forEach to understand internal working 🔹JavaScript in Practice (Lecture 15) Solved multiple assignments Learned how experienced developers: Observe problems, Break them down, Build logical solutions 🔹Object-Oriented JavaScript (Lecture 16–17) OOP concepts in JavaScript Deep understanding of this keyword Detached function, Polyfill call(), bind(), apply() Symbol data type Error handling & Promises 🔹JavaScript Internals & Advanced Concepts (Lecture 18–19) Objects, methods, and new keyword Garbage collection & optional chaining Async JavaScript: Event loop & callback queue Promises (deep dive) fetch() & async/await 🔹Modern JavaScript & DOM (Lecture 20) Closures & lexical environment Introduction to React’s useMemo() DOM manipulation & event listeners Built a Todo List application 🔹Deep Dive into JavaScript Ecosystem (Lecture 21) Methods of primitive types Iterators Advanced data structures: Map, Set, WeakMap, WeakSet Date & Time handling 🚀 Excited to now step into backend and apply all of this in real-world applications from the next lecture. 💡 Key Takeaway: This phase wasn’t just about writing code; it was about learning how to think like a developer, understanding JavaScript deeply and connecting concepts across the stack. #chaicode #chaiaurcode #javascript

𝗪𝗵𝗮𝘁'𝘀 𝗗𝗧𝗢𝘀 𝗶𝗻 𝗡𝗲𝘀𝘁 𝗷𝘀 In NestJS, a 𝗗𝗧𝗢 (Data Transfer Object) is an object that defines how data is sent over the network. Think of it as a contract or a blueprint that specifies exactly what data a client (like a mobile app or a browser) must send to your server. While DTOs are a general software pattern, NestJS uses them powerfully to handle validation and type safety. 𝟭. 𝗪𝗵𝘆 𝗱𝗼 𝘄𝗲 𝘂𝘀𝗲 𝗗𝗧𝗢𝘀? Without a DTO, your application wouldn't know if the incoming data is correct. If a user tries to register but sends a "username" as a number instead of a string, your database might crash. DTOs help prevent this by: 𝗩𝗮𝗹𝗶𝗱𝗮𝘁𝗶𝗼𝗻: Ensuring the data has the right format, length, and type. 𝗗𝗮𝘁𝗮 𝗧𝗿𝗮𝗻𝘀𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻: Stripping away unwanted data that the client shouldn't be sending (e.g., trying to set their own isAdmin status). 𝗧𝘆𝗽𝗲 𝗦𝗮𝗳𝗲𝘁𝘆: Providing IntelliSense and auto-completion in your code so you know exactly what properties exist on the request body. 𝟮. 𝗖𝗹𝗮𝘀𝘀𝗲𝘀 𝘃𝘀. 𝗜𝗻𝘁𝗲𝗿𝗳𝗮𝗰𝗲𝘀 In NestJS, it is highly recommended to use Classes for DTOs rather than Interfaces. 𝗜𝗻𝘁𝗲𝗿𝗳𝗮𝗰𝗲𝘀 are removed during JavaScript compilation, meaning NestJS cannot check them at runtime. 𝗖𝗹𝗮𝘀𝘀𝗲𝘀 are preserved in the final code, allowing NestJS to use Pipe validation to check data as it arrives. #Programming #BackendDevelopment #TypeScript #NestJS