Learning JavaScript Classes and Default Parameters

Day 17 of my 21 Days Learning Challenge Today I revisited a React pattern — Higher Order Components (HOC). A Higher Order Component is a function that takes a component and returns a new enhanced component. It’s mainly used to reuse logic across multiple components. 🔹 What is an HOC? In simple terms: JavaScript const EnhancedComponent = HOC(OriginalComponent); Instead of repeating logic in multiple components, we wrap them with an HOC. 1️⃣ Example JavaScript function withLogger(Component) { return function WrappedComponent(props) { console.log("Props:", props); return <Component {...props} />; }; } Using it: JavaScript const User = ({ name }) => <h2>{name}</h2>; const UserWithLogger = withLogger(User); Now every time UserWithLogger renders, it logs props automatically. 2️⃣ Why use HOC? HOCs help: • reuse logic • keep components clean • separate concerns 3️⃣ Where it is used HOCs are commonly used for: • authentication checks • logging • data fetching • permissions handling 🔹 Note With modern React, Custom Hooks are often preferred for logic reuse, but HOCs are still important to understand as they are widely used in existing codebases. Revisiting HOCs reminded me how React provides multiple ways to structure and reuse logic, and choosing the right pattern depends on the use case. #21DaysChallenge #ReactJS #JavaScript #LearningInPublic #FrontendDevelopment #WebDevelopment Sheryians Coding School

🚀 JavaScript Notes for Beginners & Developers I’m excited to share my JavaScript Notes that cover important concepts and fundamentals of JavaScript in a simple and structured way. These notes are helpful for beginners who want to start their journey in web development as well as for learners who want a quick revision. The notes include key topics such as variables, data types, functions, loops, arrays, objects, DOM basics, and other essential JavaScript concepts that every developer should know. I hope these notes will help students and developers strengthen their understanding of JavaScript and make learning easier. 📌 Feel free to explore, learn, and share your feedback! #JavaScript #WebDevelopment #Programming #Coding #Developer #Learning #TechNotes #FrontendDevelopment

Starting my JavaScript learning journey — sharing what I learn every day. 🚀 📅 JavaScript Learning Journey — Day 7 Today I learned about Conditions in JavaScript — how to make decisions in code. Conditions allow us to run different code based on different situations. --- 🔎 1. if Statement let age = 18; if (age >= 18) { console.log("You are an adult"); } --- 🔎 2. if...else let age = 16; if (age >= 18) { console.log("Adult"); } else { console.log("Not adult"); } --- 🔎 3. else if let marks = 75; if (marks >= 80) { console.log("A+"); } else if (marks >= 70) { console.log("A"); } else { console.log("B"); } --- 🔎 4. switch Statement let day = 2; switch(day) { case 1: console.log("Sunday"); break; case 2: console.log("Monday"); break; default: console.log("Invalid day"); } --- 📌 Key Takeaways (Day 7) • Conditions help make decisions • "if", "else", "else if" are most commonly used • "switch" is useful for multiple conditions --- This is Day 7 of my JavaScript learning series. Next, I’ll explore Loops in JavaScript. #JavaScript #WebDevelopment #FrontendDeveloper #LearningInPublic #100DaysOfCode

Starting my JavaScript learning journey — sharing what I learn every day. 🚀 📅 JavaScript Learning Journey — Day 4 Today I learned one of the most important fundamentals in JavaScript — Variables. Variables are used to store data so we can use and manipulate it later in our code. 🔎 What is a Variable? A variable is like a container that holds a value. 💡 Example: let name = "Redoan"; console.log(name); 🧠 Types of Variables in JavaScript There are 3 ways to declare variables: 1️⃣ var (Old way) var age = 20; 2️⃣ let (Modern & recommended) let city = "Dhaka"; 3️⃣ const (Constant value) const country = "Bangladesh"; ⚠️ Difference (Important) • "var" → can be re-declared & has function scope • "let" → can be updated but not re-declared • "const" → cannot be updated or re-declared 📌 Rules for naming variables • Cannot start with number • No spaces allowed • Use meaningful names (best practice) 📌 Key Takeaways (Day 4) • Variables store data • Use "let" and "const" in modern JavaScript • Avoid using "var" in most cases This is Day 4 of my JavaScript learning series. Next, I’ll explore Data Types in JavaScript. #JavaScript #WebDevelopment #FrontendDeveloper #LearningInPublic #100DaysOfCode #programinghero

Starting my JavaScript learning journey — sharing what I learn every day. 🚀 📅 JavaScript Learning Journey — Day 8 Today I learned about Loops in JavaScript — a powerful way to repeat tasks efficiently. Loops help us execute the same block of code multiple times without writing it again and again. --- 🔎 1. for Loop (Most Used) for (let i = 1; i <= 5; i++) { console.log(i); } 👉 Output: 1 2 3 4 5 --- 🔎 2. while Loop let i = 1; while (i <= 5) { console.log(i); i++; } --- 🔎 3. do...while Loop let i = 1; do { console.log(i); i++; } while (i <= 5); --- 🧠 When to use what? • "for" → when you know how many times to loop • "while" → when condition-based loop • "do...while" → runs at least once --- 📌 Key Takeaways (Day 8) • Loops reduce repetitive code • "for" loop is most commonly used • Always be careful with infinite loops ⚠️ --- This is Day 8 of my JavaScript learning series. Next, I’ll explore Functions in JavaScript. #JavaScript #WebDevelopment #FrontendDeveloper #LearningInPublic #100DaysOfCode

Strengthening JavaScript Fundamentals + React Learning Today I focused on improving both DSA fundamentals and React concepts. What I practiced in DSA • Bubble Sort • Selection Sort • Insertion Sort Working on these sorting algorithms helped me better understand how arrays can be organized efficiently and how algorithm logic works step by step. Alongside DSA, I attended my React class at Sheryians Coding School (Kodex Batch) guided by mentor Devendra Dhote Concepts I learned today • Lexical Scoping • Scope Mapping • Shadowing I also learned how these concepts affect state updates in React, especially when working with useState. Practical understanding • Managing state when the data is an object • Updating state when the data is an array Understanding how JavaScript scope works internally is helping me write cleaner and more predictable React code. #ReactJS #JavaScript #DSA #WebDevelopment #SortingAlgorithms #LearningInPublic #SheryiansCodingSchool #FrontendDevelopment

🚀 Day 39/100 — MERN Stack Developer Challenge Today’s learning was focused on JavaScript design patterns that help organize code and build scalable applications. 📚 What I learned: 🔹 Module Pattern (IIFE) • Using Immediately Invoked Function Expressions to create private scope and avoid global variables 🔹 Revealing Module Pattern • Structuring modules where private functions exist internally while selectively exposing public methods 🔹 Factory Function Pattern • Creating objects using functions instead of constructors or classes 🔹 Observer Pattern • Understanding how objects can subscribe to and react to changes or events These patterns helped me see how JavaScript code can be structured in a more organized, maintainable, and modular way. #100DaysOfCode #100DaysChallenge #MERNStack #JavaScript #WebDevelopment #LearningJourney #Consistency #learninpublic

React Learning Series | Day 8 – Understanding PropTypes ->In React, PropTypes are used to validate the type of props passed to a component. ->They help developers ensure that components receive the correct type of data, reducing bugs during development. ->PropTypes act as a type-checking mechanism for React components. Example: import PropTypes from "prop-types"; function User({ name, age }) { return ( <h2> {name} is {age} years old </h2> ); } User.propTypes = { name: PropTypes.string, age: PropTypes.number, }; Explanation: --PropTypes.string ensures the value must be a string --PropTypes.number ensures the value must be a number --If incorrect data is passed, React shows a warning during development Why PropTypes matter: ✔ Helps detect errors early ✔ Improves component reliability ✔ Makes code easier to understand --->PropTypes help build safer and more predictable React components. 📌 Day 8 of my React Learning Series #ReactJS #ReactDeveloper #FrontendDevelopment #WebDevelopment #JavaScript #CodingJourney #LearningInPublic #DeveloperJourney #TechLearning #LinkedInSeries 🚀

Day 64 of My 9-Month Coding Challenge 🎯 💻 Day 64 Complete | Working with Promises in JavaScript ⚡ Consistency is the real key to learning programming. Every day I try to understand not just how code works, but why it works that way. Small progress every day leads to big results over time. 🚀 Today’s Focus: ✔ Understanding Promises in JavaScript ✔ Learning how asynchronous operations work ✔ Handling success and failure using .then() and .catch() ✔ Understanding how Promises help manage asynchronous tasks 📚 What I’m Learning: ✅ What a Promise is and why it is used in JavaScript ✅ The three states of a Promise: pending, fulfilled, and rejected ✅ How .then() handles successful results ✅ How .catch() handles errors in asynchronous operations Promises are a fundamental concept in modern JavaScript. They help manage asynchronous tasks like API calls, file operations, and network requests in a more structured way. Understanding Promises is essential before mastering async/await and building scalable applications. Learning and practicing through resources and guidance from Coding Ninjas. No shortcuts, just consistency. 🎯 Still learning. Still improving. Still consistent. 💯 #Day64 #9MonthChallenge #JavaScript #Promises #AsyncJavaScript #MERNStack #WebDevelopment #LearningInPublic

Day 07 of My JavaScript Learning 👉 Finding the largest among three numbers How to compare multiple values using if-else Writing clean and readable conditions Converting logic into a reusable function // Find the largest among 3 numbers let firstNum = 5; let secondNum = 10; let thirdNum = 2; if (firstNum >= secondNum && firstNum >= thirdNum) { console.log(firstNum); } else if (secondNum >= firstNum && secondNum >= thirdNum) { console.log(secondNum); } else { console.log(thirdNum); } 🔁 Making it reusable with a function: let largestInFunction = function(firstNum, secondNum, thirdNum) { if (firstNum >= secondNum && firstNum >= thirdNum) { return firstNum; } else if (secondNum >= firstNum && secondNum >= thirdNum) { return secondNum; } else { return thirdNum; } } console.log(largestInFunction(3, 1, 4)); 🌱 My takeaway: Even simple problems help build strong fundamentals. The goal is not just solving — but understanding the logic behind it. #Day07 #JavaScript #LearningJourney #FrontendDeveloper #CodingPractice