Mastering JavaScript's this Keyword

JavaScript 20Days Challenge 🚀 Consistency continues! Today marks Day 3 of my 20-day JavaScript learning challenge, where I focus on learning JavaScript concepts and building small projects daily. 🎨 Day 3 Project: Random Background Colour Generator Today I built a simple but interactive Random Background Colour Generator using JavaScript. When the user clicks the button, the page background changes to a randomly generated color and displays the HEX color code on the screen. 💡 Concepts I practiced today: • Generating random values using Math.random() • Converting numbers to HEX color codes • DOM manipulation with querySelector() • Updating UI dynamically with innerText • Handling button click events This small project helped me understand how JavaScript can dynamically change styles and create interactive UI experiences. 📅 Day 3/20 completed — learning, building, and improving every day. #JavaScript #WebDevelopment #FrontendDevelopment #CodingJourney #BuildProjects #JS #Github #MernStack

When I first started learning #JavaScript, I made a lot of mistakes. Not because JavaScript is hard — but because I was learning it the wrong way. If you’re starting your JavaScript journey, try to avoid🛑 these 3 common mistakes: 1️⃣. Jumping straight into frameworks** Many beginners start with #React, #Next.js, or other frameworks without understanding core JavaScript. Frameworks are built **on top of JavaScript**. If your basics are weak, everything will feel confusing. Start with fundamentals: Variables, Functions, Arrays, Objects, Closures, Promises, and the DOM. 2️⃣. Watching videos tutorials without mentorship ** Watching 10 hours of tutorials feels productive… but it’s not the same as practising Real learning happens when you: * write code * break things * debug errors * build small projects Code along. Then try building the same thing 3️⃣. Trying to memorize everything** You don’t need to remember every method or syntax. Great developers don’t memorize everything. They understand concepts and know **how to find answers**. Focus on understanding *why things work*, not just *how to write them*. If you avoid these three mistakes early, your JavaScript journey becomes much easier. What mistake did you make when learning JavaScript? #javascript #webdevelopment #coding #programming #frontend #learnjavascript

🚀 Day 4 of My JavaScript Learning Journey Today I learned about the building blocks of JavaScript code, which help the JavaScript engine understand and process programs. 📌 Key concepts I explored: • Tokens – The smallest units of code in the source text. • Keywords – Reserved words that have special meaning in JavaScript (like if, for, let, etc.). • Identifiers – User-defined names for variables, functions, or objects. • Literals – Fixed values written directly in the code (like "hello", 42, true). ⚙️ During the parsing phase, the JavaScript engine reads the source code and converts it into a sequence of tokens. These tokens help build the structure of the program and allow the engine to execute it correctly. Step by step, I’m strengthening my understanding of JavaScript fundamentals and how code is processed internally. 💻✨ #JavaScript #WebDevelopment #FrontendDevelopment #CodingJourney #LearningInPublic #DeveloperJourney #ProgrammingBasics

🚀 Understanding Callback Hell & Promises in JavaScript While learning JavaScript, I explored one of the most confusing concepts for beginners — Callback Hell. 📌 Callback Hell happens when multiple asynchronous operations are nested inside each other, making the code: Hard to read Hard to debug Hard to maintain Example: Js Copy code getData(function(a){ getMoreData(a, function(b){ getEvenMoreData(b, function(c){ console.log(c); }); }); }); This pyramid structure is called the “Pyramid of Doom” 😅 ✅ Then I learned about Promises — a cleaner way to handle asynchronous operations. Js Copy code getData() .then(a => getMoreData(a)) .then(b => getEvenMoreData(b)) .then(c => console.log(c)) .catch(err => console.log(err)); ✨ Promises make code: More readable More structured Easier to handle errors Step by step improving my JavaScript fundamentals 💻🔥 #JavaScript #WebDevelopment #LearningInPublic #CodingJourney Vikas Kumar Pratyush Mishra Prakash Sakari Likitha S

JavaScript is indeed a very wierd language. Maybe because it was developed in just 10 days to add dynamic behaviour to otherwise static HTML pages. The deeper you dive into JavaScript, the wierder it becomes. 1. Higher Order Functions -> Functions can be passed as arguments and returned from other functions. 2. Closures -> The inner function still remembers its neighbouring variables even after the outer function completes execution. 3. Callbacks -> A function can be passed as an argument to another function, to be executed later (usually after some async operation completes). 4. Callback Hell -> If multiple such callbacks are nested together, you are stuck in this 'Pyramid of Doom' 5. Promises -> An object which represents the current state of an asynchronous operation that can be returned from async functions to avoid the callback hell while chaining sequential async steps. 6. async / await -> More elegant way to make asynchronous code look and feel synchronous, but still make it non-blocking. And honestly we have not even started OOPS in JavaScript. The so called 'Prototypal Inheritance' and the binding of 'this' keyword which is the most confusing part of JS makes this language very difficult to master. But the good news is that you dont have to study everything. Instead you have to study just enough concepts to get the work done. For front end frameworks like React and Vue.js just the functional programming concepts mentioned earlier is sufficient. Take a look at this video where Keerti Purswani from Educosys explains these concepts in the most simplest of ways. It really helped me set my basics right. https://lnkd.in/gJWgMQf2 Here is the link to my GitHub repo where you can find code which I did while following the tutorial. https://lnkd.in/gzSacyg5 #ReactJS #VueJS #Angular #NextJS #JavaScript #JS

Today I explored some important JavaScript and React concepts that help in writing better and more predictable code. ** Scope System in JavaScript I learned how variables are accessed in different scopes and how JavaScript manages them. • Lexical Scope – A function can access variables from its parent scope. • Variable Shadowing – When a variable inside a function has the same name as a variable outside it. • Block Scope – Variables declared with let and const are limited to the block where they are defined. ** Updating State in React I also learned the difference between primitive values and reference values when working with useState. • Primitive values (number, string, boolean) can be updated directly. • Objects and Arrays should be updated by creating a new copy instead of modifying the original state. Example: setUser({ ...user, age: 22 }); Understanding how scope, state updates, and data structures work makes React applications more reliable and easier to maintain. Every day of learning is helping me become more confident in building modern web applications. Looking forward to learning more and building exciting projects! @Sheryians Coding School @Sarthak Sharma @Ritik Rajput @Daneshwar Verma @Devendra Dhote #ReactJS #JavaScript #FullStackDeveloper #WebDevelopment #CodingJourney #LearnInPublic

My JavaScript Learning Journey Focused on one of the most powerful parts of JavaScript: Functions & Array Methods Here’s what I learned : ✅ Function Fundamentals Understanding parameters, arguments, and how functions help create reusable code. ✅ Arrow Functions (ES6) A cleaner and modern way to write functions in JavaScript. ✅ Methods vs Functions Learning how methods are tied to objects like arrays and strings. ✅ Higher-Order Functions Functions that can take other functions as arguments or return them. ✅ Essential Array Methods • map() → Transform data • filter() → Select specific elements • reduce() → Convert an array into a single value These methods are widely used in modern JavaScript and React development, and mastering them makes code cleaner and more efficient. Consistency > Perfection. If you're also learning JavaScript, let's connect and grow together! 🚀 #JavaScript #WebDevelopment #CodingJourney #LearningInPublic #FullStackDeveloper #100DaysOfCode

🚀 Day 13 of My JavaScript Learning Journey Today I learned how to create a sleep function in JavaScript ⏳ JavaScript doesn’t have a built-in sleep() like some other languages, but we can create one using Promises and setTimeout(). ✨ What I learned today: ✅ How setTimeout() works ✅ Creating delay using Promises ✅ Using async/await for cleaner async code ✅ Controlling execution timing in JavaScript Understanding timing control is very important in real-world applications ⚡ #Day13 #JavaScript #AsyncAwait #Promises #WebDevelopment #CodingJourney #LearningInPublic #coddy

Today’s Learning – JavaScript Array Methods Today I learned about Array Methods in JavaScript. Arrays are very powerful because they allow us to store multiple values in a single variable, and array methods help us work with that data easily. Some methods I practiced today: push() – adds a new element at the end of an array pop() – removes the last element from an array shift() – removes the first element unshift() – adds a new element at the beginning map() – creates a new array by transforming elements filter() – creates a new array with elements that match a condition forEach() – loops through each element in the array Learning these methods helps me write cleaner and shorter code in JavaScript. I am currently improving my JavaScript fundamentals step by step as part of my Frontend Developer learning journey. #JavaScript #WebDevelopment #FrontendDevelopment #CodingJourney

Another Day of My JavaScript Mastering Learning Journey DEY WITH ME!!! Today I explored one of the most important concepts in JavaScript: Prototypes. In JavaScript, objects can share properties and methods through something called a prototype. Instead of every object having its own copy of a method, JavaScript stores shared methods on the prototype so multiple objects can reuse them. For example, if we create a constructor like Person, we can add methods to Person.prototype. Every object created from Person will automatically have access to those methods. This approach helps save memory and keep code more efficient, because the methods are shared rather than duplicated for every object. Example idea: Create a constructor (like Person) Add methods to Person.prototype Every instance can use those methods Understanding prototypes helped me see how JavaScript handles inheritance and object behavior under the hood. Small steps like this are helping me build a stronger foundation as I continue learning JavaScript and backend development. #JavaScript #WebDevelopment #CodingJourney #LearningInPublic