How JavaScript works?

Sam — Sat, 03 Dec 2022 10:54:05 +0000

Let's Understand JS! There are few around the globe who loves JS like anything and the there is another part of the world who hates JS to the core. Hence on this blog, I will try to explain the behind the scenes on How JS works to make the latter part also fall in love in JS✌️😎

JS is a single threaded and synchronous language which means it can handle one task at a time.

What the heck is execution context in JS?

You can think of execution context(EC) as a container having two parts. The first part is named as Memory and also called as Variable environment and the second part is named code also called as Thread of execution .

The first being memory allocation phase, during this phase, JS skims the whole code and assigns memory to each and every variable and function; For variables during this phase, JS assigns a special placeholder called undefined and a whole copy of function code for the function.

Functions in JavaScript, when you compare with other programming languages, work differently.

Let's take an simple example,

var n = 2;

function square(num) {
 var ans = num * num;
 return ans;
}

var square2 = square(n);
var square4 = square(4);

The above example has an function which takes an argument of type number and returns the square of the number.

The second phase is the execution phase, during which JS executes the code line by line and assigns the actual value to the variables. The functions are considered as first-class citizens in JS, they behave very differently from any other language. That being the case when JS sees a function invocation it creates a brand new execution context inside the global execution context and executes the function in the same way with this two-phase process.

Are you wondering how JS manages its job smoothly?

All these tasks of creating and deleting the EC once the work is done are managed in JS by a stack called the call stack. Call stack has also other names such as,

Execution Context Stack
Program Stack
Control Stack
Machine Stack
Runtime Stack

In this article, we have understood how JS works and the execution context briefly. I hope this blog is helpful, please feel free to share and comment below.

Inline vs. block-level elements

Sam — Fri, 02 Dec 2022 08:38:48 +0000

There are many definitions about this topic. And as a developer it is a need to know more in this topic! so, let's see how important and useful to us!

HTML (HyperText Markup Language) elements historically were categorized as either "block-level" elements or "inline-level" elements. First let see about inline elements,

Inline elements:

An inline element does not start on a new line. An inline element only takes up as much width as necessary.

This is a `<span>` element inside a paragraph.

<!DOCTYPE html>
<html>
<body>

<p>This is an inline span <span style="border: 1px solid black">Hello World</span> element inside a paragraph.</p>

<p>The SPAN element is an inline element, and will not start on a new line and only takes up as much width as necessary.</p>

</body>
</html>

Here is a list of common inline elements

<a> <img> <small> <script> <strong>

I have stacked up multiple inline elements together.

<a href="#">Link</a>
<img src="" />
<small>The text gets become smaller</small>
<script>src=""</script>
<strong>React</strong>

Block-level elements:

A Block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.

A block-level element always takes up the full width available .Two commonly used block elements are: `<p> and <div>`

<!DOCTYPE html>
<html>
<body>

<p style="border: 1px solid black">Hello World</p>
<div style="border: 1px solid black">Hello World</div>

<p>The P and the DIV elements are both block elements, and they will always start on a new line and take up the full width available (stretches out to the left and right as far as it can).</p>

</body>
</html>

Here is a list of common Block elements. I have attached some common block elements together.

<h1 - h4>,<header> and <section>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>

<header>
    <h1>A heading here</h1>
    <p>Posted by John </p>
    <p>Some additional information here</p>
</header>

<section>
<h2>WWF's Symbol</h2>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>

And here are some useful references.

Full list of block level elements:[https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements#Elements]

Full list of inline level elements: including inline-block elements:(https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements#Elements)

Thank you for reading!

DEV Community: Sam