🚀 Day 14/100 – Implementing a "flattenArray" Function (JavaScript) Today I solved a common JavaScript problem: Flattening a nested array. --- 🧠 Problem: Given a nested array, return a single-level array containing all the elements. Example: Input: [1, 2, [3, 4], [5, [6, 7]]] Output: [1, 2, 3, 4, 5, 6, 7] --- ✅ Solution (Using Recursion): function flattenArray(arr) { const result = []; for (let item of arr) { if (Array.isArray(item)) { result.push(...flattenArray(item)); } else { result.push(item); } } return result; } const arr = [1, 2, [3, 4], [5, [6, 7]]]; console.log(flattenArray(arr)); // Output: [1,2,3,4,5,6,7] --- 💡 Key Learning: - Recursion helps solve nested data problems - "Array.isArray()" checks whether a value is an array - Spread operator ("...") helps merge results --- 📌 Time Complexity: O(n) – Every element is processed once. 📌 Space Complexity: O(n) – For the result array. --- 🧠 Why This Matters? Flattening arrays is useful in: - Data transformation - Handling nested API responses - Building utility functions - JavaScript interview questions --- 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, feel free to connect. #OpenToWork #FrontendDeveloper #JavaScript #ReactJS #NextJS #ImmediateJoiner #100DaysOfCode
Flatten Nested Arrays with JavaScript Recursion
More Relevant Posts
-
🚀 Day 18/100 – Understanding Memoization in JavaScript Today I explored a powerful optimization technique in JavaScript: Memoization. Memoization helps improve performance by caching the result of expensive function calls and returning the cached result when the same inputs occur again. 🧠 Problem: How can we avoid recalculating the same function result multiple times? ✅ Example: function memoize(fn) { const cache = {}; return function (...args) { const key = JSON.stringify(args); if (cache[key]) { console.log("From cache"); return cache[key]; } console.log("Calculated"); const result = fn(...args); cache[key] = result; return result; }; } function slowSquare(n) { return n * n; } const memoizedSquare = memoize(slowSquare); console.log(memoizedSquare(5)); console.log(memoizedSquare(5)); ✅ Output: Calculated 25 From cache 25 💡 Key Learnings: • Memoization stores previously computed results • Prevents unnecessary recalculations • Improves performance in expensive operations • Widely used in optimization techniques 📌 Real World Usage: Memoization concepts are used in: • React performance optimization (useMemo) • Dynamic programming algorithms • Expensive computations • Caching API results 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 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
-
Stale Closure in React👵: Before understanding what is stale closure.Let's first understand what is closure. So ,closure means a function remembers variables from scope from where it was created even if the scope changes later. In React every render creates a new scope.So functions created during a render "capture" the state values of that specific render. ##Stale_Closure A stale closure happens when a function keeps referencing an old state or prop value instead of new one. ❓ Why it happens? .Using setInterval .Using setTimeOut .Async API calls .Event Listners .Incorrect use of dependency array in useEffect ❓ How to fix it? .Use functional State update .Use useRef to store latest values .Add proper despondency array #reactjs #reactinterview #react18 #frontendjobs #ReactJS #Node #Frontend #InterviewPreparation #JavaScript #FullStack #WebDevelopment #SoftwareEngineer #Learning #Hiring #Jobs #FresherJobs #TechTalks #Software #MERN
To view or add a comment, sign in
-
📌 Advanced JavaScript Concepts Every Developer Should Know JavaScript is the backbone of modern web applications. But building scalable applications requires understanding how JavaScript works internally — not just writing syntax. Here are some advanced concepts every developer should master 👇 ⚡ Event Loop & Async Behavior JavaScript is single-threaded but can handle asynchronous tasks using the event loop. Call Stack → Web APIs → Callback Queue → Event Loop → Execution Understanding this helps in writing non-blocking and efficient code. 🧠 Closures Closures allow functions to retain access to variables from their outer scope even after execution. Used in: ✔ Data privacy ✔ Function factories ✔ React hooks patterns 🔄 Debounce & Throttle These techniques optimize performance when handling frequent events. Example: Search input → API calls Without debounce → Too many requests With debounce → Controlled execution Used heavily in frontend performance optimization. ⚙️ Promises & Async/Await Promises simplify asynchronous programming. Example use cases: ✔ API calls ✔ Database communication ✔ Background operations This improves readability and error handling. 🔍 Prototypal Inheritance JavaScript objects inherit properties through the prototype chain. Understanding prototypes helps developers build efficient and reusable logic. 📦 ES Modules Modern applications use JavaScript modules for scalable architecture. Benefits: ✔ Better code organization ✔ Reusability ✔ Maintainability 💡 Final Thought Advanced JavaScript knowledge is essential for building scalable web applications. Understanding how JavaScript works internally helps developers: ✔ Improve performance ✔ Write cleaner code ✔ Design better frontend architecture 💼 Currently exploring opportunities as a Frontend Developer / Full Stack Developer / Software Engineer. 🚀 Open to work and available for immediate joining. Tech Stack: React • JavaScript • Node.js • MongoDB • REST APIs • Frontend Architecture #JavaScript #FrontendDeveloper #FullStackDeveloper #SoftwareEngineer #ReactJS #MERNStack #WebDevelopment #FrontendEngineering #NodeJS #MongoDB #OpenToWork #ImmediateJoiner #HiringDevelopers #TechJobs #DeveloperJobs #SoftwareDeveloperJobs #HiringNow #TechCareers #CodingLife #DeveloperCommunity #JavaScriptDeveloper #ReactDeveloper
To view or add a comment, sign in
-
-
We have always heard about two important hooks used in react for performance optimization? useMemo() and useCallback(). ❓ But is useCallback just a syntactic sugar over useMemo? 🍩 Technically yes because as we know useMemo is used to memoize a value whereas useCallback is used to memoize a function. So,you can think useCallback a specialized version of useMemo for functions. 💡 Syntax: 🤜 For useMemo(): const memoizedFn = useMemo(()=> { return () => console.log("Hello"); }; },[]); 🤜 For useCallback(): const memoizedFn = useCallback(()=> { console.log("Hello"); },[]); So basically , 👀 useCallback(fn,deps) is useMemo(()=> fn,deps) #reactjs #reactinterview #react18 #frontendjobs #ReactJS #Node #Frontend #InterviewPreparation #JavaScript #FullStack #WebDevelopment #SoftwareEngineer #Learning #Hiring #Jobs #FresherJobs #TechTalks #Software #MERN
To view or add a comment, sign in
-
👋 Hi LinkedIn! I’m a Frontend Developer working with JavaScript, React, Angular and modern frontend technologies. Over the next few weeks, I’ll be sharing: • JavaScript concepts • Frontend interview questions • Performance optimization tips • Real-world frontend problems & solutions If you're preparing for frontend interviews or building scalable UI applications, please feel free to follow along. Let’s grow together 🚀 Comment down your favorite topics. #javascript #frontend #webdevelopment #js #UI #AI #angular #reactjs #webdevelopment #softwareengineering #programming
To view or add a comment, sign in
-
🚀 Day 15/100 – Building an Inverted Index in JavaScript Today I implemented a simple Inverted Index in JavaScript. An inverted index is a data structure commonly used in search engines to map content (like tags or words) to the documents that contain them. 🧠 Problem: Given a list of documents with tags, create a structure where each tag points to the list of document IDs containing that tag. Example Input: const documents = [ { id: 1, tags: ['js', 'react', 'node'] }, { id: 2, tags: ['js', 'vue'] }, { id: 3, tags: ['react', 'angular'] } ]; Expected Output: { js: [1,2], react: [1,3], node: [1], vue: [2], angular: [3] } ✅ Solution: function createInvertedIndex(documents) { if (typeof documents !== "object") return {}; const seen = {}; for (let doc of documents) { for (const tag of doc.tags) { if (!seen[tag]) { seen[tag] = []; } seen[tag].push(doc.id); } } return seen; } const case1_docs = [ { id: 1, tags: ['js', 'react', 'node'] }, { id: 2, tags: ['js', 'vue'] }, { id: 3, tags: ['react', 'angular'] } ]; console.log(createInvertedIndex(case1_docs)); 💡 Key Learnings: Efficient way to map tags → documents Useful for search systems and filtering Demonstrates hash map usage in JavaScript Time Complexity: O(n × t) (n = number of documents, t = tags per document) 📌 Why This Matters? Data indexing patterns like this are used in: Search engines Tag-based filtering Recommendation systems Large-scale data retrieval systems 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, feel free to connect. #OpenToWork #FrontendDeveloper #JavaScript #ReactJS #NextJS #ImmediateJoiner #100DaysOfCode
To view or add a comment, sign in
-
🚀 Frontend vs Backend vs Full Stack: Which Path Fits You? Starting in web development can feel overwhelming—but choosing your path is easier when you understand the core roles: 🎨 Frontend Engineers: The Visual Architects Bring designs to life! Everything users see & interact with: buttons, layouts, animations. Core Tech: HTML, CSS, JavaScript, React, Vue, Angular ⚙️ Backend Engineers: The Engine Room Power the app behind the scenes. Build APIs, manage databases, ensure server logic runs smoothly. Core Tech: Node.js, Python, PHP, Java, SQL/NoSQL 🛠️ Full Stack Engineers: The All-Rounders Handle both frontend & backend to build complete, end-to-end apps. 💡 Which fits you? • Love visual storytelling → Frontend • Love logic & data architecture → Backend • Want the full lifecycle → Full Stack 🌟 Whatever path you choose, there’s huge room to grow in tech. 💬 Question: Which path are you aiming for? Let’s discuss 👇 #WebDevelopment #Frontend #Backend #FullStack #Coding #TechCareers #Developers #LearnToCode #Programming #SoftwareEngineering #LinkedInTech #WebDeveloper
To view or add a comment, sign in
-
-
🚀 JavaScript: Spread vs Rest Both use the same symbol ... but behave differently. Spread → expands values const user = { name: "Priya" }; const updatedUser = { ...user, role: "Developer" }; console.log(updatedUser); // { name: "Priya", role: "Developer" } Rest → collects remaining values const { name, ...rest } = { name: "Priya", role: "Developer", city: "Delhi" }; console.log(rest); // { role: "Developer", city: "Delhi" } Easy way to remember: Spread → Expand values Rest → Collect remaining values #javascript #developer #interviewprepration #javascriptinterview #frontenddeveloper #frontendrole #explore #React #reactjs
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
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