FAIZAN SHAH’s Post

Today I explored one of the most powerful and widely used concepts in JavaScript: Higher-Order Functions, along with the map, filter, and reduce array methods. Understanding higher-order functions helped me see how functions in JavaScript can be passed as arguments, returned from other functions, and used to write cleaner, more expressive code. The map, filter, and reduce methods showed how complex data transformations can be handled in a functional and readable way. What I learned: How higher-order functions enable reusable and composable logic Using map() to transform data without mutating the original array Using filter() to extract specific data based on conditions Using reduce() to accumulate values and solve complex problems in a single pass 💡 Key takeaway: These methods shift the focus from how to loop to what to compute, making code more declarative, readable, and maintainable. This session strengthened my ability to work with data efficiently and write cleaner JavaScript that scales well in real-world applications. #JavaScript #HigherOrderFunctions #MapFilterReduce #FunctionalProgramming #WebDevelopment #LearningJourney

Day 64 – JavaScript String Methods Today I explored essential JavaScript String methods that help in manipulating and validating text data effectively. These methods are widely used in real-world applications such as form validation, data formatting, and UI handling. Topics Covered: length – Find the number of characters (including spaces) replace() – Replace the first occurrence of a specified value replaceAll() – Replace all matching values in a string split() – Convert a string into an array based on a separator indexOf() – Get the index position of a character or word slice() – Extract a portion of a string using index values trim() – Remove extra spaces from both ends trimStart() – Remove spaces from the beginning trimEnd() – Remove spaces from the end startsWith() – Check if a string starts with a specific value endsWith() – Check if a string ends with a specific value Understanding these methods makes string handling more efficient and improves code clarity and performance in JavaScript applications. #JavaScript #StringMethods #FrontendDevelopment #WebDevelopment #LearningJavaScript

JavaScript Data Types 🚀 Understanding JavaScript Data Types JavaScript has two main categories of data types: 1️⃣ Primitive Types: string, number, boolean, null, undefined, symbol, bigint Stored directly in memory Immutable 2️⃣ Non-Primitive (Reference) Types: object, array, function Stored as references Mutable Why it matters? ✅ Choosing the right type prevents bugs ✅ Impacts performance and memory usage 💡 Tip: Always remember primitives are copied by value, objects by reference. #JavaScript #WebDevelopment #CodingTips #DataTypes

📌 Understanding the shift() Method in JavaScript The shift() method in JavaScript is used to remove the first element from an array and return that removed element. As a result, the array’s length decreases, and all remaining elements shift one position to the left. 👉 Key Points to Remember: 🔹 It modifies the original array. 🔹 Returns undefined if the array is empty. 🔹 Time complexity is higher compared to pop() because all elements are re-indexed. 🔹 Commonly used in queue-based operations (FIFO – First In, First Out). 🔍 Why it matters: Understanding shift() helps in managing data structures like queues and handling real-time data processing efficiently. #JavaScript #WebDevelopment #FrontendDevelopment #JSArrays #CodingTips #LearnJavaScript

🚀 JavaScript Daily Tip #2 ❓ What are Data Types in JavaScript? Data types define the type of value a variable can hold. 🧠 Key Points • Primitive Types → store actual values • string, number, boolean, null, undefined, symbol, bigint • Reference Types → store memory reference • object, array, function • Primitive values are copied by value • Reference values are copied by reference ✅ Best Practice Use spread operator (...) or structured cloning when you want to copy objects safely. 👉 Follow for daily tips on JavaScript, TypeScript, Angular, HTML & CSS, MEAN

𝐓𝐡𝐞 𝐟𝐢𝐫𝐬𝐭 𝐭𝐢𝐦𝐞 𝐈 𝐜𝐚𝐦𝐞 𝐚𝐜𝐫𝐨𝐬𝐬 𝐩𝐚𝐫𝐚𝐦𝐞𝐭𝐞𝐫 𝐩𝐚𝐬𝐬𝐢𝐧𝐠 𝐢𝐧 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭, 𝐈 𝐜𝐨𝐮𝐥𝐝𝐧’𝐭 𝐰𝐫𝐚𝐩 𝐦𝐲 𝐡𝐞𝐚𝐝 𝐚𝐫𝐨𝐮𝐧𝐝 𝐢𝐭. I kept seeing pass by value and pass by reference, tried to understand them, but nothing was clicking. What finally helped was slowing down and looking at how JavaScript actually passes arguments. In JavaScript, arguments are always passed by value, but what that value is depends on the data type. When we pass a primitive (number, string, boolean), the function receives a copy. Changing the parameter does not affect the original variable. When we pass an object or array, the value being copied is a reference to the object in memory. That’s why a function can modify an object’s properties and those changes show up outside the function. The key thing to always remember when working with arrays or objects is that; 𝐚 𝐟𝐮𝐧𝐜𝐭𝐢𝐨𝐧 𝐜𝐚𝐧 𝐞𝐝𝐢𝐭 𝐭𝐡𝐞 𝐜𝐨𝐧𝐭𝐞𝐧𝐭𝐬 𝐨𝐟 𝐚𝐧 𝐨𝐛𝐣𝐞𝐜𝐭 𝐨𝐫 𝐚𝐫𝐫𝐚𝐲, 𝐛𝐮𝐭 𝐢𝐭 𝐜𝐚𝐧𝐧𝐨𝐭 𝐫𝐞𝐩𝐥𝐚𝐜𝐞 𝐭𝐡𝐞 𝐨𝐛𝐣𝐞𝐜𝐭 𝐨𝐫 𝐚𝐫𝐫𝐚𝐲 𝐭𝐡𝐚𝐭 𝐨𝐮𝐫 𝐯𝐚𝐫𝐢𝐚𝐛𝐥𝐞 𝐫𝐞𝐟𝐞𝐫𝐬 𝐭𝐨. This mental model finally made the whole thing click for me. #JavaScript #TechJourney #WebDevelopment #Growth

🧠 JavaScript Data Types Explained There are two main types of data in JavaScript. 🔹 Primitive Types are the basic data type that holds a single value and is stored directly in memory. 🏷️ String: Text, like "hello" or 'world'. 🏷️ Boolean: Either true or false. 🏷️ Number: Any number, like 42 or 3.14. 🏷️ BigInt: For really big numbers beyond normal limits. 🏷️ Undefined: A variable that hasn’t been given a value yet. 🏷️ Null: An empty or intentional “nothing” value. 🏷️ Symbol: A unique identifier (rarely used by beginners). 🔸 Non-Primitive Types are the complex data types that can store multiple values. 🏷️ Object: A collection of key-value pairs. 🏷️ Array: A list of values (a special kind of object). 🏷️ Function: Reusable blocks of code (also an object under the hood). Also follow 👉 w3schools.com and JavaScript Mastery , TheDevSpace | Dev Roadmap for more resources on web development. #javascript #js #webdevelopment #WebDevelopment #Javascript

𝗧𝗮𝗶𝗹 𝗖𝗮𝗹𝗹 𝗢𝗽𝗍𝗶𝗺𝗶𝗭𝗮𝗧𝗶𝗼𝗻 𝗜𝗻 𝗝𝗮𝗙𝗮𝗦𝗰𝗿𝗶𝗽𝗍 You can optimize recursive algorithms in JavaScript using Tail Call Optimization (TCO). TCO helps prevent stack overflows by reusing the current function's stack frame. Here's how it works: - A function calls another function as its final action before returning a value. - The JavaScript engine reuses the current function's stack frame for the next function call. Consider this example: ```javascript function factorial(n, acc = 1) { if (n <= 1) return acc; return factorial(n - 1, n * acc); } ``` In this case, the JavaScript engine can optimize the function call by reusing the current frame. To use TCO effectively: - Transform recursive functions into iterative counterparts using arrays or loops. - Use profiling tools to illustrate performance improvements. Some benefits of TCO include: - Improved performance in algorithms involving deep recursions - Efficient state management in asynchronous operations However, be aware of the potential pitfalls: - Compatibility issues across different JavaScript engines - Difficulty in debugging tail-recursive functions To debug tail-recursive functions: - Use advanced debugging tools in your browser's developer tools - Utilize logging or instrumentation libraries to track function calls Source: https://lnkd.in/de-tvK_U

Why Does Data Prints When a Function Is Called, but Needs .then() When Returned (JavaScript Async) ? While working with fetch and async/await, I noticed something interesting: 👉 When I called the function, the data printed correctly. 👉 But when I returned the data from the function, I had to handle it using .then() and .catch(). Here’s why 👇 🔹 code1- Inside an async Function inside a image. This works because console.log runs inside the async function after the promise resolves. code2 - Returning Data from an async Function 🧠 The Key Insight Every async function always returns a Promise . return data actually means → return Promise.resolve(data) The data is not available immediately So we must handle it like this or with await inside another async function. Understanding this made async JavaScript finally click for me. #JavaScript #AsyncAwait #Promises #WebDevelopment #LearningInPublic #JSFundamentals

𝗧𝗵𝗲 𝗦𝗽𝗿𝗲𝗮𝗱 𝗢𝗽𝗲𝗿𝗮𝘁𝗼𝗿 The spread operator in JavaScript helps you merge arrays and objects. You can use it to combine two arrays or objects into one. Here's how you merge two arrays: - Create two arrays: array1 and array2 - Use the spread operator to merge them: const mergedArray = [...array1, ...array2] - The result is a new array with all elements from both arrays When merging objects, the spread operator adds properties from the right object to the left one. If a property exists in both objects, the value from the right object is used. For example: - Create two objects: obj1 and obj2 - Merge them: const mergedObj = { ...obj1, ...obj2 } - The result is a new object with properties from both objects Note that the spread operator only creates a shallow copy of the object. This means that nested objects remain linked to the original object. To merge objects with nested data, consider using alternative methods like Object.assign. Source: https://lnkd.in/dq5j8t3t