DEV Community: Muhammad Abbas

JavaScript Hoisting Demystified: Elevate Your Coding Skills!

Muhammad Abbas — Wed, 07 Aug 2024 18:20:23 +0000

Hey there 👋 Let's talk about a JavaScript concept that might surprise you - Hoisting! 🤯

Hoisting is all about how JavaScript handles variables and function declarations during the compilation phase.Basically, it moves them to the top of their scope, even before the code is executed. Wait, What!
So, what does that mean in practice?
Well, let's say you have this code:

   `console.log(myVar);
   var myVar = "Hello, world!";
   // It outputs: `undefined`

Even though you're trying to log myVar before it's declared, the code still runs without any errors. That's because during the memory creation phase, myVar is assigned a default value of undefined. (You can refer to my last post where I wrote about how JavaScript works.)

Let's take another example:
myFun(); function myFun() { console.log("I am FuN"); }

In this case, the whole function will store in memory. If you console it ( console.log(myFun) ), you will see the whole function will print out or run, and it will output I am FuN.

Pretty cool, right? Hoisting can have some interesting implications for your code, so it's important to understand how it works. 🤓 Let me know if you have any other JavaScript concepts you'd like to chat about!

And last what about arrow functions? 🤔🤔🤔

Its also treated like variable, store whole function in it. When you will try to call like myFun() before declaration you will experience error.

Here is an example:

    `console.log("Before declaration myArrowFun: ", myArrowFun)
    var myArrowFun = () => { console.log("I am Arrow FuN"); }
    console.log("After declaration myArrowFun: ", myArrowFun)
    console.log("Call declaration myArrowFun: ", myArrowFun())`

JavaScript Under the Hood: Embracing Its Single-Threaded Strengths

Muhammad Abbas — Tue, 30 Jul 2024 19:23:35 +0000

Ever wondered how JavaScript, one of the most popular programming language, works under the hood? 🤔

JavaScript is single-threaded, meaning it executes one task at a time (think of it like a stack), line by line. 🕰️ But don't worry, this is actually a strength! Because it avoids the complexity of managing multiple threads, it reduces the risk of bugs like race conditions and deadlocks.

JavaScript has two main phases of execution: the memory creation phase and the code execution phase.

Memory Creation Phase: Before running your code, JavaScript first scans it to set up memory for variables and functions. This is called "hoisting," where declarations are moved to the top of their scope.
Note: If you want to see this, simply create a .js file with some lines of code where you declare variables and functions. Then, open the developer console and move to application (code section) put a debugger at the beginning of your script. Then re-run the code, go in scope tab you'll see how JavaScript sets up memory for these declarations before executing the code.

Code Execution Phase: Once memory is set up, JavaScript executes the code line by line. Functions and variables are assigned their values, and the code runs.

Despite being single-threaded, JavaScript handles multiple tasks at once using an event loop. This loop manages asynchronous tasks like network requests or timers, ensuring the main thread remains free to keep your web app responsive and smooth. 🚀

Next time you code in JavaScript, remember its single-threaded nature is a powerful feature. Embrace it to create amazing user experiences! 💻✨

javascript #programming #webdev #js #frontend