DEV Community: Bhargab B

What is Execution Context In JavaScript?

Bhargab B — Sat, 08 Jun 2024 08:02:38 +0000

JavaScript Execution Context - Internal Working of JS

In Simple Terms

In simple terms when you run a JavaScript program, the whole program runs inside a container or box, and remember this:

"Everything in JavaScript happens inside an Execution Content"

Look at the diagram again! Yes, execution context in javascript has two components: memory; and code component.

Let's understand both components and then we can at last we will combine all these pieces and we will be able to understand JavaScript Execution Context.

Memory Component
This is the section where all the variables and functions we declare in our program are stored. These variables are stored as key-value pairs i.e., key: value. This memory component is also known as the variable environment

Code Component
This is the section where the codes are executed line by line (one line at a time). There is a fancy name for it Thread of Execution

Phases of the JavaScript Execution Context

When you execute a JS code, it goes through 2 phases in order:

These are not official terminology, I am using them to make you understand Execution Context In JavaScript.

Scanning Phase: In this phase, the JS engine creates the container that we discussed earlier (Execution Context). It allocates memory for the variables and functions in the memory component. The variables are assigned the value of undefined and the functions are directly copied from the code to the memory component.
Execution phase: In this phase, the magic happens and the JS engine executes the code one line at a time. You remember in the scanning phase it assigns the value of undefined to the variables, and in the execution phase the undefined is replaced with the value that is declared in our code.

Let's understand with the help of a simple program:

 let a = 10;

 function addOne(num) {
   return num + 1;
}

In the scanning phase:

In the execution phase:
That undefined is replaced with the actual value, which we assign in our code 10.

This as a whole is known as the Execution Context In JavaScript.
I hope you understand it clearly, but if not then below is a real-life example that will help you understand it even more!

JavaScript Execution Context With Real Life Example

Imagine You're at a Restaurant

Think of JS as a restaurant, where different chefs (functions) are preparing meals (executing code).

The Execution Context is like the kitchen workspace that each chef uses to prepare their meal.

When the restaurant opens, the head chef (JavaScript engine) sets up the Global Execution Context. This is the main kitchen workspace where everything starts.

Ingredients (variables and functions) that are available to all chefs.
Utensils (methods and objects) that everyone can use.
Recipes (global functions) that any chef can follow.

function makeSalad(ingredient) {
  var dressing = "Olive Oil";
  console.log("Using ingredient: " + ingredient + " with " + dressing);
}
makeSalad("Lettuce");

When the function makeSalad("Lettuce") is called, the following happens:

Creation
- The workspace (Execution Context) is set up.
- Local ingredients (variables and functions) are declared.
- ingredient is set to "Lettuce".
- dressing is declared but not yet defined.
Execution Phase:
- Local ingredients are assigned values.
- The function's code runs using these local items.

Conclusion

Execution Context (EC) is created by js engine whenever a code is run
EC contains two phases: creation, and execution phase
When a variable is declared or a function is created, and completely new EC is created inside the global EC.
The EC is the chef's workspace.
The Global Execution Context is the main kitchen setup.
Each Function Execution Context is a new chef's workspace, created and stacked as needed.

Pseudocode: Everything you need to know

Bhargab B — Sun, 02 Jun 2024 10:00:33 +0000

The Ultimate Pseudocode Guide | How to use it effectively

Before understanding how to use pseudocode, you must understand what it is and its importance. Let's get right onto it.

Introduction

Pseudocode is a way of describing how a computer program should work using a human-readable language, generally English. In other words, it's a simplified version of programming code written in plain English before implementing it in a specific programming language. Think of it as a bridge between how humans think and how computers operate.

Pseudocode can also be referred to as a syntactical representation of a program and lacks strict syntax since it only represents the programmer's thinking process.

Importance of Pseudcode

Here are the points why pseudocode is important

Language Agnostic: Pseudocode helps programmers understand and write code because it is language agnostic and allows them to focus on solving the problem at hand without getting bogged down in the exact syntax of a programming language.
Visualization: It also enables visualization of the entire solution to an algorithmic problem and helps break down large problems into smaller, manageable pieces.
Simplicity: It uses simple, everyday words and phrases, avoiding the complex syntax and strict rules of programming languages.

How to use pseudocode effectively?

Here is the step-by-step guide for using pseudocode effectively:

Understand the Problem in Depth: Ensure you thoroughly understand the problem without worrying about edge cases initially.
Identify the Approach for Solving It: Plan your approach and outline the steps needed to solve the problem.
Start Writing: Focus on the logic rather than syntax. Write down the steps in plain English.
Use Consistent Formatting: Maintain a consistent format throughout your pseudocode. Avoid using technical jargon.
Iterate and Refine: Review your pseudocode, refine it, and check for potential bugs.

Examples

Example 1: Making a Cup of Tea

Imagine you want to write a program that makes a cup of tea. Here’s how you might write the pseudocode for that:

1. Boil water
2. Place a tea bag in a cup
3. Pour the boiling water into the cup
4. Let the tea steep for a few minutes
5. Remove the tea bag
6. Add sugar or milk if desired
7. Stir the tea
8. Serve the tea

Example 2: Finding the Largest Number in a List

Imagine you want to write a program that finds the largest number in a list of numbers. Here’s how you might write the pseudocode for that:

1. Start with an empty list of numbers
2. Initialize a variable 'largest' to be the first number in the list
3. For each number in the list:
    a. If the current number is greater than 'largest':
        i. Update 'largest' to be the current number
4. After checking all the numbers, 'largest' will hold the largest number in the list
5. Print or return 'largest'

Conclusion

Pseudocode is a valuable tool for programmers to understand, write, and solve coding problems. By following suggested guidelines for writing pseudocode and practicing regularly, programmers can develop a personalized style that makes sense to them and improves their overall programming skills.

Ultimate HTML Reference | HTML Cheatsheet

Bhargab B — Sat, 01 Jun 2024 09:51:16 +0000

A concise HTML cheatsheet for developers

If you are someone who has just started to learn web development or an experienced web developer, this ultimate guide to HTML will be the only reference you will ever need.

Note: This article is a reference material not for learning HTML. If you want to learn HTML basic click here

Basic Tags

Boilerplate

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Your Title</title>
</head>
<body>
    <!-- Your Body -->
</body>
</html>

This is the code that every HTML file must contain.

Title

<title>Your Webpage Title</title>

Whatever you write here is shown in the title bar of the browser. Also when you bookmark the page, this is what the title of the bookmark is written by default.

Headings

In HTML, there are six headings, starting from<h1> to <h6>. Here <h1> is the largest among all the heading and <h6> is the smallest

<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>

Typography

paragraph tag

<p> Hi I am a paragraph </p>

This tag is used to create a paragraph.

quote tag

<blockquote> </blockquote>

Used to put quote - indents text from both sides

bold tag

<b> </b>

Creates bold text (not recommended instead use <strong>)

italic tag

<i> </i>

Creates italicized text (not recommended instead use <em>)

code tag

<code> </code>

Define some text as computer code in a document.

strong tag

<strong> </strong>

Use for showing the importance of a word (usually processed in bold)

emphasizes tag

<em> </em>

Emphasizes a word (usually processed in italics)

subscript tag

<sub>Subscript</sub>

superscript tag

<sup>Superscript</sup>

Others (not used often)

<small> reduces the size of text.
<del> defines deleted text by striking a line through the text.
<ins> defines inserted text which is usually underlined.
<q> is used for shorter inline quotes.
<cite> is used for citing the author of a quote.
<address> is used for showing the author's contact information.
<abbr> denotes an abbreviation.
<mark> highlights text. ### Links

<a href="https://x.com/BhargabLinx" target="_blank"> My Twitter Handle </a>

The anchor tag denoted by <a>, is used to define hyperlinks that link to other pages external as well as internal
Most used attributes

href specifies the URL the link takes the user to when clicked.
download specifies that the target or resource clicked is downloadable.
target specifies where the link is to be opened. This could be in the same or separate window.
- _blank
- _parent
- _self
- _top

Lists

There are two types of lists unordered list and ordered list.

<!-- Unordered list -->
<ul>
  <li> HTML </li>
  <li> CSS </li>
  <li> JavaScrip t</li>
</ul>

<!-- Ordered list -->
<ol>
  <li> HTML </li>
  <li> CSS </li>
  <li> JavaScript </li>
</ol>

Container

Container tags don't have any meaning on their own, they are the tags that contain some data such as text, images, etc. There are many container tags in HTML. Some of the most used container tags are:

div tag

<div> This is block </div>

The div tag is used to make blocks in the document. It is a block element.

span tag

<span> This is span block </span>

Similar to <div> but it is inclined to content

Forms

<form>
.
form elements
.
</form>

This tag is used to create a form in HTML, which is used to get user inputs. The <form> element is a container for different types of input elements, such as text fields, checkboxes, radio buttons, submit buttons, etc. Here we have included text and password input, a checkbox, a radio and submit button, a dropdown list, and many more.
Here are the list of elements that can be added to the <form> element to make it useful:

<input>: This element can be displayed in several ways, depending on the type attribute.
<label>: This element defines a label for several form elements.
<select>: This element defines a drop-down list
<textarea>: This element defines a multi-line input field (a text area):
<button>: This element defines a clickable button
<fieldset>: This element is used to group related data in a form
<legend>: The <legend> element defines a caption for the <fieldset> element.

 <form action="/action_page.php">
  <fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="Bhargab"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Unknow"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

Click Here: for live preview

Learn more about it here!

Symbols

Less than (<)

&lt;

Greater than (>)

&gt;

Dollar ($)

&copy;

&copy;

Semantic Elements

Semantic elements mean elements with a meaning. In simple terms, semantic elements are those that convey their purpose clearly through their name.

<article>: This element specifies independent, self-contained content.
<section>: This element defines a section in a document.
<nav>: This element defines a section for the navigation bar
<header>: This element defines the heading section of a web page
<footer>: This element defines the footer section of a web page
<aside>: This element defines some content aside from the content it is placed in (like a sidebar).
<figure>: This element defines a figure in the content Other are:
<details>
<figcaption>
<main>
<mark>`
<summary>
<time>

Meta Tags

This is data about the document, which is not part of the main content.

<meta charset="UTF-8">

DEV Community: Bhargab B

What is Execution Context In JavaScript?

JavaScript Execution Context - Internal Working of JS

In Simple Terms

Phases of the JavaScript Execution Context

JavaScript Execution Context With Real Life Example

Imagine You're at a Restaurant

Conclusion

Pseudocode: Everything you need to know

The Ultimate Pseudocode Guide | How to use it effectively

Introduction

Importance of Pseudcode

How to use pseudocode effectively?

Examples

Example 1: Making a Cup of Tea

Example 2: Finding the Largest Number in a List

Conclusion

Ultimate HTML Reference | HTML Cheatsheet

A concise HTML cheatsheet for developers

Basic Tags

Boilerplate

Title

Headings

Typography

paragraph tag

quote tag

bold tag

italic tag

code tag

strong tag

emphasizes tag

subscript tag

superscript tag

Others (not used often)

Lists

Container

div tag

span tag

Forms

Symbols

Less than (<)

Greater than (>)

Dollar ($)

Copyright Symbol (©)

Semantic Elements

Meta Tags