🚀 Day 19/100 – Implementing a Simple once() Utility in JavaScript Today I explored how to create a small but useful JavaScript utility: a function that can run only once. This pattern is often used when we want to prevent duplicate execution, such as initializing something only once or preventing multiple button submissions. 🧠 Problem: Create a function once() that ensures another function can only be executed a single time. ✅ Solution: function once(fn) { let called = false; let result; return function (...args) { if (!called) { called = true; result = fn(...args); } return result; }; } function init() { console.log("Initialization runs"); return "Done"; } const initialize = once(init); initialize(); initialize(); initialize(); ✅ Output: Initialization runs Done Done Done The function executes only the first time, and the result is reused afterwards. 💡 Key Learnings: • Closures help preserve internal state • Useful for initialization logic • Prevents duplicate execution • Small utility but very practical in real-world apps Understanding patterns like this improves how we structure safe and predictable JavaScript code. I’m currently open to Frontend Developer opportunities (React / Next.js) and available for immediate joining. 📩 Email: bantykumar13365@gmail.com 📱 Mobile: 7417401815 If you're hiring or know someone who is, I’d love to connect. #OpenToWork #FrontendDeveloper #JavaScript #ReactJS #NextJS #ImmediateJoiner #100DaysOfCode
Implementing once() Utility in JavaScript for Single Execution
More Relevant Posts
-
💡 JavaScript Tip – What is a Closure? Closures are one of the most powerful concepts in JavaScript. A closure is created when a function remembers variables from its outer scope, even after the outer function has finished executing. function outer() { let count = 0; return function inner() { count++; console.log(count); }; } const counter = outer(); counter(); // 1 counter(); // 2 counter(); // 3 🔹 Here, the inner function still has access to the count variable, even after outer has finished executing. 👉 This is called a closure. 📌 Where it is used? Data hiding Creating private variables Callbacks & event handlers Understanding closures helps you write better and more advanced JavaScript code. As a Frontend Developer with 2 years of experience in React.js, I enjoy learning and sharing core JavaScript concepts. Currently looking for Frontend Developer / React.js opportunities and available for immediate joining. #JavaScript #FrontendDeveloper #ReactJS #WebDevelopment #CodingTips #DeveloperTips #Closures #SoftwareDeveloper #TechLearning #OpenToWork #ImmediateJoiner #ITJobs #HiringNow
To view or add a comment, sign in
-
💡 JavaScript Tip – Debouncing vs Throttling While working on frontend performance, I explored two important concepts: Debouncing and Throttling. These techniques help in optimizing performance when dealing with events like scrolling, typing, or resizing. 🔹 Debouncing Delays the function execution until the user stops triggering the event. 👉 Example: Search input (API call after user stops typing) 🔹 Throttling Limits the function execution to run at fixed intervals. 👉 Example: Scroll event (runs every few milliseconds) function debounce(func, delay) { let timer; return function () { clearTimeout(timer); timer = setTimeout(() => func(), delay); }; } Using these techniques helps improve performance and user experience in web applications. As a Frontend Developer with 2 years of experience in React.js, I enjoy learning and sharing useful JavaScript concepts. Currently looking for Frontend Developer / React.js opportunities and available for immediate joining. #JavaScript #FrontendDeveloper #ReactJS #WebDevelopment #CodingTips #PerformanceOptimization #DeveloperTips #SoftwareDeveloper #TechLearning #OpenToWork #ImmediateJoiner #ITJobs #HiringNow
To view or add a comment, sign in
-
🚀 Day 20/100 – Implementing a curry() Function in JavaScript Today I explored an advanced JavaScript concept: Currying. Currying transforms a function with multiple arguments into a sequence of functions, each taking a single argument. 🧠 Problem: Convert a function so that it can be called like: sum(1)(2)(3) // 6 ✅ Solution: function curry(fn) { return function curried(...args) { if (args.length >= fn.length) { return fn(...args); } else { return function (...nextArgs) { return curried(...args, ...nextArgs); }; } }; } function sum(a, b, c) { return a + b + c; } const curriedSum = curry(sum); console.log(curriedSum(1)(2)(3)); console.log(curriedSum(1, 2)(3)); console.log(curriedSum(1)(2, 3)); ✅ Output: 6 6 6 💡 Key Learnings: • Currying allows partial application of functions • Helps create reusable and flexible functions • Improves function composition • Common in functional programming 📌 Real World Usage: • Used in utility libraries like Lodash • Helps in writing cleaner React code • Useful in event handling and reusable logic Understanding currying improves how you think about functions and composition in JavaScript. I’m currently open to Frontend Developer opportunities (React / Next.js) and available for immediate joining. 📩 Email: bantykumar13365@gmail.com 📱 Mobile: 7417401815 If you're hiring or know someone who is, I’d love to connect. #OpenToWork #FrontendDeveloper #JavaScript #ReactJS #NextJS #ImmediateJoiner #100DaysOfCode
To view or add a comment, sign in
-
🚀 Day 21/100 – Implementing Promise.race() in JavaScript Today I explored another important Promise method: Promise.race() It returns the result of the first settled promise (either resolved or rejected). 🧠 Problem: Create a custom implementation of Promise.race(). ✅ Solution: function myPromiseRace(promises) { return new Promise((resolve, reject) => { promises.forEach((promise) => { Promise.resolve(promise) .then(resolve) .catch(reject); }); }); } // Example const p1 = new Promise((res) => setTimeout(() => res("First"), 1000)); const p2 = new Promise((res) => setTimeout(() => res("Second"), 500)); myPromiseRace([p1, p2]) .then((data) => console.log(data)) .catch((err) => console.error(err)); ✅ Output: Second (Because it resolves faster) 💡 Key Learnings: • Returns the first settled promise (resolve or reject) • Does NOT wait for all promises • Useful for timeouts and fallback strategies • Works well in race conditions 📌 Real World Usage: • API timeout handling • Loading fastest resource • Fallback mechanisms • Performance optimization Understanding Promise utilities helps in writing better async logic and handling real-world scenarios. I’m currently open to Frontend Developer opportunities (React / Next.js) and available for immediate joining. 📩 Email: bantykumar13365@gmail.com 📱 Mobile: 7417401815 If you're hiring or know someone who is, I’d love to connect. #OpenToWork #FrontendDeveloper #JavaScript #Promises #ReactJS #NextJS #ImmediateJoiner #100DaysOfCode
To view or add a comment, sign in
-
💡 JavaScript Tip – Useful Array Methods (map, filter, reduce) While working with JavaScript, I realized how powerful array methods are for writing clean and efficient code. Here are 3 important ones every developer should know: 🔹 map() Used to transform each element in an array 👉 Returns a new array 🔹 filter() Used to filter elements based on a condition 👉 Returns a new array 🔹 reduce() Used to accumulate values into a single result 👉 Returns a single value Example: const numbers = [1, 2, 3, 4, 5]; // map const doubled = numbers.map(num => num * 2); // filter const even = numbers.filter(num => num % 2 === 0); // reduce const sum = numbers.reduce((acc, num) => acc + num, 0); console.log(doubled, even, sum); Using these methods helps write clean, readable, and functional code. As a Frontend Developer with 2 years of experience in React.js, I enjoy learning and sharing useful JavaScript concepts. Currently looking for Frontend Developer / React.js opportunities and available for immediate joining. #JavaScript #FrontendDeveloper #ReactJS #WebDevelopment #CodingTips #DeveloperTips #SoftwareDeveloper #TechLearning #OpenToWork #ImmediateJoiner #ITJobs #HiringNow
To view or add a comment, sign in
-
🚀 Frontend Developer Roadmap If you want to become a Frontend Developer, start by building a strong foundation step by step: 1️⃣ HTML & CSS – Structure and styling of websites 2️⃣ JavaScript – Add interactivity and dynamic behavior 3️⃣ Responsive Design – Make websites work on all devices 4️⃣ Frontend Frameworks – React / Vue / Angular 5️⃣ Version Control – Git & GitHub 6️⃣ APIs – Fetch and display data from servers 7️⃣ Performance & Optimization – Faster and better user experience The key is simple: Keep learning. Keep building. Keep improving. 💻 💬 Which frontend skill are you currently learning? #frontenddeveloper #webdevelopment #javascript #coding #developers #tech
To view or add a comment, sign in
-
-
💡 JavaScript Tip – Difference between var, let, and const Understanding the difference between var, let, and const is very important for writing clean JavaScript code. Here’s a quick explanation: 🔹 var Function scoped Can be re-declared and updated Used in older JavaScript 🔹 let Block scoped Can be updated but not re-declared in the same scope Preferred for variables that change 🔹 const Block scoped Cannot be updated or re-declared Used for values that should remain constant Using let and const helps avoid bugs and makes the code more predictable. As a Frontend Developer with 2 years of experience in React.js, I enjoy sharing small JavaScript tips while continuing to learn every day. Currently looking for Frontend Developer / React.js opportunities and available for immediate joining. #JavaScript #FrontendDeveloper #ReactJS #WebDevelopment #CodingTips #DeveloperTips #SoftwareDeveloper #TechLearning #OpenToWork #ImmediateJoiner #ITJobs #HiringNow
To view or add a comment, sign in
-
Recently, I interviewed for multiple Senior React.js & Tech Lead roles — and noticed a pattern. Most interviewers asked basic but frequently repeated questions that test your clarity of concepts + coding approach. Here are the Top 10 common questions I was asked 👇 1️⃣ Call, Apply, Bind → Difference + Polyfill implementation 2️⃣ Flatten an Array without Array.flat() 👉 Input: [1,2,3,[4,5,6,[7,8,[10,11]]],9] 👉 Output: [1,2,3,4,5,6,7,8,10,11,9] 3️⃣ Inline 5 divs in a row without flex/margin/padding (Hint: display: inline-block) 4️⃣ Find sum of numbers without a for loop (Hint: reduce() / recursion) 5️⃣ Deep Copy vs Shallow Copy — behavior & how to achieve it 6️⃣ Promise & Async/Await output puzzle 7️⃣ Find first repeating character (e.g., "success" → "c") 8️⃣ Stopwatch Implementation (Start, Stop, Reset + live timer) 9️⃣ Build a To-Do List (Vanilla JS/React) → optimize re-renders 🔟 Currying for Infinite Sum 👉 sum(10)(20)(30)() → 60 👉 sum(10)(20)(30)(40)(50)(60)() → 210 𝐠𝐞𝐭 𝐞𝐛𝐨𝐨𝐤 𝐰𝐢𝐭𝐡 (detailed 232 ques = 90+ frequently asked Javascript interview questions and answers, 70+ Reactjs Frequent Ques & Answers, 50+ Output based ques & ans, 23+ Coding Questions & ans, 2 Machine coding ques & ans) 𝐄𝐛𝐨𝐨𝐤 𝐋𝐢𝐧𝐤: https://lnkd.in/gJMmH-PF Follow on Instagram : https://lnkd.in/gXTrcaKP #javascript #javascriptdeveloper #reactjs #reactnative #vuejsdeveloper #angular #angulardeveloper
To view or add a comment, sign in
-
🚨 Recently ran into this bug in a React Native project—and it took a while to figure out. The state was updating correctly… but inside a function, it kept showing the OLD value 😳 👉 Turns out, it was the Stale Closure Problem const [count, setCount] = useState(0); useEffect(() => { setInterval(() => { console.log(count); // ❌ Always 0 }, 1000); }, []); Even after updating count, it keeps logging the old value. 💥 Why does this happen? Because JavaScript closures capture values at the time of render—not the latest state. ✅ Fix #1: Add dependency (simple, but not always ideal) useEffect(() => { const id = setInterval(() => { console.log(count); }, 1000); return () => clearInterval(id); }, [count]); ✅ Fix #2 (better for production): useRef const countRef = useRef(count); useEffect(() => { countRef.current = count; }, [count]); useEffect(() => { const id = setInterval(() => { console.log(countRef.current); // ✅ Always latest value }, 1000); return () => clearInterval(id); }, []); 💡 You’ll often see this in: • setInterval / setTimeout • WebSockets • Event listeners • Background tasks 👉 Have you ever faced this issue? 👉 How did you solve it? Let’s discuss 👇 I’m currently exploring new opportunities in React Native — would love to connect! #ReactNative #JavaScript #Frontend #BugFix #OpenToWork
To view or add a comment, sign in
-
Hiring a React Developer for a Small Website? Read This First 👇 A 5–10 page website may sound simple — but building it the right way with React requires more than just components and styling. Here’s what a skilled React developer should deliver: • Proper project setup — Vite / Next.js, clean structure, and scalability • Strong understanding of JavaScript (ES6+) — not just copy-paste code • Component-based architecture with reusable and maintainable code • Responsive, mobile-first UI across all devices • State management (Context API / Zustand / Redux when needed) • API integration with proper error handling and loading states • Performance optimization — lazy loading, code splitting, memoization • SEO-friendly setup (especially with Next.js) • Clean UI/UX with attention to detail and smooth interactions A small website isn’t just about making it “look good” — it’s about building something fast, scalable, and future-ready. #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #NextJS #UIUX #Performance
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