Arrow Functions — the modern way to write functions Here's the thing about arrow functions. They don't do anything a regular function can't do. They just do it in far fewer characters. And once you see them inside map() and filter(), you never want to go back. In this chapter I cover: → What arrow functions are and why they exist → Basic syntax with a full anatomy diagram (every part labelled) → One parameter — when you can drop the parentheses → Multiple parameters — when they come back → Implicit return vs explicit return (the biggest shortcut) → Arrow vs normal function — comparison table The moment it clicks for most people: Instead of: const doubled = numbers.map(function(n) { return n * 2; }); You write: const doubled = numbers.map(n => n * 2); Same result. One line. Instant readability. Link : https://lnkd.in/gJJV8ARv checkout the hashnode profile : https://lnkd.in/gAwxuryw #JavaScript #ES6 #WebDevelopment #LearnToCode #Frontend #JSFundamentals #chaicode #hoteshchoudhary #piyushgargh
Arrow Functions in JavaScript Explained
More Relevant Posts
-
📘 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐈𝐧𝐭𝐞𝐫𝐯𝐢𝐞𝐰 𝐌𝐨𝐝𝐮𝐥𝐞 (𝐁𝐚𝐬𝐢𝐜) 𝐒𝐞𝐜𝐭𝐢𝐨𝐧 6: 𝐀𝐫𝐫𝐚𝐲 & 𝐋𝐨𝐨𝐩𝐬 🔹 𝐀𝐫𝐫𝐚𝐲 𝐐𝐮𝐞𝐬𝐭𝐢𝐨𝐧𝐬 1.What is array / collection / list? Why use it? 2.Array syntax / How to declare an array? 3.What is array index? 4.Array index starts from? 5.How to access element? 6.How to set value? 7.Findout Array length / How to find total length? 8.Array methods? 9.What is array method? 10.Why use array method? 🔹 𝐋𝐨𝐨𝐩 𝐐𝐮𝐞𝐬𝐭𝐢𝐨𝐧𝐬 1.What is loop? 2.Why use loop? 3.Loop structure? 4.Types of loop? 5.Array loop / Array specific loops? 6.Array is immutable or mutabl? 7.What is loop iteration? 8.Loop control statements? 9.What is array of object? 10.Why use array of object? 🎯 𝐈𝐧𝐭𝐞𝐫𝐯𝐢𝐞𝐰 𝐐𝐮𝐞𝐬𝐭𝐢𝐨𝐧𝐬 (𝐄𝐱𝐭𝐫𝐚) 1.What is the main difference between slice() and splice()? 1.What is the difference between map() and forEach()? (Which one should you use when?) 2.What is the difference between filter() and find()? (Which one should you use when?) 3.When to use reduce()? 4.Difference between for...in() and for...of()? #DotNet #AspNetCore #MVC #FullStack #SoftwareEngineering #ProgrammingTips #DeveloperLife #LearnToCode #JavaScript #JS #JavaScriptTips #JSLearning #FrontendDevelopment #WebDevelopment #CodingTips #CodeManagement #DevTools
To view or add a comment, sign in
-
-
📘 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐈𝐧𝐭𝐞𝐫𝐯𝐢𝐞𝐰 𝐌𝐨𝐝𝐮𝐥𝐞 (𝐁𝐚𝐬𝐢𝐜) 𝐒𝐞𝐜𝐭𝐢𝐨𝐧 7: 𝐒𝐭𝐫𝐢𝐧𝐠 1.What is string? 2.How to declare string? 3.String Declare Special way or Special purpose string? 4.String Check type? 5.String length Check? 6.String Access index? 7.What is empty string? 8.When to use empty string? 9.String is immutable or mutable? 10.String methods? 11.String concatenation? 🎯 𝐈𝐧𝐭𝐞𝐫𝐯𝐢𝐞𝐰 𝐐𝐮𝐞𝐬𝐭𝐢𝐨𝐧𝐬 (𝐄𝐱𝐭𝐫𝐚) 1.Difference between slice and substring? 2.What is template literal? 3.Why string is immutable? 4.What are the benefits of Template Literals (Backticks ``)? 5.Why are strings immutable in JavaScript? How does it work in memory? 𝐒𝐞𝐜𝐭𝐢𝐨𝐧 8: 𝐍𝐮𝐦𝐛𝐞𝐫 & 𝐃𝐚𝐭𝐞 1.What is number? 2.Number Types? 3.Math methods? 4.How to find date? 5.Date methods? 🎯 𝐈𝐧𝐭𝐞𝐫𝐯𝐢𝐞𝐰 𝐐𝐮𝐞𝐬𝐭𝐢𝐨𝐧𝐬 (𝐄𝐱𝐭𝐫𝐚) 1.Difference between Math.floor and Math.round? 2.How to generate random number between range? #DotNet #AspNetCore #MVC #FullStack #SoftwareEngineering #ProgrammingTips #DeveloperLife #LearnToCode #JavaScript #JS #JavaScriptTips #JSLearning #FrontendDevelopment #WebDevelopment #CodingTips #CodeManagement #DevTools
To view or add a comment, sign in
-
-
Solved the classic Valid Parentheses problem using a stack-based approach in JavaScript. Key idea: Use a stack to track opening brackets and a hash map to validate closing pairs efficiently in O(1). Approach: Push opening brackets (, {, [ onto the stack On encountering a closing bracket, check: If stack is empty → invalid If top of stack doesn’t match → invalid At the end, stack must be empty for a valid string Optimized with: Single pass traversal → O(n) time complexity Stack space → O(n) worst case This problem reinforces a fundamental pattern: Stack + Mapping = Efficient bracket validation #JavaScript #DataStructures #Algorithms #Stack #CodingInterview #LeetCode
To view or add a comment, sign in
-
-
So you wanna know lexical scoping? 👀 here is the easy way... But before that, you need to understand two small things. 1. Scope Scope just means where you can access a variable in your code. function greet() { let message = "Hello"; console.log(message); // works here } console.log(message); // error Here "message" only exists inside the function. 2. Lexical Lexical simply means where something is written in the code. JavaScript decides scope by how the code is structured, not where a function is called. For example: function outer() { let name = "sharat"; function inner() { console.log(name); } inner(); } "inner()" can access "name" because it was written inside "outer()". When JavaScript looks for a variable, it first checks the current scope, then moves to the outer scope, and keeps going until it reaches the global scope. That’s basically lexical scoping. all thanks to Sheryians Coding School and Devendra Dhote #javascript #webdevelopment #frontend #coding
To view or add a comment, sign in
-
-
🚀 Array Flatten in JavaScript — Quick Concept Nested arrays like [1, [2, 3], [4, [5, 6]]] can be tricky to work with. Flattening helps convert them into a simple structure: 👉 [1, 2, 3, 4, 5, 6] 💡 Why it matters: ✔️ Cleaner data handling ✔️ Easier iteration & transformations ✔️ Common in real-world APIs ✔️ Frequently asked in interviews 🧠 Popular approaches: 🔹 flat() — simple & built-in 🔹 Recursion — best for interviews 🔹 reduce() — functional style 🔹 Stack — iterative solution 👉 Rule to remember: If it’s an array → go deeper, else collect it 📌 Check out the sketchnote infographic for a quick visual understanding! Read the full guide:- https://lnkd.in/gYhbZRpw Chai Aur Code #JavaScript #Coding #WebDevelopment #InterviewPrep #DevTips #chaicode #chaiaurcode
To view or add a comment, sign in
-
-
Shipping is a habit! 🚀 2 Days, 2 Projects, and a deeper dive into JavaScript. I’ve been heads-down in the #ChaiAurCode journey, and the momentum is real. Over the last 48 hours, I’ve moved from understanding basic logic to shipping functional mini-projects. Project 1: Dynamic List Creator 📝 Focused on mastering the DOM. It’s one thing to see a list on a screen, it’s another to handle real-time user input, state updates, and clean element creation dynamically. 🌐 Try the List Creator: https://lnkd.in/grMrRqMt Project 2: Color Palette Generator 🎨 This one was a technical "Aha!" moment. 🌐 Try the Palette Generator: https://lnkd.in/gCUwyhrc Key takeaways: ➡️ Precision Math: Implementing Math.random() * (max - min) + min to control color tones (Light vs. Dark). ➡️ String Manipulation: Using .padStart(2, "0") to ensure valid Hex codes a small detail that prevents major UI bugs. ➡️ The Backend Loop: I even experimented with running an Express server and frontend logic in a single file to visualize the full Request-Response cycle. Big thanks to my mentors Hitesh Choudhary and Suraj Kumar Jha for the guidance during the T-class sessions! Github repo links - List Creator - https://lnkd.in/gH9hzGY3 Palette Generator - https://lnkd.in/gEAv7NJ4 (I've shared the screen recording for the List Creator in the comments below! 👇) Anirudh J. Akash Kadlag Jay Kadlag Piyush Garg #WebDevelopment #JavaScript #BuildInPublic #FullStackJourney #LearningTogether #Vercel #CodingProgress
To view or add a comment, sign in
-
🚀 Debounce vs Throttle — every JS dev should know the difference Both control how often a function runs, but they solve different problems. ⚡ DEBOUNCE — "Wait, then fire" Delays execution until a burst of events stops. Resets the timer on every new event. function debounce(fn, delay) { let timer; return function(...args) { clearTimeout(timer); timer = setTimeout(() => fn.apply(this, args), delay); }; } ✅ Use for: search inputs, form validation, auto-save 🔁 THROTTLE — "Fire, then wait" Executes at a fixed interval — no matter how many events fire. function throttle(fn, limit) { let inThrottle = false; return function(...args) { if (!inThrottle) { fn.apply(this, args); inThrottle = true; setTimeout(() => inThrottle = false, limit); } }; } ✅ Use for: scroll events, mouse tracking, API rate-limiting 🧠 Key mental model: → Debounce = respond once it's quiet → Throttle = pace yourself, one call per window If missing intermediate updates is fine → debounce If consistent periodic updates matter → throttle Drop a 🔥 if this was helpful! #JavaScript #WebDev #Frontend #JSConcepts #Programming #100DaysOfCode #React #Angular
To view or add a comment, sign in
-
🚀 Just built a simple Live Name Filter using JavaScript Today I practiced DOM manipulation + events + regex and created a small project where: ✔️ User types their name in input field ✔️ Only letters (a-z, A-Z) & spaces are allowed ✔️ Invalid characters are automatically removed ✔️ Input is displayed live in a heading 💡 Concepts I used: DOM Selection (querySelector) Event Handling (input event) String methods (replace) Basic Regex ([^a-zA-Z ]) Small steps every day towards becoming a better developer 💻🔥 #JavaScript #WebDevelopment #LearningInPublic #CodingJourney #Frontend #ApnaCollege
To view or add a comment, sign in
-
🚀 Debouncing in JavaScript Ever wondered why search bars don’t hit the API on every keystroke? 🤔 Here’s the trick developers use 👇 🧠 What is Debouncing? 👉 It delays the execution of a function 👉 Until a certain time has passed after the last event ⚡ Without Debounce: ❌ Every keystroke → API call 😵 Too many requests 🐌 Poor performance ✅ With Debounce: 👉 Wait for the user to stop typing 👉 Then call API once 🚀 Smooth & optimized 💡 Real-life use cases: ✔ Search inputs (autocomplete) ✔ Window resize / scroll events ✔ Button clicks 🔥 Key Understanding: 👉 Rapid events are grouped into one 👉 Improves performance & reduces API load 💡 One line to remember: 👉 “Debounce waits for silence before running” 💬 Where have you used debounce? 📌 Save this for interviews (very important concept) #javascript #webdevelopment #frontend #coding #programming #javascriptdeveloper #learncoding #developers #100DaysOfCode
To view or add a comment, sign in
-
-
🚀 DSA Challenge – Multiple Pointers Pattern 💡 Problem Given a sorted array and a target average, determine if there exists a pair whose average equals the target. 🔍 Examples averagePair([1,2,3], 2.5) ➝ true averagePair([1,3,3,5,6,7,10,12,19], 8) ➝ true averagePair([], 4) ➝ false ⚡ Approach • Initialize two pointers → one at the start, one at the end • Calculate the average of the two values • Move pointers based on comparison with the target • Achieve O(N) time and O(1) space complexity 🧠 Key Learning Instead of checking all possible pairs (O(N²)), leveraging the sorted nature of the array with the two-pointer technique makes the solution highly efficient. 🔥 Consistency is key — showing up daily to improve problem-solving skills and build stronger fundamentals. 👉 How would you approach this problem? Any edge cases or optimizations you’d consider? 🔗 GitHub: https://lnkd.in/gurx_UXW #DSA #JavaScript #CodingChallenge #100DaysOfCode #ProblemSolving #FrontendDeveloper #FullStackDeveloper #LearningInPublic #TechJourney
To view or add a comment, sign in
-
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development