JavaScript Arrow Functions Explained

🚀 JavaScript Spread vs Rest Operator — Same Syntax, Opposite Purpose! Understanding the difference between Spread (...) and Rest (...) operators is essential for writing clean and modern JavaScript code. Although both use the same ... syntax, they perform completely opposite tasks. 🔹 Spread Operator (...) Expands values outward • Breaks an iterable into individual elements • Useful for merging arrays or cloning objects • Common in function calls and object/array literals Example: const a = [1,2,3]; const b = [4,5,6]; const merged = [...a, ...b]; // [1,2,3,4,5,6] 🔹 Rest Operator (...) Collects values into one place • Gathers multiple arguments into an array • Used in function parameters and destructuring • Must always be the last parameter Example: function sum(...nums){ return nums.reduce((a,b) => a + b, 0); } 📌 Key Rule to Remember Spread → Expands values Rest → Collects values Small JavaScript concepts like this make a big difference in writing cleaner and more efficient code. 💬 What other JavaScript concepts should I explain next? If this helped you: 👍 Like | 💬 Comment | 🔁 Repost #JavaScript #WebDevelopment #FrontendDevelopment #SoftwareDevelopment #Programming #Coding #Developer #JavaScriptTips #TechLearning #FullStackDeveloper #DevCommunity #LearnToCode

Something small but nice I recently came across in JavaScript 👨💻✨ : String.trimEnd(). Earlier, whenever I needed to remove only the trailing spaces from a string, I used to write a small regex for it or sometimes even used .trim(). But .trim() removes both leading and trailing spaces, which isn’t always what we want — especially when the leading indentation actually matters. For example, I used to do something like this: const message = " Action Required: Clear Cache "; // Earlier approach const cleaned = message.replace(/\s+$/, ""); It works, but the regex isn’t exactly the most readable thing 🤯. Recently I noticed there’s a much cleaner native way 👇 const message = " Action Required: Clear Cache "; const result = message.trimEnd(); Now it clearly expresses the intent: remove only the trailing whitespace while keeping the start intact ✅. Result: " Action Required: Clear Cache" Small things like this make code more readable and intentional ✨, and since it’s part of modern JavaScript (along with trimStart()), there’s no need for regex hacks anymore. Sometimes the language already has the cleaner solution, we just discover it a bit later 😄🚀 #JavaScript #CodingTips #CleanCode #WebDev #WebDevelopment

Day 3 — JavaScript is humbling me in the best way. Started with the basics I thought I already knew. Turns out I knew the syntax but not the why. var vs let vs const — I used to just pick randomly. Now I get why const is default and var is basically legacy. The thing that actually clicked today: arrow functions aren't just shorter syntax. They handle 'this' differently. That's why everyone prefers them in certain situations. Also spent an hour on map, filter, and reduce with real data instead of fake tutorials. Way more useful. Favourite thing I learned: optional chaining (?.) — it's saved me from so many "cannot read property of undefined" errors already. Drop a JavaScript concept below that confused you at first 👇 #javascript #webdevelopment #frontenddeveloper #coding

💡 JavaScript Cheat Sheet: var vs let vs const Understanding the difference between "var", "let", and "const" is one of the first steps to writing better JavaScript code 🚀 Here’s a quick breakdown: 🔹 "var" – function scoped, can be redeclared & updated (avoid in modern JS) 🔹 "let" – block scoped, can be updated but not redeclared 🔹 "const" – block scoped, cannot be reassigned (but objects/arrays can still mutate) 👉 The rule I follow: - Use "const" by default - Use "let" when reassignment is needed - Avoid "var" This small concept can prevent big bugs in real projects 💡 📌 Save this cheat sheet for quick revision! #JavaScript #FrontendDevelopment #WebDevelopment #Coding #100DaysOfCode #LearnToCode

𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗠𝘆𝘀𝘁𝗲𝗿𝘆 𝗦𝗼𝗹𝘃𝗲𝗱: 𝗧𝗵𝗲 𝗧𝗲𝗺𝗽𝗼𝗿𝗮𝗹 𝗗𝗲𝗮𝗱 𝗭𝗼𝗻𝗲 (𝗧𝗗𝗭) 🚫 Ever tried to use a variable before you've actually created it and been met with a frustrating ReferenceError? You've just met the Temporal Dead Zone, a classic JavaScript confusing point! Here's a simple breakdown of what it is and why it matters: What is it? It's the region in your code from the start of a scope until a variable is declared using let or const. During this "temporal" time, you absolutely cannot access that variable. ⏳ Why does it exist? JavaScript wants to prevent you from using uninitialized values, which can lead to buggy, unpredictable code. The TDZ is a safety net that catches these errors early. 🧱 Wait, isn't it the same as hoisting? No! Hoisting moves declarations to the top of the scope, but only let and const create this mandatory TDZ before initialization. For var, you can access it (and get undefined). The TDZ makes your code much safer and more readable. ✨ What's the best way to handle it? 𝗘𝗮𝘀𝘆: always declare your variables at the very top of their scope! This makes your intentions clear to both the engine and other developers. This is a crucial step for writing efficient, professional-grade JavaScript code. 🤩 #JavaScript #WebDevelopment #CodingTips #SoftwareEngineering #TemporalDeadZone #Hoisting #Let #Const #LearningToCode #ProgrammingConcepts

🚀 Day 7/100 of #100DaysOfCode Today was all about strengthening JavaScript fundamentals — revisiting concepts that seem simple but are often misunderstood. 🔁 map() vs forEach() Both are used to iterate over arrays, but they serve different purposes: 👉 map() Returns a new array Used when you want to transform data Does not modify the original array Example: const doubled = arr.map(num => num * 2); 👉 forEach() Does not return anything (undefined) Used for executing side effects (logging, updating values, etc.) Often modifies existing data or performs actions Example: arr.forEach(num => console.log(num)); ⚔️ Key Difference: Use map() when you need a new transformed array Use forEach() when you just want to loop and perform actions ⚖️ == vs === (Equality in JS) 👉 == (Loose Equality) Compares values after type conversion Can lead to unexpected results Example: '5' == 5 // true 😬 👉 === (Strict Equality) Compares value AND type No type coercion → safer and predictable Example: '5' === 5 // false ✅ 💡 Takeaway: Small concepts like these make a big difference in writing clean, bug-free code. Mastering the basics is what separates good developers from great ones. 🔥 Consistency > Intensity On to Day 8! #JavaScript #WebDevelopment #CodingJourney #LearnInPublic #Developers #100DaysOfCode #SheryiansCodingSchool #Sheryians

📌 Learning JavaScript Through Real Projects Recently, I worked on implementing a client-side filtering system using JavaScript — combining search input, status selection, and date filtering. One key improvement I made was restructuring my logic into reusable functions. Instead of handling everything inside an event listener, I: Created a dedicated filtering function Passed dynamic inputs (search text, status, date) Returned filtered results based on conditions This approach improved: ✔ Code readability ✔ Maintainability ✔ Reusability 💡 Takeaway: Writing working code is good — but writing scalable and reusable code is better. I’m continuing to refine how I structure logic as I build more projects. #JavaScript #FrontendDevelopment #SoftwareEngineering #CleanCode #WebDevelopment

𝗦𝗽𝗿𝗲𝗮𝗱 𝗩𝗦 𝗥𝗲𝘀𝘁 𝗢𝗽𝗲𝗿𝗮𝘁𝗼𝗿𝘀 𝗜𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 You've seen ... in JavaScript and wondered what it does. The same syntax is used for two purposes: - Spread operator expands values - Rest operator collects values Understanding this difference is crucial for writing clean JavaScript. The spread operator is used to expand elements from arrays or objects. It spreads elements individually and creates a shallow copy, avoiding mutation. The rest operator is used to collect multiple values into one. It gathers everything into an array. Here are key differences: - Purpose: Spread expands, Rest collects - Usage: Spread on the right, Rest on the left - Output: Spread gives individual elements, Rest gives an array Mastering spread vs rest helps you write cleaner code, handle data efficiently, and solve interview problems confidently. Source: https://lnkd.in/gmFfBhXX

Built-in vs Manual Flattening in JavaScript Stop writing custom logic to flatten arrays in JavaScript. There’s already a built-in method for it: flat(Infinity) It flattens nested arrays of any depth into a single-level array, no loops, no recursion. Example: [1, [2, [3, [4]]]].flat(Infinity) // → [1, 2, 3, 4] Sometimes the simplest solutions are already part of the language. Knowing your standard library can save you more time than any framework.

Most developers use JavaScript… but don’t truly understand it. Here’s the truth: If you don’t understand: Hoisting Scope Execution Context You’re not writing JavaScript… You’re just guessing Example: Why does this work? console.log(a); var a = 10; And this breaks? console.log(b); let b = 10; The answer lies in how JavaScript executes code internally. Behind every line of JS: Execution Context is created Memory is allocated (Hoisting) Scope chain is formed Then code runs Once you understand this, everything clicks: Closures Async JS Debugging complex bugs This is not “advanced”… This is fundamentals most people skip. Start mastering the engine, not just the syntax. Follow Royal Decode for more real dev insights #JavaScript #CodingJourney #FrontendDeveloper #ProgrammingLife #DevTips #LearnJavaScript #RoyalResearch