Sankalp Mishra’s Post

Stop misusing JavaScript array methods. Small choices like this quietly shape code quality. One of the most common clean-code mistakes I see is using `forEach()` when the real intention is transformation. If your goal is to create a new array from existing data, `map()` is the right tool. `map()` returns a new array. It keeps your logic functional and predictable. It communicates intent clearly: “I am transforming data.” That clarity improves readability and long-term maintainability. `forEach()`, on the other hand, is built for side effects—logging, DOM updates, triggering external behavior. It does not return a new array. When you push into another array inside `forEach()`, you’re working against the language instead of with it. A simple rule of thumb: * If you’re creating a new array → use `map()` * If you’re performing side effects → use `forEach()` * If you’re filtering → use `filter()` instead of manual conditions Clean code isn’t about writing more lines. It’s about choosing the right abstraction for the job. Intentional developers let method names express meaning. So be honest—are you team `map()`, or still reaching for `forEach()` when transforming data? #JavaScript #CleanCode #FrontendDevelopment #WebEngineering #SoftwareCraftsmanship #CodeQuality #ReactJS

🚨 Is .then().catch() dead after try...catch in JavaScript? Short answer: No. Both are alive and useful. The real difference is how you structure asynchronous code. 🔹 1️⃣ Promise style — .then().catch() This was the original way to handle async operations with Promises. Example: fetch("/api/data") .then(res => res.json()) .then(data => console.log(data)) .catch(err => console.error(err)); ✅ Best when: You want simple promise chains Writing functional pipelines Handling single async operations 🔹 2️⃣ Async/Await style — try...catch Modern JavaScript introduced async/await, making async code look like synchronous code. Example: async function getData() { try { const res = await fetch("/api/data"); const data = await res.json(); console.log(data); } catch (err) { console.error(err); } } ✅ Best when: You have multiple sequential async calls You want cleaner, readable code Handling complex error flows 💡 Key Insight async/await is actually built on top of Promises. So .then() and .catch() are still working under the hood. 👉 It's not about which one is better. 👉 It's about which one fits the situation. 📌 Quick Rule Small async chain → .then().catch() Complex async logic → async/await + try...catch JavaScript keeps evolving, but understanding both patterns makes you a stronger developer. #javascript #webdevelopment #frontend #nodejs #asyncawait #promises #coding #softwaredevelopment #100DaysOfCode

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

🚀Day 4/100 – Understanding JSON & Fetch in JavaScript Today I focused on two fundamental concepts in modern web development: 1️⃣ JSON (JavaScript Object Notation) JSON is the standard format for sending data between a client and a server. Key things I reinforced today: Keys must be in double quotes Strings must use double quotes Numbers & booleans don’t need quotes JSON stores only data (no functions, no undefined) I practiced converting between objects and JSON: JSON.stringify() → Object ➝ JSON string JSON.parse() → JSON string ➝ Object Understanding this flow is critical because servers send data as JSON strings, and we convert them back into JavaScript objects to use in our applications. Data Flow: Server ➝ JSON String ➝ Parse ➝ JavaScript Object ➝ UI 2️⃣ Fetch API I learned how to retrieve data from an API using fetch(). Basic flow: Send request using fetch() Convert response using response.json() Use the data Also practiced the cleaner modern approach using async/await, which makes asynchronous code much more readable and scalable compared to chaining multiple .then() calls. What I Realized Today- If you don’t understand JSON and fetch deeply, you can’t properly build real-world applications. Every frontend app talks to a backend, and this is the bridge. On to Day 5. #100DaysOfCode #JavaScript #WebDev #API #JSON #CodingChallenge #Frontend #SoftwareEngineering #MERNStack #LearningEveryday

Day 14: Async / Await in JavaScript Promises improved async code… But Async/Await made it beautiful. ✨ Async/Await lets us write asynchronous code that looks like synchronous code. 🔹 What is async? When you add async before a function: 👉 It automatically returns a Promise async function greet() { return "Hello"; } greet().then(res => console.log(res)); Even though we return a string, JavaScript wraps it inside a Promise. 🔹 What is await? await pauses execution until the Promise resolves. async function fetchData() { const data = await fetch("/api/data"); console.log(data); } 👉 await can only be used inside an async function. 🔹 Error Handling with try/catch async function getData() { try { const res = await fetch("/api/data"); const data = await res.json(); console.log(data); } catch (error) { console.log("Error:", error); } } Much cleaner than multiple .then().catch() chains. 🔥 Why Async/Await is Better? ✅ Cleaner & more readable ✅ Avoids Promise chaining complexity ✅ Easier error handling ✅ Looks synchronous but runs asynchronously #Remeber :Important Interview Point Even with await, JavaScript is still single-threaded. Async/Await works because of: ✔️ Promises ✔️ Event Loop ✔️ Microtask Queue #JavaScript #AsyncAwait #Promises #webdevelopment #LearnInPublic

🚀 map(), filter(), reduce() in JavaScript (with Definitions + Examples) (Part:3) These 3 array methods are must-know if you want to get strong in JavaScript Example array: let arr = [1, 2, 3, 4, 5]; 1️⃣ map() → Transform data Definition: map() creates a new array by applying a function to each element. let result = arr.map((num) => num * 2); console.log(result); // [2, 4, 6, 8, 10] ✔️ Use when you want to modify every element 2️⃣ filter() → Select data Definition: filter() creates a new array with elements that satisfy a condition. let result = arr.filter((num) => num > 2); console.log(result); //[3, 4, 5] ✔️ Use when you want to pick specific values 3️⃣ reduce() → Combine data Definition: reduce() reduces the array to a single value by applying a function. let result = arr.reduce((acc, num) => acc + num, 0); console.log(result); // 15 ✔️ Use for sum, totals, complex calculations Key Differences: >> map → transforms each element >> filter → selects elements >> reduce → combines into one value 🎯 Important Note: >>> These methods do not change the original array (they return a new one) # forEach() vs map() : 1️⃣ forEach() >> Executes a function for each element >> Does NOT return anything let result = arr.forEach((num) => { return num * 2; }); console.log(result); // undefined 2️⃣ map() >> Transforms each element >> Returns a NEW array let result = arr.map((num) => num * 2); console.log(result); // [2, 4, 6] #JavaScript #Frontend #WebDevelopment #Coding #LearnInPublic

🚀 **JavaScript: var vs let vs const (Every Developer Should Know This)** Understanding the difference between `var`, `let`, and `const` is one of the most important fundamentals in JavaScript. Let’s simplify it 👇 --- 🔴 **var** • Function scoped • Can be **reassigned** • Can be **redeclared** • Hoisted and initialized as `undefined` ```javascript var x = 10; x = 20; // ✅ allowed var x = 30; // ✅ allowed ``` ⚠️ Old JavaScript way. Avoid using `var` in modern code. --- 🟢 **let** • Block scoped `{ }` • Can be **reassigned** • ❌ Cannot be redeclared in the same scope • Hoisted but in **Temporal Dead Zone (TDZ)** ```javascript let y = 10; y = 20; // ✅ allowed let y = 30; // ❌ Error ``` ✔ Best for variables that will change. --- 🟣 **const** • Block scoped • ❌ Cannot be reassigned • ❌ Cannot be redeclared • Hoisted with **Temporal Dead Zone** ```javascript const z = 10; z = 20; // ❌ Error ``` ✔ Best for constants. --- 🎯 **Best Practice** ✔ Use **const by default** ✔ Use **let when value changes** ❌ Avoid **var** This makes your code **cleaner, safer, and predictable.** --- 💬 Interview Question: What is **Temporal Dead Zone (TDZ)** in JavaScript? Comment your answer 👇 --- #JavaScript #WebDevelopment #FrontendDevelopment #Coding #Programming #SoftwareEngineering #LearnToCode #DeveloperTips #JS #TechCommunity

But I can still change const even though it is immutable, Const a = [] a.push(7) Above code is completely valid. Can anyone explain that .. comment below 👇

🚀 Day 3 / 100 — #100DaysOfCode Most people want to jump straight into frameworks. Today I did the opposite. I went back to the JavaScript fundamentals — because strong foundations compound faster than shiny tools. Here’s what I revised today 👇 🧠 Operators The building blocks of logic in JavaScript. From arithmetic (+ - * /) to comparison (===, !==) and logical operators (&&, ||). They help control how values interact and how conditions are evaluated. 🔁 Loops Automation for repetitive tasks. Revisited for, while, and for...of loops — essential when iterating over arrays, running repeated logic, or processing data collections. ⚙️ Functions Reusable blocks of logic. Functions allow us to write clean, modular code and avoid repetition. Also revisited arrow functions, which make syntax more concise. 📦 Array Methods Some of the most powerful tools in JavaScript. Refreshed methods like: • map() → transform data • filter() → extract specific items • reduce() → combine values into one result These are core to writing clean functional-style JavaScript. 🔒 var vs let vs const Understanding scope is critical. • var → function scoped, older JS • let → block scoped, mutable • const → block scoped, immutable reference Modern JS prefers let and const for predictable behavior. 🧩 Closures One of JavaScript’s most powerful concepts. A closure allows a function to remember variables from its outer scope even after the outer function has finished executing. This is used in callbacks, state management, and many JS patterns. ⏳ Promises & Async/Await JavaScript is asynchronous by nature. • Promises represent a value that will be available in the future • async/await makes asynchronous code look synchronous and much easier to read This is the backbone of API calls, database queries, and modern web apps. ✨ Lesson from today: Frameworks change every year. But JavaScript fundamentals stay forever. Small daily improvements → Big long-term growth. Day 3/100 complete. #JavaScript #WebDevelopment #100DaysOfCode #BuildInPublic #CodingJourney #Developers #LearnInPublic

🔥 Understanding this keyword in JavaScript The value of this depends on how a function is called, not where it is written. >> In the global scope console.log(this); this → refers to the global object (window in browsers) >> Inside an object method const user = { name: "Javascript", greet() { console.log(this.name); } }; user.greet(); // Javascript this → refers to the object calling the method ✔️ user.greet() → this is user >> In a regular function function show() {  console.log(this);} show(); this → undefined (in strict mode) or → global object (non-strict mode) >> In arrow functions const obj = {  name: "Javascript",  greet: () => {    console.log(this.name);}}; obj.greet(); // undefined this → does NOT have its own value It borrows from the surrounding scope 👉 That’s why arrow functions can surprise you! >> In event handlers button.addEventListener("click", function() {  console.log(this);}); this → refers to the element that triggered the event #JavaScript #FrontendDevelopment #WebDevelopment #Coding #LearnToCode