JavaScript Basics & Variables Explained

Day-89 📘 Python Full Stack Journey – JavaScript DOM Manipulation Today I learned how to dynamically create and manage HTML elements using JavaScript — a big step toward building truly interactive web applications. 🎯 What I learned today: 🔹 addEventListener() — attaching events in a clean and scalable way 🔹 createElement() — creating new HTML elements using JavaScript 🔹 createTextNode() — adding text content dynamically 🔹 appendChild() — inserting elements into the DOM 🔹 setAttribute() — setting or updating element attributes programmatically These concepts showed me how JavaScript can control and update the DOM on the fly, without writing static HTML. Really exciting to see pages being built dynamically through code! 🚀 #JavaScript #PythonFullStack #WebDevelopment #Frontend #DOM #CodingJourney #LearningToCode #Upskilling #TechSkills #ContinuousLearning

Day-86 📘 Python Full Stack Journey – JavaScript Events & Dynamic Styling Today I learned how JavaScript events make web pages interactive by responding to user actions in real time. 🔁🖱️ 🎯 What I learned today: ⚡ JavaScript Events onclick — triggers a function when an element is clicked ondblclick — triggers on double-click onmouseover — triggers when the mouse moves over an element Example: onclick="fun()" 🎨 Dynamic Styling with JavaScript Changing styles directly using JavaScript: element.style.color = 'red' element.style.background = 'blue' This helped me understand how JavaScript can instantly modify the UI based on user interactions — a key concept for building responsive and interactive web applications. Really enjoying how JavaScript brings life to static HTML pages! 🚀 #JavaScript #PythonFullStack #WebDevelopment #Frontend #DOM #Events #UIUX #CodingJourney #LearningToCode #Upskilling #ContinuousLearning

Frontend Learning – JavaScript 🧠🧠 This week, I’m transitioning from structure and styling into behavior. I’ve started learning JavaScript, focusing on: • Variables and data types • Functions • Control structures (conditions and loops) What I’m realizing: HTML gives structure. CSS gives style. JavaScript gives life. It’s interesting to see how small scripts can completely change how a page behaves. Frontend is starting to feel more interactive and dynamic. #FrontendDevelopment #JavaScript #LearningJourney #LearningInPublic #WebDevelopment

😄 JavaScript really said: “So… you thought you understood +?” Let’s clear the confusion properly — no vibes, just fundamentals 👇 🔹 Case 1: Number + Number 2 + 2 // 4 ✅ Simple math. No drama. 🔹 Case 2: Number + String 2 + "2" // "22" ⚠️ + becomes concatenation JS says: “Oh, you want strings? Say less.” 🔹 Case 3: String + String "2" + "2" // "22" 🧩 Pure concatenation. Expected. 🔹 Case 4: Minus operator (-) "22" - 2 // 20 💡 - forces numeric conversion If conversion fails → NaN (not magic, just math rules). 🧠 The real lesson + can add OR concatenate -, *, / only work with numbers JavaScript always tries type coercion Types matter more than intentions 😅 ❌ JavaScript isn’t confusing ❌ Logic isn’t broken ✅ Skipping the basics is. Memes make it funny. Fundamentals make it predictable. 😉 #JavaScript #WebDevelopment #Programming #TypeCoercion #JSBasics #LearnInPublic #Developers #Frontend #JavaScript #Notes #JavaScript #Developer #JavaScript #Mastery #JavaScript #umarhasnain

🚀 Day 30 of Learning in Public: JavaScript Edition 💻✨ 🌟 Just leveled up my JavaScript skills — dived deep into ES6 Classes & Object-Oriented Programming! 🚀 Classes in JS make code feel more structured, readable and reusable — almost like proper OOP languages, but with JavaScript's unique flavor. Here are the key things I learned & experimented with today: ✅ How to define a class ✅ Creating instances (objects) ✅ Constructor for initialization ✅ Instance variables vs static variables ✅ Getter / setter style methods ✅ Private fields using # (true privacy is still kind of an illusion in JS, but it's getting better!) ✅ Static methods & properties → No constructor overloading (only one constructor allowed) → No protected access modifier — it's either public or private (#) Quick example I played with: ```js class Employee {  // Instance fields (public by default)  firstName;  lastName;  // Static field  static middleName = "Kumar";  constructor(firstName, lastName) {   this.firstName = firstName;   this.lastName = lastName;  }  // Instance methods  setFirstName(firstName) {   this.firstName = firstName;  }  getFirstName() {   return this.firstName;  }  generateFullName() {   const fullName = `${this.firstName} ${this.lastName}`; // fixed typo & used let/const   return fullName;  }  // Static method  static printSalary() {   return "This is a static method — no instance needed!";  } } const e1 = new Employee("Piyush", "Saxena"); const e2 = new Employee("Amit", "Sharma"); console.log(e1.generateFullName());     // Piyush Saxena console.log(Employee.printSalary());     // This is a static method... console.log(Employee.middleName);       // Kumar #JavaScript #WebDevelopment #SoftwareTesting #LearningJourney #ClassInJS #OOPs #ConstructorInJS

💡 7 JavaScript Tricks I Wish I Knew Earlier....? JavaScript tricks that can save you hours of coding 👇 1️⃣ Convert string → number "const num = +"42"" Cleaner than "Number()" and super quick. --- 2️⃣ Remove duplicates from an array "const unique = [...new Set([1,2,2,3])]" No loops. No libraries. --- 3️⃣ Swap variables instantly "[a, b] = [b, a]" No temporary variable needed. --- 4️⃣ Convert any value to boolean "const isTrue = !!value" A simple trick used everywhere in JS codebases. --- 5️⃣ Flatten arrays "const flat = [1,[2,3]].flat()" Nested arrays? Not a problem anymore. --- 6️⃣ Optional chaining (no more undefined errors) "user?.profile?.name" Your app won't crash if something is missing. --- 7️⃣ Default values using ?? "const name = userName ?? "Guest"" Only uses "Guest" if the value is null or undefined. --- 💬 Be honest… How many did you already know? 1️⃣ – Just started learning 3️⃣ – Pretty comfortable with JavaScript 5️⃣ – Advanced developer 7️⃣ – JavaScript ninja 🥷 Comment your number 👇 ♻️ Save this post so you don’t forget these tricks. Follow for more JavaScript tips every week 🚀 #javascript #webdevelopment #frontend #coding #programming #softwaredevelopment

Just published a new blog on Array Methods in JavaScript. In this article, I explained: • push() and pop() • shift() and unshift() • map() • filter() • reduce() (simple explanation) • forEach() If you're learning JavaScript, mastering these methods will immediately improve your code quality and readability 👇 https://lnkd.in/gsd7cyU4 Hitesh Choudhary Chai Aur Code Piyush Garg Akash Kadlag Jay Kadlag #JavaScript #WebDevelopment #FrontendDevelopment #LearnInPublic #CodingJourney #100DaysOfCode #WebDev #Programming

While learning JavaScript, I discovered something interesting about arrays. At first, I always thought arrays were simple lists where values are stored using indexes like 0, 1, 2, and so on. But when I started learning about objects in JavaScript, I realized that arrays are actually a special type of object. So I decided to try a small experiment. I created an array and then added some custom properties to it like this: array["nothing"] = 56 array[-1] = "Yup!" At first I thought this might either give an error or increase the length of the array. But something surprising happened. JavaScript allowed these values to be stored in the array, but the array length did not change at all. The reason is that the length property only counts numeric indexes like 0, 1, 2, 3, etc. When we add properties like "nothing" or -1, JavaScript treats them as normal object properties instead of array elements. This small experiment helped me understand that JavaScript arrays are actually objects internally. Try to guess the output before sliding to the next image. #JavaScript #WebDevelopment #CodingJourney #FrontendDevelopment

Understanding Set in JavaScript Recently, I revisited Set in JavaScript, and it’s one of those small features that can greatly improve performance and code clarity. - What is a Set? A Set is a special JavaScript object that stores unique values only — duplicates are automatically removed. const mySet = new Set(); mySet.add(1); mySet.add(2); mySet.add(2); // duplicate ignored mySet.add(3); console.log(mySet); // Set(3) {1, 2, 3} - Ways to create a Set From scratch → new Set() From an array → perfect for removing duplicates const arr = [1, 2, 2, 3, 4, 4]; const uniqueValues = new Set(arr); - Useful Set Methods add() → Add value has() → Check if value exists (returns true/false) delete() → Remove value clear() → Remove all values size → Get total count const fruits = new Set(["apple", "banana", "mango"]); fruits.has("banana"); // true fruits.delete("banana"); console.log(fruits.size); // 2 - Why use Set? Stores unique values Easily removes duplicates Faster lookup performance Cleaner logic compared to arrays - Performance matters: Set.has() → O(1) Array.includes() → O(n) Small concepts like this can make a big difference when handling large datasets in real-world applications. - To know more, please visit w3schools.com and MDN 😊 #JavaScript #WebDevelopment #FrontendDevelopment #NodeJS #ReactJS #Programming #SoftwareDevelopment #LearningInPublic

🚀 New Medium Post: JavaScript Basics Every Developer Uses Covered 5 core JavaScript concepts every developer uses daily — from variables and functions to arrays, objects, and loops. Simple explanations. Practical examples. Beginner-friendly. 👉 Read here: https://lnkd.in/g764aXvy #JavaScript #WebDevelopment #Coding #Developers #Learning