DEV Community: Shreya Joshi

Every Wonder What is Hoisting? let's understand JavaScript's Built-in Behaviour

Shreya Joshi — Sat, 11 May 2024 13:59:14 +0000

Ever wonder what's the deal with hoisting in JavaScript? 🤯 Don't fret! This article is here to help you get a good grasp of the two terms.

So relax, grab your favorite cup of coffee ☕️, and let’s get started with Hoisting.

Prerequisite: Execution Context

Before we dive into the fascinating world of hoisting, let's first understand the basics of execution context in JavaScript.

With every code execution, JavaScript creates an execution context. As part of this process, JavaScript creates a virtual object for each variable and initializes them with a value of undefined. This ensures that even before code execution begins, variables have a designated space in memory. So, if we attempt to access a variable before it's initialized, it will return undefined.

What is Hosting?

In the MDN document it shows like this.

JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables, classes, or imports to the top of their scope, prior to execution of the code.

In JavaScript, hoisting refers to the built-in behavior of the language through which declarations of functions, variables, and classes are moved to the top of their scope – all before code execution. In turn, this allows us to use functions, variables, and classes before they are declared.

yup i know definition wont help much, Let's unpack this with some examples.

Let consider the following -

In the above example everything seems to work as expected. This is a normal function code and output is also we get is obvious this is how code has to work but lets consider the below example.

Here, we're calling variables and functions before they're even initialized. Surprisingly, JavaScript doesn't throw an error as many other programming languages would. Instead, it treats this behaviour as perfectly normal -
this is hoisting in action!

Now let us see how it works separately for variable and function.

Hoisting in Variable

VAR

Consider this example:

Surprisingly, this outputs undefined instead of causing chaos. How? Well, during compilation, JavaScript sets aside memory for name and assigns it the value undefined until it's properly initialized. It's like reserving a seat at the table before the guest arrives! 🪑

When JavaScript code is executed, it goes through a process known as the execution phase. During this phase, JavaScript creates what's called an execution context for each code execution. Think of it as setting the stage for the code to run smoothly.

As part of setting up this execution context, JavaScript allocates memory for variables but doesn't assign them any values yet. Instead, it initializes them with a special value called undefined. This essentially reserves a spot in memory for each variable, marking it as empty or uninitialized.

Now, if we attempt to access or reference a variable before it's been assigned a value during this initialization phase, JavaScript returns the default value for uninitialized variables, which is undefined. This behavior ensures that the code doesn't crash or throw errors when trying to access variables that haven't been explicitly defined yet.

So, in the context of hoisting, when we access a variable before it's been initialized, JavaScript doesn't throw an error. Instead, it returns undefined, indicating that the variable exists but hasn't been assigned a value yet. This behaviour is fundamental to how JavaScript handles variable declarations and hoisting.

Let and Const

Like Var let and const are also hoisted but there is some difference, consider the following example

In the above code the output is Reference:…”
but why var give undefined and let and const give reference error.

Unlike var, they throw a reference error when accessed before declaration. This is due to the concept of the Temporal Dead Zone (TDZ)

Temporal dead zone (TDZ)

Ever heard of it? Well, it's a bit of a mouthful, but don't worry, we'll break it down.

When we declare a variable using let, const, or class, JavaScript creates what's called a "temporal dead zone" (TDZ) for that variable. Now, this TDZ is like a waiting room – it's where the variable sits before it gets its value.

During the TDZ period, which starts as soon as the block containing the variable begins and ends when the variable is declared and initialized, the variable exists, but it hasn't been given a value yet. So, if you try to access it during this time, JavaScript gets a bit cranky and throws a [ReferenceError].

But here's the interesting part: once JavaScript reaches the declaration of the variable and gives it a value, the TDZ ends, and the variable becomes accessible. If no initial value was specified during the declaration, JavaScript initializes the variable with a value of undefined.

Now, compare this to var variables. With var, if you try to access a variable before it's declared, JavaScript doesn't throw an error – it just returns undefined. This is because var variables are hoisted to the top of their scope, giving them a head start in the code execution process.

So, why "temporal" dead zone? Well, it's because this zone depends on the order of execution, not the order in which the code is written. Take this example: even though a function using a let variable appears before the variable is declared, it's called outside the TDZ, so everything works smoothly.

Hoisting in Functions

Ever tried calling a function before it's even declared? Well, in JavaScript, you can do just that! Unlike variables, functions don't throw an error when you try to use them before declaring them. Instead, they give you the whole function. Interesting, right?

Now, let's dive into how hoisting works with functions.

Consider this scenario:

Here, we get the output as the whole function. Ever wonder why? It's because when JavaScript runs this code, we know that function is added in the memory component as whole in the execution context and when we call this function with out initilizing it give whole function and output..

So, even if you call the function before declaring it, JavaScript already knows about it and happily executes it without any complaints.

But wait, there's a twist! When you use a function expression or an arrow function, things work a bit differently. In these cases, JavaScript treats the function as a variable. So, before the function is declared, JavaScript stores undefined for it in memory. When you call the function without initializing it, it returns undefined

Function Declaration and arrow function:

In the above example, we get different outputs for function expression and function declaration or arrow function. Why? Because when you use function expression or arrow functions, JavaScript considers them as variables. So, before the function is initialized, JavaScript stores undefined for it in memory. When you call the function without initializing it, it returns undefined.

So, next time you wonder why functions behave differently than variables when it comes to hoisting, remember this little quirk!

Wrap Up

In summary, hoisting is JavaScript's behind-the-scenes magic that rearranges declarations, allowing us to use them before they're officially declared. Understanding this behavior is crucial for writing more efficient and effective JavaScript code.

So, the next time you encounter hoisting in your code, you'll know exactly what's happening behind the scenes!

Thanks for Reading! 😃

Connect with Me! 🙋🏻‍♀️
My Website - https://shreyajoshi.tech/
Instagram - https://www.instagram.com/codebyshreya/
LinkedIn - https://www.linkedin.com/in/codebyshreya/
Linktree - https://linktr.ee/codebyshreya

Happy Coding! 🎉

Behind the Scenes: JavaScript Code Execution

Shreya Joshi — Wed, 17 Apr 2024 07:44:56 +0000

Ever found yourself in a late-night coding session, staring at your JavaScript code and wondering,"What is going on here?" 🤷🏻‍♀️

Well, buckle up because we're about to take a ride through the execution context of JavaScript. Maybe not as exciting as binge-watching your favourite series, but trust me, it's important stuff 🤨! You might not know it, but there's a whole lot happening behind the scenes when you write a simple script.🤯

Let's break down what an execution context is and why it’s important to know how it works in JavaScript.

Execution Context: What is it?

All JavaScript code needs an environment to run in, and typically that environment is a web browser. The browser’s JavaScript engine sets up a special environment to manage your code, known as an Execution Context.
It's where all the action happens, as your code gets parsed, interpreted, and executed.

There are two types of execution contexts in JavaScript:

Global Execution Context (GEC)
Function Execution Context (FEC)

Global Execution Context (GEC)

When a JavaScript file is loaded, the engine first creates a default Execution Context called the Global Execution Context (GEC). It's the top-level environment where global variables and functions live.

Note: there can only be one per JavaScript file.

Function Execution Context (FEC)

Every time you call a function, the JavaScript engine creates a Function Execution Context (FEC). This FEC lives inside the GEC, and it runs the function's code.

Note: Since each function call creates its own FEC, you might end up with multiple FECs at runtime.

Call Stack: The Execution Organizer

The Call Stack, also known as the Execution Stack, plays a key role in JavaScript's execution model. It keeps track of all the Execution Contexts created during the life cycle of a script.

It follows a Last In, First Out (LIFO) structure, meaning the most recently called function is executed first and removed from the stack when it finishes.

This stack-based execution model allows JavaScript to manage function calls, returns, and the flow of control within a script.

Creation of Execution Contexts

Now, let's talk about how these execution contexts (GEC or FEC) are created.
It happens in two phases:

Creation Phase
Execution Phase

1️⃣ Creation Phase (Memory Phase)

In this phase, variables and functions are declared in memory but not yet initialized. The Execution Context Object holds important data for the code in the Execution Context during its run-time.

The creation phase includes 3 stages:

Creation of the Variable Object (VO)
Creation of the Scope Chain
Setting the value of the this keyword

Creation Phase: Creation of the Variable Object (VO)

The Variable Object (VO) is an object-like container created within an Execution Context. It stores the variables and function declarations defined within that Execution Context in the Memory Component as shown below in the diagram

Variables declared with var are set to 'undefined' in the VO.
Function declarations are added to the VO and stored in memory, making them accessible even before the code starts running.

This process of storing variables and function declaration in memory prior to the execution of the code is known as Hoisting.

Creation Phase: Creation of The Scope Chain

In FEC, Each Function Execution Context creates its scope: the space/environment where the variables and functions it defined can be accessed via a process called Scoping.

When a function is defined inside another function, the inner function can access the outer function's code and even the scope of its parent functions. This hierarchy of scopes is known as lexical scoping.

This concept of scope brings up an associate phenomenon in JavaScript called closures.

Creation Phase: Setting The Value of The "this" Keyword

The JavaScript **this** keyword refers to the scope where an Execution Context belongs.

In the Global Execution Context (GEC), the this keyword refers to the global object, which in a web browser is the window object.
In the Function Execution Context (FEC), the this keyword points to the context where the function is called. This depends on how the function is invoked.

These stages set the foundation for code execution in JavaScript by properly organizing the context's memory, scope, and references.

2️⃣ Execution Phase

_This is where the real work gets done. _
After the creation phase, the execution phase begins.Up until now, the VO contained variables set to undefined.

Now, the JavaScript engine reads the code again, updates the all the variable with the actual values, and then the code is executed.

Let's Put It All Together

To understand how this all plays out, consider the following example:

Here's how the execution context unfolds step by step in your JavaScript code:

➡️ Step 1: Global Execution Context (GEC)

Phase 1 : Memory Creation Phase:

var n = 5 declaration creates a variable n with an initial value of **undefined** .
function square(n) declaration creates the function square .
showsquare declaration creates a variable with an initial value of undefined.

Phase 2 : Execution Phase:

n assigned the value 5.
var square1 = square(n) is evaluated. This calls the function square with the argument n (which has a value of 5). The Call Stack is used to create a new Function Execution Context (FEC) for the square function.

➡️ Step 2: Function Execution Context (FEC)

Phase 1 : Memory Creation Phase:

In the square function, the parameter n is created and assigned the value of 5 (the argument passed in).
The variable ans is created and initialized to undefined.

Phase 2 : Execution Phase:

The expression n * n is calculated, resulting in 5 * 5 = 25.
The variable ans is assigned the value of 25.
The square function returns the value 25 and its Function Execution Context is popped off the Call Stack.

➡️ Step 3: Return to Global Execution Context

The returned value 25 from the square function is assigned to the showsquare variable in the Global Execution Context.
The console.log(showsquare) statement is executed, printing the value 25 to the console.

By following these steps, the JavaScript engine processes the code in terms of creating and executing the necessary execution contexts for both the global and function scopes.

And there you have it! By understanding how execution contexts work, you gain insight into how JavaScript processes your code.👩🏻‍💻

Thanks for Reading! 😃

Connect with Me! 🙋🏻‍♀️
If you enjoyed this journey through JavaScript execution contexts, be sure to check out my website for more tech insights. I am also on Instagram and LinkedIn for more updates.

And if you want to keep everything neat and tidy, Linktree might just be your new best friend.

Happy Coding! 🎉

Flex It Like a Pro: A Beginner's Guide to CSS Flexbox

Shreya Joshi — Fri, 12 Apr 2024 07:51:53 +0000

CSS Flexbox, short for "CSS Flexible Box Layout," is a layout model in CSS designed to create more efficient and flexible ways to organize and arrange elements in a container.

Unlike traditional CSS layouts that rely on block and inline directions, Flexbox is based on a single direction (either horizontal or vertical), making it easier to control the alignment and distribution of space among items in a container.

Basic and Terminology

Here's a figure to illustrate the main idea behind the flex layout:

Main Axis: The main direction in which flex items are arranged in the container (left-to-right or top-to-bottom).
Main Start | Main End: The start and end points of the main axis.
Cross Axis: The direction perpendicular to the main axis.
Cross Start | Cross End: The start and end points of the cross axis.
Main Size: The size of a flex item in the main axis (width or height).
Cross Size: The size of a flex item in the cross axis (width or height).

Flexbox Properties

Properties for the Parent (Flex Container):

1. display
To enable Flexbox, set the display property of the container to flex or inline-flex. The flex value creates a block-level flex container, while inline-flex creates an inline-level flex container.

div {
    display: flex;
}

2. flex-direction
This property sets the direction of the flex items.
The possible values are :

row (default)
row-reverse
column
column-reverse

div {
  flex-direction: row | row-reverse | column | column-reverse;
}

3. flex-wrap
It determines if flex items wrap onto multiple lines
The possible values are :

nowrap (default)
wrap
wrap-reverse

.div {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

4. Justify content
This property aligns flex items along the main axis.
The possible values are :

flex-start (default)
flex-end
center
space-between
space-around
space-evenly

div {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

5. align-items
This property aligns flex items along the cross axis.
The possible values are :

flex-start (default)
flex-end
center
baseline

div {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

6. align-content
Aligns lines of flex items when there is extra space in the cross axis.
The possible values are :

flex-start (default)
flex-end
center
space-between
space-around
space-evenly

div {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

7. gap, row-gap, column-gap
Explicitly controls the space between flex items.

.div {
  display: flex;
  ...
  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;
}

Properties for the Child (Flex items):

1. order
Sets the order of flex items. Default is 0.

.item1 {
    order: 2;
}

2. flex-grow
Controls how much a flex item should grow relative to its siblings. Default is 0.

.item2 {
    flex-grow: 2;
}

3. flex-shrink
Controls how much a flex item should shrink relative to its siblings. Default is 1.

.item2 {
    flex-shrink: 0;
}

4. align-self
Allows flex items to override the container’s align-items property.

.item {
    align-self: center;
}

5. flex-basis
Sets the initial size of a flex item before growing or shrinking.

.item2 {
    flex-basis: 2;
}

More Information

CSS Flexible Box Layout Module Level 1 (W3C): The official specification for CSS Flexbox.
A CSS Flexbox Cheatsheet (DigitalOcean): A handy guide with examples and explanations.
Centering Things in CSS With Flexbox (DigitalOcean): A tutorial on using Flexbox for centering elements.

That's it! You're now equipped with a strong foundation in CSS Flexbox. Let me know if you have any questions or if you need further assistance!

Happy coding! 😊