📅 Day 51 of #100DaysOfWebDevelopment This is part of the 100 Days of Web Development challenge, guided by mentor Muhammad Raheel at ZACoders. 🎯 Mastering Regular Expressions (Regex) in JavaScript 🧠 Today, I explored one of the most powerful tools in JavaScript — Regular Expressions (Regex). Regex allows us to search, match, and manipulate text patterns efficiently, making it an essential skill for form validation, data filtering, and text processing. ✅ What I Practiced Today: 🔹 Created different input fields to test Regex patterns in real time. 🔹 Used expressions to validate email addresses, numbers, letters, and special characters. 🔹 Practiced using RegExp methods like .test(), .match(), and .replace(). 🔹 Learned how to combine character classes, quantifiers, and anchors to form precise patterns. 🔹 Explored how Regex works with flags like g (global), i (case-insensitive), and m (multiline). ✨ Key Takeaways: 💡 Regex helps identify complex text patterns with minimal code. 💡 Validation becomes easier and more efficient using Regex. 💡 Common use cases include form validation, search filters, and input sanitization. 💡 Mastering Regex enhances both frontend and backend development skills. 📂 Please visit my GitHub to check the practice code I worked on today: 👉 GitHub - https://lnkd.in/eME6fwyV #100DaysOfCode #JavaScript #WebDevelopment #FrontendDevelopment #Regex #RegularExpressions #CodingJourney #ZACoders #Day51 #FormValidation
More Relevant Posts
-
💡 Exploring REGEX in JavaScript — My Learning Journey Recently, I’ve been exploring one of the most powerful yet underrated concepts in JavaScript — Regular Expressions (RegEx) 🧠 At first glance, it looked like a mix of slashes, brackets, and symbols — but once I understood the logic behind it, everything started to make sense 💡 Here’s what I discovered 👇 🔹 What is RegEx? A pattern-based tool in JavaScript used to search, match, validate, or replace specific parts of text efficiently. 🔹 Why it’s powerful: It helps automate complex text handling — like validating inputs, cleaning data, or filtering information — all with just a few lines of code. 🔹 How it works: You can create RegEx using literals (/pattern/) or constructors (new RegExp("pattern")). Flags like g, i, and m make matching flexible, while metacharacters and quantifiers define exactly what patterns to look for. 🔹 What I learned: How RegEx integrates with JavaScript methods like test(), match(), replace(), and split(). The importance of metacharacters and how they simplify pattern logic. How small expressions can solve big validation problems! 📘 I’ve created a short, beginner-friendly note on “Regex in JavaScript” — summarizing all the essentials in a clear way. It’s a great starting point for anyone who wants to strengthen their JS fundamentals and handle string operations like a pro ⚡ #JavaScript #Regex #LearningJourney #WebDevelopment #FrontendDevelopment #CodingCommunity #DeveloperNotes
To view or add a comment, sign in
-
🚀 Deep Clone an Object in JavaScript (without using JSON methods!) Ever tried cloning an object with const clone = JSON.parse(JSON.stringify(obj)); and realized it breaks when you have functions, Dates, Maps, or undefined values? 😬 Let’s learn how to deep clone an object the right way - without relying on JSON methods. What’s the problem with JSON.parse(JSON.stringify())? t’s a quick trick, but it: ❌ Removes functions ❌ Converts Date objects to strings ❌ Skips undefined, Infinity, and NaN ❌ Fails for Map, Set, or circular references So, what’s the alternative? ✅ Option 1: Use structuredClone() (Modern & Fast) Available in most modern browsers and Node.js (v17+). structuredClone() handles Dates, Maps, Sets, and circular references like a champ! structuredClone() can successfully clone objects with circular references (where an object directly or indirectly references itself), preventing the TypeError: Converting circular structure to JSON that occurs with JSON.stringify(). ✅ Option 2: Write your own recursive deep clone For learning purposes or environments without structuredClone(). ⚡ Pro Tip: If you’re working with complex data structures (like nested Maps, Sets, or circular references), use: structuredClone() It’s native, fast, and safe. Final Thoughts Deep cloning is one of those "simple but tricky" JavaScript topics. Knowing when and how to do it properly will save you hours of debugging in real-world projects. 🔥 If you found this helpful, 👉 Follow me for more JavaScript deep dives - made simple for developers. Let’s grow together 🚀 #JavaScript #WebDevelopment #FrontendDevelopment #CodingTips #LearnJavaScript #Programming #DeveloperCommunity #AkshayPai #WebDev #ES6 #JSDeveloper #JavaScriptTips #JavaScriptObjects #JavaScriptClone #JavaScriptCloneObject
To view or add a comment, sign in
-
-
Think recursion is scary? Reversing an array takes just two lines-and the logic is cleaner than you expect 🎯 Let me break down how recursion reverses an array step by step - this'll change how you think about problem-solving! 💪 𝐓𝐡𝐞 𝐓𝐰𝐨-𝐋𝐢𝐧𝐞 𝐌𝐚𝐠𝐢𝐜: function reverseArray(arr, start = 0, end = arr.length - 1) { if (start >= end) return arr; [arr[start], arr[end]] = [arr[end], arr[start]]; return reverseArray(arr, start + 1, end - 1); } 𝐇𝐞𝐫𝐞'𝐬 𝐭𝐡𝐞 𝐬𝐭𝐞𝐩-𝐛𝐲-𝐬𝐭𝐞𝐩 𝐛𝐫𝐞𝐚𝐤𝐝𝐨𝐰𝐧 𝐭𝐡𝐚𝐭'𝐥𝐥 𝐦𝐚𝐤𝐞 𝐢𝐭 𝐜𝐥𝐢𝐜𝐤: 🎯 𝐁𝐚𝐬𝐞 𝐂𝐚𝐬𝐞 - When start meets or exceeds end, we're done (no more swapping needed!) 🎯 𝐒𝐰𝐚𝐩 - Exchange elements at start and end positions using destructuring 🎯 𝐑𝐞𝐜𝐮𝐫𝐬𝐢𝐯𝐞 𝐂𝐚𝐥𝐥 - Move inward (start+1, end-1) and let recursion handle the rest 𝐖𝐚𝐭𝐜𝐡 𝐢𝐭 𝐰𝐨𝐫𝐤 𝐰𝐢𝐭𝐡 [1,2,3,4,5]: • Call 1: Swap positions 0,4 → [5,2,3,4,1] • Call 2: Swap positions 1,3 → [5,4,3,2,1] • Call 3: start=2, end=2 (base case reached - we're done!) 𝐖𝐡𝐲 𝐭𝐡𝐢𝐬 𝐚𝐩𝐩𝐫𝐨𝐚𝐜𝐡 𝐢𝐬 𝐩𝐮𝐫𝐞 𝐠𝐞𝐧𝐢𝐮𝐬: Recursion handles the "unwinding" naturally. Each call focuses on one swap, then trusts the next call to handle the rest. No loops, no complex indexing - just clean, mathematical thinking that reads like English! 🚀 As a React developer, this same recursive pattern shows up everywhere - component trees, state management, you name it. Master it here and watch those concepts become second nature. Drop a ❤️ if this made recursion click for you! #WebDevelopment #JavaScript #Recursion
To view or add a comment, sign in
-
🫢 Ever wondered what happens behind the scenes when you reassign a value in JavaScript? 🤔 👉 When you update a primitive data type (like string, number, boolean, undefined, null, symbol, or bigint), you’re not actually changing the existing value. 👉 Instead, JavaScript silently creates a new value in memory and points your variable to it. 🎯 👉 It’s like getting a brand-new notebook instead of erasing the old one — the old still exists, but you’ve just started fresh. 📒 ✨ So, while it looks like you’re modifying the value, you’re actually reassigning a new memory reference every time. 🌠 As they say, “Appearances can be deceiving.” 😉 The value seems to change, but deep down, it never truly does! 💡 In short: We often know that strings are immutable, but here’s the twist — all primitive data types are immutable in JavaScript! 🔥 💬 Idiom: “Appearances can be deceiving.” — Things may not be as they seem; something that looks one way on the surface may actually be very different underneath. #JavaScript #CodingTips #Programming #TechInsights #LearnToCode #DeveloperLife #FrontendDevelopment #CodeWisdom #ProfessionalLearning #CareerGrowth #JS #WebDevelopment
To view or add a comment, sign in
-
-
When you're learning JavaScript, it's easy to get overwhelmed by the number of methods available. But the truth is, you'll use a small handful of them for 90% of all your tasks. I've been focusing on mastering the core set, and it's made a huge difference. Here are the essentials :- 🧼 Cleaning & Transforming :- --> .trim(): The first step for any user input. Removes whitespace from the start & end. --> .replace(search, new): Incredibly useful for transformations and fixing data. --> .toLowerCase() / .toUpperCase(): Critical for standardizing data for comparisons. 🔪 Extracting & Searching :- --> .slice(start, end): My go-to for grabbing parts of a string. It's modern and supports negative indices. --> .includes(substring): A much more readable way to check if a string contains a value (instead of indexOf() !== -1). 🚀 The Powerhouse :- --> .split(separator): This is the game-changer. It breaks a string into an array. If you're working with URLs, CSV files, logs, or form data, you are using .split(). It's probably the most practical and powerful method of them all. Focusing on these fundamentals is the fastest way to become a productive developer. What other methods do you find yourself using all the time? #JavaScript #Developer #WebDev #CodingTips #ProgrammingFundamentals #LearnToCode
To view or add a comment, sign in
-
-
🚀 JavaScript Revision Series — Day 2 Today I revised one of the most important concepts in JavaScript: Primitive vs Reference Data Types — the reason why kabhi kabhi code “unexpected” behave karta hai 😅 🟡 Primitive Data Types (String, Number, Boolean, Null, Undefined, Symbol, BigInt) 📌 They always pass copies, so original value safe. 🔵 Reference Data Types (Arrays, Objects, Functions) 📌 They pass reference, so ek me change = dono me change. Example: arr2 = arr1; arr2.pop(); 👉 Dono arrays change 😭 --- 😄 Little JavaScript Moment Real life: 5 + 1 = 6 JavaScript: "5" + 1 = "51" Why? Because JS said: > “+? Oh, you want string mode!” 😂 But "5" - 1 = 4, kyun? > “Subtraction? Number mode on!” --- 🔍 Extra Concepts Covered ✔ typeof ✔ == vs === ✔ Type conversion basics --- 🔗 Daily Practice Repo: https://lnkd.in/ejQk84Zg Learning step by step, and enjoying the process! 💻✨ #JavaScript #JavaScriptBasics #LearningJourney #WebDevelopment #FrontendDevelopment #CodingJourney #MERNStack #MernStackLearner #ConsistencyIsKey #Saylani #SMIT #DeveloperCommunity
To view or add a comment, sign in
-
-
🟦 Day 182 of #200DaysOfCode Today, I explored one of the most important concepts in JavaScript data handling — ✨ Deep Cloning a Nested Object Manually. In JavaScript, objects are stored by reference. So if you simply assign or shallow copy an object, any nested changes will still affect the original one. To truly create an independent copy, we need a deep clone — where every nested level is recreated. 🔍 What I built: A custom deepClone() function that: ✔ Loops through every key in the object ✔ Checks if a value is another object ✔ Uses recursion to clone deeply nested structures ✔ Returns a completely separate copy Why this matters? Deep cloning is essential when working with: • React state management • Redux reducers • Complex forms • API response manipulation • Saving snapshots of data without mutation 🧠 Key Takeaways: • Understanding reference vs value is crucial in JS • Recursion is a powerful tool for traversing deep structures • Manual deep cloning builds strong mental models of how objects behave • These fundamentals help you write safer, more predictable code This was one of those exercises where a simple concept reveals a deeper layer of how JavaScript actually works behind the scenes. Master the basics → scale effortlessly into advanced topics. #JavaScript #182DaysOfCode #LearnInPublic #DeepClone #Recursion #ProblemSolving #WebDevelopment #LogicBuilding #CodingChallenge #DeveloperMindset #ObjectsInJS
To view or add a comment, sign in
-
-
𝐓𝐨𝐝𝐚𝐲 𝐈 𝐒𝐡𝐚𝐫𝐞: structuredClone() 𝐖𝐡𝐚𝐭: The structuredClone() method of the Window interface creates a deep clone of a given value using the structured clone algorithm. It handles circular refs, BigInt, Maps/Sets, Dates, TypedArray, ArrayBuffers, Blobs/Files, RegExps, and more. 𝐖𝐡𝐲: If you still use JSON.stringify/parse for deep cloning, be aware it can silently drop or corrupt data. Consider switching to structuredClone() which is safer, faster, and built for modern JavaScript. 𝐑𝐞𝐟𝐞𝐫𝐞𝐧𝐜𝐞: https://lnkd.in/d7iDcyVj #TodayIShare #TodayIShareRT #JavaScript #NodeJS
To view or add a comment, sign in
-
-
🚀 Learning Update: Stack Implementation in JavaScript Today I practiced building a Stack data structure from scratch using JavaScript! It follows the LIFO (Last In, First Out) principle — just like a stack of books 📚 The last element added is always the first one removed. Here’s a snippet of my implementation 👇 class Stack { constructor() { this.items = []; } push(value) { this.items.push(value); } pop() { if (this.items.length === 0) return undefined; return this.items.pop(); } peek() { return this.items[this.items.length - 1]; } } 🧠 What I learned: How push() and pop() work under the hood Why Stack is useful for undo operations, recursion, and function calls Practiced logical thinking and abstraction Next, I’m going to learn Queue — can’t wait to explore FIFO logic! 💻 #JavaScript #DataStructures #Stack #CodingJourney #WebDevelopment
To view or add a comment, sign in
-
Primitive vs Non-Primitive Data Type in JavaScript I remember when I was learning Javascript, I often got confused between primitive and non-primitive (or reference) types. But as soon as I could visualize how it works in memory — everything fell into place! 💡 Here’s the key idea 👇 🧱 Primitive (as in string, number, boolean, null, undefined, symbol etc) → store plain values into the memory (stack). 🧩 Non-Primitive types (object, array, function) → store addresses (references) to values in memory (heap). So when we copy a primitive value, it becomes a new one. Non-primitive types are different: when we copy them, the two variables still point to the same object! 😯 So knowing this small detail really HELPS a LOT in debugging and Understanding JavaScript behavior better. 💬 Have you ever been surprised by how objects or arrays behave in JS? #JavaScript #WebDevelopment #CodingJourney #FrontendDevelopment #LearnToCode #Programming #DeveloperCommunity #CodingBasics
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