JavaScript Arrays & Objects: Mastering map, filter, reduce

Here's the thing: JavaScript developers are stuck in a naming crisis. It's crazy: you start typing `useQ` and your IDE just gets lost. So, what's going on? Well, it turns out there are a ton of libraries using the same hook names - and it's causing chaos. You've got `useQuery` from `@apollo/client` for GraphQL queries, `useQuery` from `urql` for more GraphQL queries, `useQuery` from `@tanstack/react-query` for REST/HTTP queries... and the list goes on. There's `useQuery` from `react-relay`, `graphql-hooks`, `@supabase/react`, `react-firebase-hooks`, `@algolia/react-hooks`, and `swr` - all doing different things. It's like, the wordquery has lost all meaning. You can use `useQuery` for a GraphQL query, like this: `const { data } = useQuery(gql`query GetUser($id: ID!) { user(id: $id) { name, email } }``)`. Or, you can use it for a REST API query: `const { data } = useQuery(['user', id], () => fetch(`/api/users/${id}`))`. And then there's database queries, search queries... it's all just a mess. This isn't just a problem with `useQuery`, by the way - it affects all sorts of hooks: authentication, client/connection, store/state, subscription... So, what can libraries do to fix this? First, they should prefix their names with some kind of library identity. Second, they should be specific about what kind of query they're doing. And third, they should try to maintain some consistency across their hooks. As for us developers, we can help by sharing this article with library authors, opening issues on the libraries we use, and tweeting about our own import alias hell with #JSNamingCrisis. We can also vote with our feet, so to speak - by supporting libraries that actually care about our experience. Check out the full article here: https://lnkd.in/gJhfjHN5 #JSNamingCrisis #JavaScript #DeveloperExperience

🔑 Prototype & Inheritance in JavaScript 1. Prototype Chain Every JavaScript object has a hidden property called [[Prototype]]. When you try to access a property that doesn’t exist on the object itself, JavaScript looks up the prototype chain to find it. Example: const obj = {}; console.log(obj.toString()); // found in Object.prototype 2. Constructor Functions & new When you use the new keyword, JavaScript creates a new object and links it to the constructor’s prototype. Example: function Person(name) { this.name = name; } Person.prototype.greet = function() { return `Hello, ${this.name}`; }; const varun = new Person("Varun"); console.log(varun.greet()); // Hello, Varun 3. ES6 Classes (Syntactic Sugar) JavaScript classes are just syntactic sugar over prototype-based inheritance. They make the code cleaner and more readable, but under the hood, they still use prototypes. Example: class Animal { speak() { console.log("Sound..."); } } class Dog extends Animal { speak() { console.log("Woof!"); } } new Dog().speak(); // Woof! 4. Why It’s Important Frameworks like React and Node.js rely heavily on prototype chains. Performance optimization: Adding methods to the prototype is memory-efficient. Inheritance patterns: Promotes reusability and follows the DRY (Don't Repeat Yourself) principle. 📌 Quick Interview Tip Interviewers often ask: “Explain the prototype chain.” “What’s the difference between class inheritance and prototype inheritance?” “Why are methods added to the prototype instead of inside the constructor?” const obj = {}; console.log(obj.toString()); // found in Object.prototype 2. Constructor Functions & new Jab tum new keyword use karte ho, ek naya object banata hai jo constructor ke prototype se link hota hai. Example: function Person(name) {  this.name = name; } Person.prototype.greet = function() {  return `Hello, ${this.name}`; }; const champ= new Person("Champ"); console.log(champ.greet()); // Hello, Champ 3. ES6 Classes (syntactic sugar) Classes JS me bas prototype-based inheritance ka cleaner syntax hain. Example: class Animal {  speak() { console.log("Sound..."); } } class Dog extends Animal {  speak() { console.log("Woof!"); } } new Dog().speak(); // Woof! 4. Why It’s Important Frameworks like React and Node.js rely heavily on prototype chains. Performance optimization: Adding methods to the prototype is memory-efficient. Inheritance patterns: Promotes reusability and follows the DRY (Don't Repeat Yourself) principle. #React #ReactJS #Frontend #WebDevelopment #JavaScript #Interviews #SoftwareEngineering #infy

🔍 JavaScript Objects: Dot Notation vs Bracket Notation Why do we have two ways to access object properties — and when should we use each? If both dot notation and bracket notation do the same thing, why does JavaScript even support both? The short answer: flexibility + real-world use cases. Let’s break it down 👇 ⸻——————————————————- 1️⃣ Dot Notation – Clean, readable, and predictable const user = { name: "Jagdish", role: "Frontend Developer" }; user.name; // "Jagdish" ——————————————- ✅ When to use dot notation • Property names are known at development time • Keys are valid JavaScript identifiers • You want clean & readable code 🚫 When you can’t use dot notation user.first-name ❌ // Error user["first-name"] ✅ Why? Dot notation does not support: • Spaces • Hyphens (-) • Dynamic values —————————————————— 2️⃣ Bracket Notation – Dynamic and powerful const key = "role"; user[key]; // "Frontend Developer" ✅ When to use bracket notation • Property name is dynamic • Key comes from user input, API response, or loop • Property contains special characters ———————————— const data = { "total-users": 120, "2025": "Active" }; data["total-users"]; // 120 data["2025"]; // "Active" —————————————- Dot notation fails here ❌ Bracket notation works perfectly ✅ _______________________________ 3️⃣ Real-world examples 🔹 API responses response.data[fieldName]; You don’t know the key beforehand → bracket notation is required. 🔹 Forms & dynamic filters filters[selectedFilter]; 🔹 Looping through objects for (let key in user) { console.log(user[key]); } Dot notation simply cannot work here. ——————————————————————- 4️⃣ Mental model to remember forever 🧠 • Dot notation → Static & known • Bracket notation → Dynamic & unknown If JavaScript needs to evaluate the key at runtime, you must use bracket notation. JavaScript didn’t give us two notations by accident. It gave us simplicity and power. Knowing why and when to use each is what separates 👉 someone who knows syntax from 👉 someone who understands JavaScript deeply. If this helped you, react or share — someone in your network needs this today 🚀 #JavaScript #FrontendDevelopment #WebDevelopment #JavaScriptTips #CodingBestPractices #LearnJavaScript #SoftwareEngineering #CleanCode #DeveloperCommunity #ProgrammingConcepts #TechCareers #ReactJS #WebDev

🚀 20 JavaScript Snippets Tiny code, big impact. Bookmark this for your next project! 🔖 1. Flatten an array ```javascript const flatten = arr => arr.flat(Infinity); ``` 2. Check if object is empty ```javascript const isEmpty = obj => Object.keys(obj).length === 0; ``` 3. Generate random hex color ```javascript const randomHex = () => `#${Math.floor(Math.random()*0xffffff).toString(16).padEnd(6,"0")}`; ``` 4. Remove duplicates from array ```javascript const unique = arr => [...new Set(arr)]; ``` 5. Capitalize first letter ```javascript const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1); ``` 6. Copy to clipboard ```javascript const copyToClipboard = text => navigator.clipboard.writeText(text); ``` 7. Get current URL params ```javascript const params = new URLSearchParams(window.location.search); ``` 8. Detect dark mode preference ```javascript const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; ``` 9. Debounce function ```javascript const debounce = (func, wait) => { let timeout; return (...args) => { clearTimeout(timeout); timeout = setTimeout(() => func.apply(this, args), wait); }; }; ``` 10. Wait for a set time ```javascript const wait = ms => new Promise(resolve => setTimeout(resolve, ms)); ``` 11. Toggle boolean in state (React-friendly) ```javascript const toggle = prev => !prev; ``` 12. Sort by key ```javascript const sortBy = (arr, key) => arr.sort((a, b) => a[key] > b[key] ? 1 : -1); ``` 13. Convert RGB to hex ```javascript const rgbToHex = (r,g,b) => "#" + ((1<<24) + (r<<16) + (g<<8) + b).toString(16).slice(1); ``` 14. Validate email ```javascript const isValidEmail = email => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); ``` 15. Group array by property ```javascript const groupBy = (arr, key) => arr.reduce((acc, obj) => { acc[obj[key]] = (acc[obj[key]] || []).concat(obj); return acc; }, {}); ``` 16. Get average of array ```javascript const average = arr => arr.reduce((a, b) => a + b, 0) / arr.length; ``` 17. Random item from array ```javascript const randomItem = arr => arr[Math.floor(Math.random() * arr.length)]; ``` 18. Scroll to top smoothly ```javascript const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' }); ``` 19. Format number with commas ```javascript const formatNumber = num => num.toLocaleString(); ``` 20. Check if array includes all values ```javascript const includesAll = (arr, values) => values.every(v => arr.includes(v)); ``` --- ✨ Which one will you use first? 💬 Comment your favorite snippet or share one of your own! #JavaScript #WebDevelopment #CodingTips #Programming #Frontend #DeveloperTools #CodeSnippets #JS #TechTips #LearnJavaScript #SoftwareEngineering #DevCommunity 📌 Follow Sasikumar S for daily practical developer tips & hands-on learning. ❤️ Join TechVerse Collective – a daily learning community for coders growing together. 🔁 Repost to save for later & share with your network.

Do you know what % is in JavaScript? It's called the modulo operator - a simple, but powerful tool. The modulo operator returns the remainder after dividing one number by another. You might be thinking that when we divide two numbers that we’ll usually get a whole number (ie 6 divided by 3 equals 2) or a decimal number (ie 6 divided by 4 equals 1.5). This is referred to as decimal division. If I think back way back to my elementary school days, we didn’t use decimal points in our division, we divided numbers using what’s called integer math (in this case commonly called integer division) - which would sometimes result in remainders. For example, “6 divided by 4” using integer math equals “1 with a remainder of 2” The modulo operator returns just the remainder part of that equation. When we do 6 % 4 we get the result 2. Now you might be thinking that this is a very simple operator that isn’t very powerful at all, but in reality it’s used for a lot of common examples in JavaScript… 💻 Modulo are great at checking if a number is even or odd: if (num % 2 === 0) {console.log("even");} else {console.log("odd");} 💻 We can convert 24-hour time to 12-hour time using a modulo: const time24 = 15; const time12 = time24 % 12 || 12; // 3 💻 Looping through array items in a circle made easy using a modulo: const items = ["a", "b", "c"]; let index = 0; setInterval(() => { console.log(items[index]); index = (index + 1) % items.length; }, 1000); Other common examples include: 🔹 Creating a repeating sequence of values (repeating pattern) 🔹 Alternate between two values (on/off pattern) Now as with many things in life, the modulo in JavaScript is not perfect - it has some quirks/oddities including: 🟡 Acts more like a remainder operator than a true modulo, because it will return negative values | -7 % 5 gives us -2 🟡 Works with floating point numbers | 5.5 % 2 gives us 1.5 🟡 Modulo by zero doesn’t error out | 10 % 0 gives us NaN 🟡 and more!

𝗪𝗲𝗹𝗹-𝗞𝗻𝗼𝘄𝗻 𝗦𝘆𝗺𝗯𝗼𝗹𝘀 𝗮𝗻𝗱 𝗧𝗵𝗲𝗶𝗿 𝗔𝗽𝗽𝗹𝗶𝗰𝗮𝘁𝗶𝗼𝗻𝘀 JavaScript has evolved over time. One major update was the introduction of Symbols in ECMAScript 2015. Well-Known Symbols provide a unique way to define behavior and properties in JavaScript. To understand Well-Known Symbols, you need to know what symbols are. Before ECMAScript 2015, JavaScript did not have a way to create private object properties. Developers used tricks like prefixes or closures to manage uniqueness. The introduction of Symbols solved this problem. A Symbol is a unique identifier created using the Symbol() function. Here are some key Well-Known Symbols: - Symbol.hasInstance: customizes the instanceof operator behavior - Symbol.isConcatSpreadable: determines if an object should be flattened when using Array.prototype.concat - Symbol.iterator: defines the default iterator for an object - Symbol.match: specifies a function used for pattern matching with regex - Symbol.replace: customizes the behavior of String.prototype.replace - Symbol.search: customizes the behavior of String.prototype.search - Symbol.split: determines how String.prototype.split performs on an object You can use Symbol.hasInstance to define custom behaviors for the instanceof operator. For example: class MyArray { static [Symbol.hasInstance](instance) { return Array.isArray(instance) && instance.length > 0; } } You can also use Symbol.iterator to define object iteration. For example: class Fibonacci { constructor() { this.current = 0; this.next = 1; } [Symbol.iterator]() { return this; } next() { const current = this.current; [this.current, this.next] = [this.next, this.current + this.next]; return { value: current, done: false }; } } Well-Known Symbols can streamline code and improve architecture. However, they can also impact performance. Using Symbols can incur a cost, especially when abstracting data structures or heavy computational tasks. Many modern frameworks and libraries use Well-Known Symbols for internal management. For example, React and Vue use Symbols to handle component states uniquely. To debug issues with Well-Known Symbols, you can use console logging and debugging tools like Chrome DevTools. Source: https://lnkd.in/d_8if4qz

🤔 Is Node.js JavaScript? Short answer: Yes… but also no. Relax — I’ll explain before the internet attacks me 😒 If you’re new to web development, you’ve probably heard things like: “Node.js is JavaScript.” “Node.js runs JavaScript.” “Node.js is a backend language.” “Node.js is a framework.” And your brain goes: Bro… which one is it? 😵 Let’s break it down like a friendly classroom session — no boring textbook vibes. 🧠 First: What is JavaScript? JavaScript is a programming language. Just like: Java ☕ Python 🐍 C++ 🚀 JavaScript was originally created to run inside the browser to make websites interactive. Example: Button click → show popup Form validation Animations Dynamic UI updates If HTML is the skeleton 🦴 and CSS is the clothes 👕, JavaScript is the muscles that make the page move 💪 So JavaScript itself is just the language. ⚙️ Then… What is Node.js? Node.js is a runtime environment that allows JavaScript to run outside the browser. Read that again slowly like a teacher with a marker 🧑🏫✍️ 👉 Node.js lets JavaScript run on your computer / server. Before Node.js: JavaScript lived only in browsers 🌍 Backend had Java, PHP, Python, etc. After Node.js: JavaScript can build servers, APIs, file systems, databases, microservices, everything 💥 So Node.js is NOT a language. Node.js is the engine + environment that runs JavaScript on the backend. 🍕 Real-World Example Think of JavaScript as a recipe 📜 Think of Node.js as the kitchen 🍳 The recipe tells you what to cook. The kitchen gives you the tools to cook it. Same recipe, different kitchens: Browser kitchen → DOM, alerts, UI Node.js kitchen → file system, network, servers, databases JavaScript doesn’t change. The environment changes. 🚌 Another Example (Because teachers love examples 😄) JavaScript = Driver 🚗 Node.js = Road + Car + Fuel ⛽ The driver knows how to drive. But without a car and road, he’s not going anywhere. Node.js gives JavaScript the power to actually go places in the backend world. ❌ Common Confusions Let’s clear some myths before they spread like bugs in production 😅 ❌ Node.js is a programming language ✅ No — JavaScript is the language. ❌ Node.js is a framework ✅ No — Express, NestJS are frameworks. Node is the runtime. ❌ Node.js replaces JavaScript ✅ No — Node runs JavaScript. ❌ If I learn Node.js, I don’t need JavaScript 😂 Good luck with that. 🎯 Why This Matters for Developers Understanding this helps you: Learn faster Debug smarter Choose tools correctly Explain concepts clearly in interviews As someone who works with both Spring Boot (Java backend) and Node.js (JavaScript backend), I personally love seeing how the same backend concepts appear in different ecosystems — routing, middleware, databases, security — just different syntax and tools. Once you understand the fundamentals, switching stacks becomes much easier 🚀 #nodejs #javascript #backend #frontend #fullstack

🔁 Javascript Conditions and Loops 🔹 Why Conditions & Loops Matter - They help your program make decisions - They let your code repeat tasks - Without them, JavaScript is useless for logic Real use cases: Login validation, Form checks, Iterating data from APIs 🧠 Conditions (Decision Making) Conditions run code only when a condition is true. ✅ if statement let age = 20; if (age >= 18) { console.log("Eligible to vote"); } - Code runs only if condition is true 🔁 if–else if (age >= 18) { console.log("Adult"); } else { console.log("Minor"); } - Two paths • One always runs 🔂 else if let marks = 75; if (marks >= 90) { console.log("Grade A"); } else if (marks >= 70) { console.log("Grade B"); } else { console.log("Grade C"); } - Multiple conditions checked in order 🔀 switch statement Used when checking one value against many cases. let day = 2; switch (day) { case 1: console.log("Monday"); break; case 2: console.log("Tuesday"); break; default: console.log("Invalid day"); } ⚠️ Always use break to avoid fall-through. 🔁 Loops (Repetition) Loops run code multiple times. 🔹 for loop Best when number of iterations is known. for (let i = 1; i <= 5; i++) { console.log(i); } 🔹 while loop Runs while condition is true. let i = 1; while (i <= 3) { console.log(i); i++; } 🔹 do–while loop Runs at least once. let i = 5; do { console.log(i); i++; } while (i < 3); 📦 Loop Control Keywords - break → stops loop - continue → skips iteration for (let i = 1; i <= 5; i++) { if (i === 3) continue; console.log(i); } ⚠️ Common Beginner Mistakes - Infinite loops - Missing break in switch - Using == instead of === - Wrong loop condition 🧪 Mini Practice Task - Check if a number is even or odd - Print numbers from 1 to 10 - Print only even numbers - Use switch to print day name ✅ Mini Practice Task – Solution 🔁 🟦 1️⃣ Check if a number is even or odd let num = 7; if (num % 2 === 0) { console.log("Even number"); } else { console.log("Odd number"); } ✅ Uses modulus operator • Remainder 0 → even • Otherwise → odd 🔢 2️⃣ Print numbers from 1 to 10 for (let i = 1; i <= 10; i++) { console.log(i); } 🔁 3️⃣ Print only even numbers from 1 to 10 for (let i = 1; i <= 10; i++) { if (i % 2 === 0) { console.log(i); } } 📅 4️⃣ Use switch to print day name let day = 3; switch (day) { case 1: console.log("Monday"); break; case 2: console.log("Tuesday"); break; case 3: console.log("Wednesday"); break; case 4: console.log("Thursday"); break; case 5: console.log("Friday"); break; default: console.log("Invalid day"); }

=> Understanding Getters and Setters in JavaScript When I first started learning JavaScript, I used to think objects were just simple key-value pairs. Then I discovered getters and setters — and realized how powerful controlled data access can be. Let’s break it down clearly. 🔹 What Are Getters and Setters? In JavaScript, getters and setters allow you to: ✅ Control how a property is accessed ✅ Control how a property is modified ✅ Add validation logic ✅ Compute values dynamically They are defined inside objects using get and set keywords. => Basic Example const person = { firstName: "Roman", lastName: "Reigns", get fullName() { return `${this.firstName} ${this.lastName}`; } }; console.log(person.fullName); // Output: Roman Reigns Here: fullName looks like a property But it behaves like a function It computes the value dynamically That’s the power of a getter. => Example of a Setter Now let’s allow updating the full name: const person = { firstName: "", lastName: "", set fullName(name) { const parts = name.split(" "); this.firstName = parts[0]; this.lastName = parts[1]; } }; person.fullName = "Roman Reigns"; console.log(person.firstName); // Roman console.log(person.lastName); // Reigns Now we are controlling how data is assigned. => Why Are Getters & Setters Important? Without them: Anyone can directly modify your object’s properties. With them: You can add validation. Example: const user = { _age: 0, set age(value) { if (value < 0) { console.log("Age cannot be negative"); } else { this._age = value; } }, get age() { return this._age; } }; user.age = -5; // Age cannot be negative Now your data is protected. 🔹 Real-World Use Cases ✔ Data validation ✔ Formatting data before returning ✔ Creating computed properties ✔ Encapsulation in OOP ✔ React state-like derived values 🔹 ES6 Class Version class Person { constructor(name) { this._name = name; } get name() { return this._name.toUpperCase(); } set name(value) { if (value.length < 3) { console.log("Name too short"); } else { this._name = value; } } } 🔥 Key Takeaway Getters and setters make your objects smarter. They: Improve data integrity Make your code cleaner Help enforce rules Enable better abstraction As developers, it’s not just about storing data — it’s about controlling it intelligently. If you're learning JavaScript, understanding getters and setters will level up your object-oriented thinking. What was the concept in JavaScript that changed your perspective? #JavaScript #WebDevelopment #MERNStack #FrontendDeveloper #FullStackDeveloper #CodingJourney #LearnToCode #SoftwareEngineering #100DaysOfCode

🚀 Day 13 of JavaScript Daily Series JavaScript Strings — slice, substring, toUpperCase, trim (Super Easy Hinglish + Real-Life Examples) Aaj hum JavaScript ke 4 most useful string methods seekhenge. Yeh daily life coding me 100% use hote hain — chahe forms ho, search bars ho, validation ho ya UI formatting. 📝 What is a String? (Simple English Definition) A string is a sequence of characters used to store text like names, messages, sentences, etc. Example: let name = "Ritesh Singh"; 1️⃣ slice() — Cut & Extract Part of the String 🔹 Definition Returns a portion of string from start index to end index (end not included). 🧠 Hinglish Explanation Socho tum movie clip ka ek scene cut karke nikalna chahte ho → yahi slice karta hai. 📱 Real-Life Example Instagram username crop karna: let username = "aapanrasoi_official"; let shortName = username.slice(0, 10); console.log(shortName); // "aapanraso" 2️⃣ substring() — Extract Part of String (Like slice, but safer) 🔹 Definition Works like slice but doesn’t accept negative indexes. 🧠 Hinglish Explanation Slice ka hi shareef version — negative cheezein nahi leta. 😄 📱 Example let text = "JavaScript"; console.log(text.substring(4, 10)); // "Script" 3️⃣ toUpperCase() — Convert to CAPITAL Letters 🔹 Definition Returns the string in uppercase. 🧠 Hinglish Explanation Whatsapp pe aise lagta hai jaise koi chillaa kar message bhej raha ho. 😆 📱 Example let city = "varanasi"; console.log(city.toUpperCase()); // "VARANASI" 4️⃣ trim() — Remove Extra Spaces 🔹 Definition Removes spaces from start and end. 🧠 Hinglish Explanation Form bharte time users extra space daal dete hain, trim unko clean kar deta hai. 📱 Real-Life Example (Form Input Clean) let email = " ritesh@gmail.com "; console.log(email.trim()); // "ritesh@gmail.com" 🔥 Quick Summary Table MethodKaamReal Useslice()Part nikalnaUsername / Title Shortensubstring()Safe extractionWord pickingtoUpperCase()Text ko caps meLabels / Highlightstrim()Extra space hatanaForm inputs 🧠 Why These 4 Methods Matter? ✔ Clean data ✔ Better UI ✔ Faster string manipulation ✔ Interviews me 100% pooch lete hain