JavaScript Quick Reference Guide: Fundamentals to Advanced Concepts

Most JavaScript developers use functions every day… But very few truly understand what happens before their code runs. Let’s talk about Execution Context. Every time JavaScript runs your code, it creates something called an execution context. There are two main types: 1️⃣ Global Execution Context 2️⃣ Function Execution Context When your file starts running, JavaScript creates the Global Execution Context. Example: var name = "Sadiq"; function greet() { var message = "Hello"; console.log(message + " " + name); } greet(); Before this code executes: Memory is created. Variables are stored (initially as undefined if declared with var). Functions are fully stored in memory. Then execution begins line by line. When greet() is called, a new Function Execution Context is created. That’s why variables inside a function don’t interfere with global ones. Execution Context explains: Why hoisting happens Why scope works the way it does Why some variables are accessible and others aren’t Understanding this changed how I read JavaScript code. Instead of asking: “What is this line doing?” I now ask: “What context is this running in?” Big difference. Are you writing JavaScript… or do you understand how JavaScript is running your code? 👇 What JavaScript concept confused you the most when you started? #JavaScript #FrontendDevelopment #WebDevelopment #SoftwareEngineering #BuildInPublic

𝗛𝗼𝘄 𝗛𝗼𝗶𝘀𝘁𝗶𝗻𝗴 𝗪𝗼𝗿𝗸𝘀 𝗜𝗻𝘁𝗲𝗿𝗻𝗮𝗹𝗹𝘆 You want to know how hoisting works in JavaScript. Hoisting is when JavaScript moves declarations to the top of their scope. This happens before the code is executed. JavaScript runs in two phases: - Memory Creation Phase: JavaScript parses the code and allocates memory for variables and functions. - Execution Phase: The code runs line by line. There are different types of hoisting in JavaScript: - var hoisting: Variables declared with var are fully hoisted. - let and const hoisting: Variables declared with let and const are hoisted but not initialized. - Function declaration hoisting: Function declarations are fully hoisted. - Function expression hoisting: Function expressions are not fully hoisted. When you run your code, JavaScript creates an execution context. This context has two main things: - Memory: Where variables and functions are stored. - Code: Where the code is executed line by line. Source: https://lnkd.in/d9Zen2Dc

Why does 0 == false return true in JavaScript? 😵 If this confuses you, you're not alone. I wrote a guide explaining == vs === and how to avoid common pitfalls that trip up even experienced developers. Link below 👇 https://lnkd.in/dGP2aJZr #JavaScript #CodingTips #WebDev

Big news for JavaScript developers: the Explicit Resource Management proposal is making it much easier to clean up resources in your code. At its core, this effort introduces a standardized cleanup pattern and a new using keyword that lets you tie disposal logic directly to a variable’s scope; meaning things like sockets, streams, and generators can be reliably cleaned up when they’re no longer needed. This brings greater predictability to resource management and reduces the risk of leaks or dangling connections. The proposal has already reached Stage 3 of the standards process and is implemented in most major browsers (except Safari), giving you a chance to experiment with it now. Key takeaways for dev teams: 🔹 Common cleanup methods like .close(), .abort(), etc., get a consistent pattern via [Symbol.dispose] 🔹 The using declaration ensures automatic cleanup at the end of a scope 🔹 Helps write safer, more maintainable code with fewer manual resource errors If you care about robustness and clarity in your JavaScript projects, this change is worth exploring. #JavaScript #WebDevelopment #CleanCode #ECMAScript #Programming #SoftwareEngineering

Ever wondered what actually happens behind the scenes when JavaScript runs your code? 🤔 How Variables & Functions Work Behind the Scenes in JavaScript Today I focused on understanding what actually happens inside the JavaScript engine when we write variables and functions — and it completely changed how I read JS code. 🧠 Step 1: JavaScript Creates an Execution Context Before executing any code, JavaScript creates an Execution Context. This happens in two phases: 1. Creation Phase (Memory Allocation Phase) In this phase, JavaScript scans the entire code before running it and prepares memory. ✔ Variables var variables are allocated memory and initialized with undefined let and const are also allocated memory, but they stay in the Temporal Dead Zone (TDZ) until initialized ✔ Functions Function declarations are stored fully in memory (function body included) Function expressions & arrow functions behave like variables and depend on var / let / const 👉 This is the real reason hoisting exists. 2.Execution Phase (Code Runs Line by Line) Now JavaScript starts executing the code: Variables get their actual values Functions are executed when they are called A new Function Execution Context is created for every function call Each context is pushed to the Call Stack After execution, it is removed from the stack Why Functions Can Be Called Before Declaration? because function declarations are fully hoisted during the creation phase. 💡 Key Takeaways JavaScript doesn’t execute code directly — it prepares first Hoisting is a byproduct of the creation phase var, let, and const differ because of how memory is allocated Understanding execution context makes debugging much easier. Mastering the basics is what truly levels up a developer. Thanks to Anshu Pandey and Sheryians Coding School #JavaScript #JavaScriptbasics #ES6 #JSEngine #coding

Day 5 of my JavaScript journey Today I went behind the scenes of JavaScript to understand how it works, and here is what I found; When you write JavaScript, it feels simple. You declare variables. You call functions. You await promises. The browser responds. Things move on the screen. But under the surface, there’s an entire engine working relentlessly to make that happen. JavaScript is a high-level language. This simply means you don't have to worry about managing your computer's memory or CPU manually. JavaScript quietly handles all of that for you in the background. That's one less thing to stress about as a beginner. It is also multi-paradigm. A paradigm is just a mindset or approach to writing code. And JavaScript doesn't force you into one way of thinking, you can structure your code in multiple ways depending on what the situation calls for. That flexibility is honestly one of the biggest reasons JavaScript is so popular. And then there's the concurrency model, how JavaScript handles multiple tasks at the same time even though it can only do one thing at a time. This is because, the "Event Loop" constantly checks: is the call stack empty? if yes, move the next task from the queue to the stack #JavaScriptJourney #LearningToCode

JavaScript's New Explicit Resource Management Proposal The article explains a new JavaScript proposal that introduces standardized ways to clean up resources and manage memory, making it easier for developers to ensure their code properly disposes of objects when they're no longer needed. - Implicit resource management already exists through WeakSet and WeakMap, which hold "weak" references that don't prevent garbage collection - Explicit resource management introduces a standardized `[Symbol.dispose]()` method to replace inconsistent cleanup methods like `close()`, `abort()`, and `disconnect()` - The `using` keyword is a new variable declaration (first since 2015) that automatically calls `[Symbol.dispose]()` when a variable goes out of scope - Variables declared with `using` are block-scoped like `const` and cannot be reassigned - The proposal has reached stage three of the standards process and is already implemented in most major browsers except Safari - Developers can create custom disposers in their classes to define cleanup behavior when instances go out of scope This proposal provides a predictable, declarative approach to resource cleanup that reduces the risk of leaving connections open or resources locked, preventing memory leaks and ensuring JavaScript applications clean up after themselves automatically. https://lnkd.in/gY_25GYt #javascript #frontend #cleanup #garbagecollection #resourcemanagement

The tale of two dots: Mastering the difference between Spread vs. Rest in JavaScript. 🧐 If you are learning modern JavaScript, the three dots syntax (...) can be incredibly confusing. Depending on where you place them, they either act as the Spread operator or the Rest operator. They look identical, but they do complete opposite jobs. Here is the simplest way to differentiate them. ✅ 1. The Spread Operator (The "Unpacker") Think of Spread as opening a suitcase and dumping everything out onto the bed. It takes an iterable (like an array or an object) and expands it into individual elements. Common Use Cases: Copying arrays/objects (shallow copies). Merging arrays/objects together. Passing elements of an array as separate arguments into a function. ✅ 2. The Rest Operator (The "Gatherer") Think of Rest as taking leftovers on a table and putting them all into one Tupperware container. It does the opposite of spread. It collects multiple separate elements and condenses them into a single array or object. Common Use Cases: Handling variable numbers of function arguments. Destructuring arrays or objects to grab "the rest" of the items. 💡 The Golden Rule to Tell Them Apart It’s all about context. Look at where the dots are used: If it’s used in a function call or on the right side of an equals sign, it’s usually Spread (it's expanding data). If it’s used in a function definition or on the left side of an equals sign (destructuring), it’s usually Rest (it's gathering data). Which one do you find yourself using more often in your daily work? #JavaScript #WebDevelopment #CodingTips #SoftwareEngineering #Frontend

JavaScript’s "this" confused me for a long time. And honestly? I know I’m not the only one. So I took the time to deeply understand how bind() actually works and turned it into a simple, practical guide. Check it out and let me know what you think! 👇🏻

Day 6: I learned how JavaScript actually runs code, and it makes lot of sense At first, it was a little confusing, but I’ve come to understand the main concepts and how they work. First thing I learned: Execution Context Every JavaScript program runs inside an execution context. It’s a dedicated workspace where your code is executed. Within that space, JavaScript keeps track of the variables that are defined, what other scopes are accessible, and what "this" refers to at that particular moment. I can also say, execution context is a box where your code gets set up and executed. Every time JavaScript runs code, it creates one. Inside that box, three things exist: - Variable Environment: where all your variables and functions are stored - Scope Chain: determines which variables your code has access to - The "this" keyword: tells your code what object it's currently working with Then there's the Call Stack The call stack is simply JavaScript's way of keeping track of where it is in our code. Every time a function is called, it gets placed on top of the stack. When it finishes, it gets removed. We can get a good illustration of this using stack of plates, the item added most recently is the one removed first. And finally: the Callback Queue When you click a button, it doesn’t run the code right away. Instead, it puts a function in a waiting line called the callback queue. Once the main code (the call stack) is done, the function gets picked up and runs In plain terms; - Code runs in a workspace called the execution context. - JavaScript keeps track of what’s running next using a call stack. - Functions triggered by events wait in line in the callback queue. #JavaScriptJourney #LearningToCode