JavaScript Variable Declarations: var, let, const

What is JSX and how is it converted into JavaScript? JSX: Syntax extension for JavaScript, mainly used with React. HTML in JS: Allows writing HTML-like code inside JavaScript for easier readability and maintenance. Expressions: Embed JavaScript expressions in JSX using {}. Example of JSX: The name written in curly braces { } signifies JSX const name = "Learner"; const element = ( <h1> Hello, {name}.Welcome to Rajshahi . </h1> ); Browsers can’t understand JSX directly. Instead, tools like Babel transpile it into plain JavaScript using React.createElement(). const element = <h1>Hello, Rajshahi!</h1>; Babel converts it into: const element = React.createElement("h1", null, "Hello, World!");

💡 Understanding var, let, and const in JavaScript — A Must for Every Developer! When writing JavaScript, knowing how variables behave is crucial for clean and bug-free code. Here’s a quick breakdown 👇 🔹 var Scope: Function-scoped Hoisted: Yes (initialized as undefined) Re-declaration: Allowed ⚠️ Can cause unexpected results due to hoisting and re-declaration. 🔹 let Scope: Block-scoped ({ }) Hoisted: Yes (but not initialized — Temporal Dead Zone) Re-declaration: ❌ Not allowed in same scope ✅ Preferred for variables that can change. 🔹 const Scope: Block-scoped Hoisted: Yes (not initialized — Temporal Dead Zone) Re-declaration / Re-assignment: ❌ Not allowed ✅ Use for constants and values that never change. 🔍 Example: { var a = 10; let b = 20; const c = 30; } console.log(a); // ✅ Works (function-scoped) console.log(b); // ❌ Error (block-scoped) console.log(c); // ❌ Error (block-scoped) 🧠 Pro tip: Always prefer let and const over var for predictable and safer code. ✨ Which one do you use most often — let or const? Let’s discuss 👇 #JavaScript #WebDevelopment #Frontend #CodingTips #ES6

*5 Things I Wish I Knew When Starting JavaScript 👨💻* Looking back, JavaScript was both exciting and confusing when I started. Here are 5 things I wish someone had told me earlier: *1. `var` is dangerous. Use `let` and `const`* – `var` is function-scoped and can lead to unexpected bugs. `let` and `const` are block-scoped and safer. *2. JavaScript is asynchronous* – Things like `setTimeout()` and `fetch()` don’t behave in a straight top-down flow. Understanding the *event loop* helps a lot. *3. Functions are first-class citizens* – You can pass functions as arguments, return them, and even store them in variables. It’s powerful once you get used to it. *4. The DOM is slow – avoid unnecessary access* – Repeated DOM queries and manipulations can hurt performance. Use `documentFragment` or batch changes when possible. *5. Don’t ignore array methods* – `map()`, `filter()`, `reduce()`, `find()`… they make code cleaner and more readable. I wish I started using them sooner. 💡 *Bonus Tip:* `console.log()` is your best friend during debugging! If you’re starting out with JS, save this. And if you're ahead in the journey — what do *you* wish you knew earlier? #JavaScript #WebDevelopment #CodingJourney #Frontend #LearnToCode #DeveloperTips

⚙ Understanding Functions in JavaScript — The Building Blocks of Code A function in JavaScript is like a mini-program inside your main program. It allows you to reuse code, organize logic, and make your code modular. --- 💡 Definition: A function is a block of code designed to perform a particular task. You can define it once and call it multiple times. --- 🧠 Syntax: function greet(name) {  console.log("Hello, " + name + "! 👋"); } greet("Kishore"); greet("Santhiya"); ✅ Output: Hello, Kishore! 👋 Hello, Santhiya! 👋 --- 🧩 Types of Functions: 1. Named Function function add(a, b) {  return a + b; } 2. Anonymous Function const multiply = function(a, b) {  return a * b; }; 3. Arrow Function const divide = (a, b) => a / b; --- ⚙ Why Functions Matter: ✅ Reusability ✅ Readability ✅ Easier debugging ✅ Cleaner, modular code --- 🔖 #JavaScript #WebDevelopment #FunctionsInJS #Frontend #CodingTips #JSConcepts #LearnToCode #100DaysOfCode #KishoreLearnsJS #DeveloperJourney #WebDevCommunity #CodeLearning

🗓️ Day 27 – JavaScript Scope 🎯 Topic: Understanding Scope in JavaScript In JavaScript, Scope means the area or environment where a variable or function is accessible or can be used. 🍀 Easy Explanation Think of scope like rooms in a house 🏠. A toy kept in your bedroom can only be played with there, not in the living room. Similarly, variables can only be used within the area (scope) they are defined in. 💡 Key Points to Remember 🔹 Global Scope: Variables declared outside any function or block are available everywhere. 🔹 Function Scope: Variables declared inside a function can only be used inside that function. 🔹 Block Scope: Variables declared with let or const inside {} are limited to that block only. 🔹 var is not block-scoped — it escapes from blocks but stays within a function. 🔹 Using let and const helps prevent scope-related bugs and keeps code cleaner. ✅ Summary 🌟 Scope defines where variables can be accessed or used. 🌟 var → function-scoped, while let and const → block-scoped. 🌟 Use let and const for better control and fewer errors. 🌟 Understanding scope avoids confusion when variables have the same name. 📌 Hashtags: #JavaScript #Scope #FrontendDevelopment #LearnJavaScript #Day27 #WebDevelopment

🚀 Day 89/90 – #90DaysOfJavaScript Topic covered: Array.findIndex() & Array Creation Methods in JavaScript ✅ findIndex() in JavaScript 👉 Returns index of first matching element 👉 Returns -1 if no match 👉 Stops when match found (efficient) 👉 find() returns value, findIndex() returns position 👉 Useful for searching, updating, removing array items ✅ Array Length & Sparse Arrays 👉 .length → total elements count 👉 Arrays can have empty slots (sparse arrays) 👉 Empty slot ≠ undefined (JS skips empty slots in many methods) ✅ Array Creation Methods (Important!) ✅ new Array(n) 👉 Creates empty slots 👉 Not directly iterable (map/forEach skip) ✅ Array.from({ length: n }) 👉 Creates undefined values 👉 Fully iterable ✅ new Array(n).fill(value) 👉 Fills array with a value 👉 Best for initializing with defaults 🎯 Key Takeaways 👉 Use findIndex() when you need the index 👉 new Array(n) → reserved space (empty slots) 👉 Array.from() → iterable slots 👉 .fill() → pre-populate values 🛠️ Access my GitHub repo for all code and explanations: 🔗 https://lnkd.in/dfNxZfyc Let’s learn together! Follow my journey to #MasterJavaScript in 90 days! 🔁 Like, 💬 comment, and 🔗 share if you're learning too. #JavaScript #WebDevelopment #CodingChallenge #Frontend #JavaScriptNotes #MasteringJavaScript #GitHub #LearnInPublic

🚀 JavaScript Core Concept: Hoisting Explained Ever wondered why you can call a variable before it’s declared in JavaScript? 🤔 That’s because of Hoisting — one of JavaScript’s most important (and often misunderstood) concepts. When your code runs, JavaScript moves all variable and function declarations to the top of their scope before execution. 👉 But here’s the catch: Variables (declared with var) are hoisted but initialized as undefined. Functions are fully hoisted, meaning you can call them even before their declaration in the code. 💡 Example: console.log(name); // undefined var name = "Ryan"; During compilation, the declaration var name; is moved to the top, but the assignment (= "Ryan") happens later — that’s why the output is undefined. 🧠 Key Takeaway: Hoisting helps JavaScript know about variables and functions before execution, but understanding how it works is crucial to avoid tricky bugs. #JavaScript #WebDevelopment #Frontend #ProgrammingConcepts #Learning #Hoisting #CodeTips

🚀 Day 30/50 – Function Currying in JavaScript Think of Function Currying like building a relationship. You don’t propose directly 😅 First comes the “Hi Hello 👋” phase → then friendship ☕ → and finally… the proposal ❤️ In JavaScript, instead of passing all arguments at once, Function Currying lets us pass them step by step, each step returning a new function until the final output is achieved. Here’s a simple code analogy from my video: function proposeTo(crush) { return function (timeSpent) { return function (gift) { return `Dear ${crush}, after ${timeSpent} of friendship, you accepted my ${gift}! 🥰`; }; }; } console.log(proposeTo("Sizuka")("3 months")("red rose 🌹")); Each function takes one argument and returns another function — making the code modular, flexible, and easy to reuse. 👉 This is Function Currying — one argument, one step, one perfect result. 🎥 Watch the full short video here: 🔗 https://lnkd.in/g-NkeYBc --- 💡 Takeaway: Function Currying isn’t just a JavaScript trick — it’s a powerful pattern for cleaner, more composable functions that enhance reusability and maintainability in modern frontend code. --- Would love to know: 👉 What’s your favorite JavaScript concept that clicked instantly when you saw it explained simply? #javascript #frontenddevelopment #webdevelopment #coding #programming #softwareengineering #learnjavascript #100daysofjavascript #techsharingan #developers #careergrowth

Today I explored how JavaScript executes inside the browser, and it was truly fascinating to understand the step-by-step process behind the scenes! 💡 Here’s what I learned 👇 🔹 The browser starts by loading the HTML and identifying any <script> tags. 🔹 Once found, the code is sent to the JavaScript Engine (like Chrome’s V8). 🔹 The engine performs three key steps — ✨ Parsing: Reads and converts code into an Abstract Syntax Tree (AST). ⚙️ Compilation (JIT): Translates JS into optimized machine code for faster execution. 🧩 Execution: Runs the code in the Call Stack, while variables and objects are managed in the Memory Heap. 🔹 For asynchronous operations (set Timeout, fetch, etc.), the Web APIs, Callback Queue, and Event Loop coordinate to ensure non-blocking execution. 💬 In short: HTML Parsing → JS Engine → Call Stack → Web APIs → Callback Queue → Event Loop → Execution Understanding this flow helps in writing efficient, optimized, and clean JavaScript code. Excited to continue learning and sharing my progress each day under the guidance of Sudheer Velpula Sir. 🙌 #JavaScript #WebDevelopment #Frontend #LearningJourney #Coding #SudheerSir

Are you writing clean, high-performance JavaScript? 🚀 Stop making these common mistakes! This guide is packed with essential JS best practices to instantly level up your code quality and speed: -> Ditch var 🚫: Always use let and const to declare variables to prevent scope and redefinition errors. -> Optimize Loops ⏱️: Boost performance by reducing activity inside loops, like calculating array length once outside the loop. -> Minimize DOM Access 🐌: Accessing the HTML DOM is slow. Grab elements once and store them in a local variable if you need to access them multiple times. -> Use defer ⚡: For external scripts, use the defer attribute in the script tag to ensure the script executes only after the page has finished parsing. -> Meaningful Names ✍️: Use descriptive names like userName instead of cryptic ones like un or usrnm for better long-term readability. -> Be Thoughtful about Declarations 💡: Avoid unnecessary declarations; only declare when strictly needed to promote proper code design. Swipe and save these tips for cleaner, faster JS code! Which practice are you implementing first? 👇 To learn more about JavaScript, follow JavaScript Mastery #JavaScript #JS #WebDevelopment #CodingTips #Performance #CleanCode #DeveloperLife #TechSkills