DEV Community: Kabir Nazir

Prototype in Javascript - 04 - Using classes to create objects

Kabir Nazir — Mon, 20 Apr 2020 23:09:26 +0000

In the previous article, we saw how we can use functions to create objects using the new keyword. We also saw one can assign the prototype to objects created using these functions by calling Function.prototype on the function itself. However, there was one slight inconvenience that we had noticed with this method. Let us see with an example.

    function User(name, score) {
      this.name = name;
      this.score = score;
    }

    User.prototype.incrementScore = function() {
      this.score++;
    };

    let user = new User('Kabir', 5);
    user.incrementScore();

As you can see above, the code for creating a User object is stored in the User constructor function. The code for setting its prototype method is in another block of code below. This might make it harder for one to debug issues with prototype tracing. Hence, Javascript had introduced the 'class' construct, which solved a lot of issues with regards to object-oriented programming in the language.

The `class` construct

Let us see with a quick example of how we can use class to implement the same code as above.

    class User {

      constructor(name, score) {
        this.name = name;
        this.score = score;
      }

      incrementScore() {
        this.score++;
      }
    }

    let user = new User('Kabir', 5);
    user.incrementScore();

In the above code, we have seen a class with the name 'User' being defined. When new User() is called, the following things happen:

A new object is created
The code in the constructor function of User class is run, with this inside that function pointing to the newly created object. The arguments passed to the new User() call are the arguments used in the constructor function (in this case, 'Kabir' as name and score as 5).
This object is then returned.

We have also added a method called incrementScore in the class body as well. This method gets added to User class's prototype.

Before we proceed further, let us first understand how a class works in Javascript under the hood. Let us call typeof on User and see what gets returned in the console

    console.log(typeof User); // prints function

The truth is that class in Javascript is somewhat of a 'syntactic sugar'. This means that, under the hood, it works in almost the same way that creating an object using a function would work. The code for class User written above actually does the following:

Create a function called User. The function's body code is taken from the constructor method of the class.
Any other methods present in the class are added to the prototype of User function.

Hence, in our above example, the User class had created an object with the name and score properties, as well as including the incrementScore function in its prototype.

Although class is considered a syntactic sugar, there are still a few important differences between using a class or simply a function to create objects. But we wouldn't be delving into that in this article as the focus here is on prototypes only.

Inheritance in classes

Now that we have seen how the prototype is set in a class, let us further proceed to how class inheritance works too. This is achieved using the extends keyword. Let's say we have a Bird class.

    class Bird {
      constructor(name) {
        this.name = name;
        this.canFly = true;
      }

      sing() {
        console.log(this.name + ' is singing');
      }
    }

    let myBird = new Bird('My bird');
    myBird.sing(); // My bird is singing

Say we would like to create another class for an Eagle. But we wish to reuse the Bird class for common properties. Or in other words, have Eagle class inherit from the Bird class. This is achieved as follows:

    class Eagle extends Bird {
      attack() {
        console.log(this.name + ' is attacking');
      }
    }

    let eagle = new Eagle('Bald eagle');
    eagle.attack(); // Bald eagle is attacking
    eagle.sing(); // Bald eagle is singing

The Eagle class is defined above, along with extends Bird. This means that the Eagle class has access to the properties and methods (including the constructor) defined in Bird class. This is because the extends keyword tells Javascript to set the prototype of Eagle.prototype to Bird.prototype. In other words, Eagle.prototype not only has a method called attack(), but also has it's __proto__ property set to Bird.prototype. This allows objects created using the Eagle class to have access to methods in the Bird class due to the prototype chain. One can also say that the Eagle class is the child class of its parent class, which is the Bird class.

There are some other concepts in class like the super method and method overriding that explain the behavior of child classes when created. I shall cover them and more in my next article on classes in Javascript.

This concludes my series on prototypes in Javascript. Hope you found it helpful.

Prototype in Javascript - 03 - The new keyword

Kabir Nazir — Thu, 16 Apr 2020 21:38:35 +0000

In the previous article, we saw how to create objects and set their prototypes using the internal __proto__ property. Let us now look at another way of creating objects and how we assign prototypes to it.

The new keyword

    function createUser(name, score) {
      let user = {};
      user.name = name;
      user.score = score;
      return user;
    }

    let user = createUser('Kabir', 5);

If you look at the code of the createUser function, you could argue that it's a bit verbose. There are two lines of code, particularly that can be considered as boilerplate when writing functions to create objects. They are the first and last line in the function, namely

let user = {};
return user;

Javascript provides us a way to get rid of these lines of boilerplate code with the introduction of the new keyword. Let us see with an example.

    function User(name, score) {
      this.name = name;
      this.score = score;
    } 

    let user = new User('Kabir', 5);

As you can see, the amount of code needed to create an object is made much simpler by using the new keyword. How does it do that? Basically, when you use 'new' before a function call, it tells Javascript to do a few things inside the function body.

Create an empty object.
Set the this inside the function to point to that object.
Return that object at the end of the function.

In other words, you could say that new is a kind of syntactic sugar in Javascript when it comes to object creation. The two ways of creating a user object mentioned above work in exactly the same way under the hood in Javascript to create the object. There are however some minor differences when we use new (for example, the function name is capitalized to 'User'. Although this isn't compulsory, it is practiced by developers as a convention to let other people know that this function is meant to be used with the new keyword) but they aren't relevant to our topic at hand.

Now, you might be wondering, how does one set the __proto__ object when creating an object using the new keyword? The answer to that lies in a default property available in a Javascript function called prototype.

Function.prototype

All constructor functions in Javascript have a property called prototype. Please note that this is slightly different from the __proto__ or [[Prototype]] property of objects in a few ways (You can read more about that here). The prototype property of a function is used to assign the [[Prototype]] to the object that would be created when the new keyword is used with that function. Let us look at an example.

    function User(name, score) {
      this.name = name;
      this.score = score;
    } 

    let userFunctions = {
      incrementScore: function() {
        this.score++;
      }
    }

    User.prototype = userFunctions;

    let user = new User('Kabir', 5);
    user.incrementScore();
    console.log(user.score); // Outputs 6

In the above code, we assign a custom object called userFunctions to User.prototype. By doing so, we are telling Javascript that whenever an object is created using new User(), then set the __proto__ of that object to userFunctions. In this way, we are able to set the prototypes for objects created through functions as well.

An important point to note is that it isn't wise to directly assign an object to the function prototype as this leads to the function's constructor value being overridden as well. This is because every function in Javascript has a default object for its prototype. This object holds the reference to a constructor, whose value you normally wouldn't want to be overwritten. Hence, a better way would be to set properties to the prototype as shown below.

    User.prototype.incrementScore = function() {
      this.score++;
    };

In using the new keyword, we have seen that we write the code for the constructor function in one block and assign properties to its prototype in another block. There's a cleaner way to do both of these in Javascript in the same block of code, using classes. We shall see more about it in the next article of this series.

Prototype in Javascript - 02 - The proto property

Kabir Nazir — Sun, 22 Mar 2020 13:48:57 +0000

In our previous article, we looked at a few ways of creating objects. However, we did run into an interesting problem, namely that of unnecessary code reuse. Let us try to understand it better with an example.

    let bird1 = {
      type: 'sparrow',
      canFly: true
    }

    let bird2 = {
      type: 'eagle',
      canFly: true
    }

We have created 2 objects, bird1 and bird2. We can see that while the value of the type property differs, the value of the canFly property remains the same. Rather than have the same property repeated in both objects, wouldn't it be better if we could have a single object called bird, which has a property canFly set to true (if we assume that all birds can fly), and somehow let Javascript know that both the bird1 and bird2 object are going to be inheriting (or copying) the properties of that bird object? In this way, we could have a single bird object in which we could store all the properties that are common in birds and only need to include the unique properties in bird1 and bird2. Something like this

    let bird = {
      canFly: true,
      laysEggs: true,
      hasFourLegs: false 
    }

    let sparrow = {
      color: 'blue'
    }

    let eagle = {
      color: 'brown'
    }

console.log(sparrow.canFly); // Returns undefined now but we ideally want a scenario where it returns true

Javascript allows us to implement the above concept with the special property of an object called [[Prototype]].

[[Prototype]]

In Javascript, objects have an internal property [[Prototype]], which is either another object or null. Although [[Protoype]] is the name given in the ECMAScript specification, for the purposes of this article, we shall be using the term 'prototype'.

The prototype of a Javascript object can be considered as its parent object or its super object. This means that when we try to access a property in an object, and it's missing, Javascript then tries to look for that property in the object's prototype and access it. This is referred to as 'prototypal inheritance'.

Although the prototype is an internal and hidden property of an object, there are other ways to access it. One of them is to use the '__proto__' keyword.

The proto property

Let us see an example of using the __proto__ property for our previous example.

    let bird = {
      canFly: true;
      laysEggs: true;
      hasFourLegs: false 
    }

    let sparrow = {
      color: 'blue'
    }

    let eagle = {
      color: 'brown'
    }

    sparrow.__proto__ = bird;
    eage.__proto__ = bird;

    console.log(sparrow.canFly); // Returns true

In the above code, you can see that we have set the prototype of sparrow as bird using the __proto__ property. Now, when we try to access the canFly property of sparrow, Javascript first looks for it in sparrow. When it doesn't find it there, Javascript then searches for it in its prototype (in this case, bird) and finds it there. Hence, sparrow.canFly is evaluated to true. Similarly, since the prototype of eagle is set to bird too, eagle.canFly also works and evaluates to true.

In the above example, we can say that bird is the prototype of sparrow, or that that sparrow 'prototypically inherits' inherits from 'bird'. The properties of bird, namely canFly, laysEggs and has4Legs, are called as inherited properties.

We can chain prototypes too.

    let object1 = {
      property1: 'exists'
    }

    let object2 = {
      property2: 'exists'
      __proto__: object1
    }

    let object3 = {
      property3: 'exists'
      __proto__: object2
    }

    console.log(object3.property1); // 'exists'

When we look for property1 in object3, Javascript doesn't find it. It then looks for it in its prototype, which is object2. It doesn't find property1 in object2, and further looks for it in object2's prototype (which is object1). It then finds property1 in object1 and returns its value.

Now, you might be wondering, in the above example, what is the value of the prototype of object1? Is it going to be undefined, or is it an empty object? The answer is that it will be null since the prototype is an internal property of every object in Javascript, which can either be another object or null.

In fact, there's a more elegant way of specifying an object's prototype while creating it itself. It's done via the Object.create function.

Object.create

Calling the Object.create function does 3 things:

Create an empty object
Set the prototype of the newly created object as the argument passed in the Object.create() function. This argument is mandatory and can only be either another object or null.
Return the created object.

    let object1 = {
      property1: 'exists'
    }

    let object2 = Object.create(object1);

    console.log(object2.property1); // 'exists'

Hence, as we have seen so far, we can make use of the hidden [[Prototype]] property in Javascript to implement the concept of inheritance and organize our code in a much more efficient and structured manner. In the next article of this series, we shall be discussing the new keyword and how it functions under the hood to create objects in Javascript.

Prototype in Javascript - 01 - Object creation

Kabir Nazir — Thu, 19 Mar 2020 13:38:06 +0000

Javascript has an interesting feature called Prototypal inheritance, which can be used to structure objects in a way that code duplication is minimized. Before we dive deeper into it, let us first try to understand how objects in Javascript are created.

Object creation

Objects in Javascript can be created in a number of ways. Let us look at the basic way of creating an object called user which has a name and score property attached to it.

let user = {
  name: 'Kabir',
  score: 5
}

The above code creates an object called user that has two properties, name and score, whose values are set to 'Kabir' and 5 respectively. We can verify the same using console.log.

let user = {
  name: 'Kabir',
  score: 5
}

console.log(user);

// Output: {name: "Kabir", score: 5}

Another way of creating objects in Javascript is to create an empty object and set its properties one by one

let user = {};
user.name = 'Kabir';
user.score = 5;

console.log(user);

// Output: {name: "Kabir", score: 5}

In both of the above examples, we have found a way to create a single user object whose name is Kabir and score is 5. What if we wished to create another user, say a user with the name John and score 10? The simple way is to create another object as shown below

let user = {};
user.name = 'Kabir';
user.age = 5;

let user2 = {};
user2.name = 'John';
user2.score = 10;

Although the above method works in the case of only two users, this method won't be feasible when we have to create a lot of users. It would be ridiculous to write code to create a separate object for each user. In such situations, we can use a general function to create users as shown below.

function createUser(name, score) {
  let user = {};
  user.name = name;
  user.score = score;
  return user;
} 

let user1 = createUser('Kabir', 5);
let user2 = createUser('John', 10);

The above code encapsulates the logic for creating a user in a single function, that can be called anytime we wish to create a new user. Now let us say we wish to add a feature to be able to increase a user's score. We can achieve that by adding a function to the object as shown below.

function createUser(name, score) {
  let user = {};
  user.name = name;
  user.score = score;
  user.increaseScore = function() {
    user.score++;
  }
  return user;
} 

let user1 = createUser('Kabir', 5);
console.log(user1.score); // This outputs 5
user1.increaseScore();
console.log(user1.score); // This outputs 6

The increaseScore function increments the user's score by 1, as seen above. Now, consider a scenario wherein using the createUser function, we have created 100 user objects. Each user object will then have 3 properties:

name - A string, indicating the name of the user
age - A number, indicating the current score of the user
increaseScore - a function, which increments the score of the user by 1

Note that while the value of name and age may differ in different user objects, the value of increaseScore remains the same. It is always a function whose code increments the score of the user by 1.

user.increaseScore = function() {
  user.score++;
}

Storing a copy of a function that does the exact same thing in every object is not memory efficient. Hence, it would be better if we could write the increaseScore function just once and store it somewhere, and later on be able to call that function from any user object, rather than storing an individual copy of the function in every object. In most object-oriented languages, this is achieved by using inheritance. However, Javascript does not support inheritance out of the box. Instead, it has a special feature called prototype which helps us to somewhat implement the concept of inheritance in Javascript. We shall learn more about prototypal inheritance in the next article in this series.

The CSS box-sizing property

Kabir Nazir — Sun, 01 Mar 2020 00:35:16 +0000

In HTML, by default, every element is a rectangular shaped object. All the elements, irrespective of the shape in which they appear on the web page, are drawn and treated by the browser as a rectangular. Let’s understand the concept better with the help of a few examples

In the above example, we have an image whose width and height are 500px each. When we try to inspect the element, we see that the browser measures its shape as a square whose sides are 500px each.

The other image of the cat has a width and height of 500px, but it is a circular image (by setting border-radius to 50%). But we can see that the browser still measures its shape as a square, despite it appearing as a circle to the user.

Before we move to the topic of box-sizing, we first need to discuss how HTML measures the dimensions of an element. Let’s take the width dimension. HTML allows us to set the width of an element using the CSS property width. However, the space occupied by an element on the web page differs from the width assigned to it. The formula to calculate the total horizontal space occupied by an element is

    total horizontal space = width + padding-left + padding-right +
    border-right + border-left + margin-left + margin-right

As you can see, properties such as padding, border, and margin also account for the space occupied by an element in HTML. You can understand this better from the image below

As you can see, although we have set the width of the image to 500px, the total horizontal space occupied by the image includes its padding of 20px on either side, border of 20px, and margins of 40px on either side. So, the total space, according to the formula we discussed earlier is 500 + 20 + 20 + 40 + 40 + 60 + 60 = 740px.

Although this is the default method of calculating the space occupied by an element in HTML, this isn’t very favorable when it comes to designing our elements. Say you have an element that needs to have a fixed total width of 300px. You would first specify its width property in CSS as 300px. However, if you wish to add a border or padding to this element, since they add to the total width of the element, you would also need to reduce the width property of the element accordingly in order to maintain the fixed total width of 300px. In order to overcome this inconvenience, we have a property in CSS called box-sizing.

Box Sizing

The box-sizing property determines how the final space an element occupies on the web page is calculated. The default value for this property is content-box. When its set as the value, the final space occupied by the element is calculated as discussed in the previous section.

    div {
      box-sizing: content-box;
    }

However, there’s another value to this property called border-box. When border-box is applied, any padding or border applied to an element is enclosed within the original size of the element. Margins added to the element increase their final size as usual.

    div {
      box-sizing: border-box;
    }

So, the total horizontal space occupied by an element whose box-sizing is set to border-box will be calculated as

    total horizontal space = width + margin-left + margin-right

Let us understand this further using the same layout as before, but with box-sizing set to border-box

As you can see, the width is set as 500px in CSS. But unlike before, the padding of 20px as well as the border of 40px, on both sides, are included within the element rather than outside it. So, the base width of the element is calculated as 500–20–20–40–40=380px. However, the final width (excluding the margins) remains 500px only. And it will remain so, no matter what you set the border or padding as. This kind of box-sizing helps us in designing our webpages in an easier and simpler manner.

This post was originally published here on Medium.

Use CSS float property to create columns

Kabir Nazir — Sat, 29 Feb 2020 23:58:50 +0000

In HTML, when we wish to separate our page into different columns, there are multiple ways to do achieve this in CSS. One of the simpler methods is to set the display property to inline-block. Let’s see how with a code example.

    <body>
      <div class="div-1">This is 33.33%</div>
      <div class="div-2">This is 66.66%</div>
    </body>

    div {
      display: inline-block;
      padding: 20px;
      text-align: center;
    }

    .div-1 {
      width: 33.33%;
      background: #FF6347;
    }

    .div-2 {
      width: 66.66%;
      background: #0EB36D;
    }

We can see that although we have set the display property of the divs to inline-block and set their widths as 33.33% and 66.66% (which add up to 100%), the second div does not line up next to the first div and it is instead being placed below it.

The reason for this is that there’s a carriage return \n between these two div elements due to them being in separate lines in the HTML code. The browser parses this carriage return (or newline) as a space character and adds it between the two divs. Hence, the second div (which occupies 66.66% of the screen width) is unable to find the necessary space to accommodate itself and runs over to the next line.

To further understand, let’s see what happens when we modify the above code to set the width of the divs to 40% each.

We can see that although the two divs appear on the same line now, there’s a small space between them. This space is also due to the carriage return being interpreted by the HTML parser as an extra space.

There are many methods (or you could call them hacks) to overcome this problem. One of them involves commenting out the space between the closing tag of the first element and the opening tag of the second element. You could also set the font-size of the parent element to be 0px and set the font-size of the child elements individually. However, we’re not going to get in-depth about them in this article. We are instead going to be looking at the CSS float property to align our elements.

The float property in CSS was originally introduced to allow text to float around an image in an article. But due to the nature of how float works, we can use it to create columns in a parent element without the drawbacks of using the method we discussed previously. Let’s see a code example of how we can modify our CSS to use float and have the two divs of widths 33.33% and 66.66% appear on the same line.

    div {
      padding: 20px;
      text-align: center;
    }

    .div-1 {
      width: 33.33%;
      background: #FF6347;
      float: left;
    }

    .div-2 {
      width: 66.66%;
      background: #0EB36D;
      float: left;
    }

You can see that the two divs sit next to each other, without any space in between. This is a good example of how we can use the float property to create columns in HTML.

Of course, you would also need to clear the floats by wrapping the two divs in a parent element and applying the clearfix technique (you can read more about the technique here).

This post was originally published here on Medium.

How to clear floats in CSS

Kabir Nazir — Sat, 29 Feb 2020 23:45:00 +0000

In this story, we have seen how we can use floats to create columns on our page. However, using floats come with a caveat: You need to clear the floats after using them. Let us see with an example of why this needs to be done.

    <body>
      <div class="div-1">This is 33.33%</div>
      <div class="div-2">This is 66.66%</div>
    </body>

    div {
      display: inline-block;
      padding: 20px;
      text-align: center;
    }
    .div-1 {
      width: 33.33%;
      background: #FF6347;
    }
    .div-2 {
      width: 66.66%;
      background: #0EB36D;
    }

The above example shows two divs that occupy one-third and two-thirds of the screen width respectively. Let’s see what happens when we try to add a third div below them of size 200x200 pixels, but without the float property.

    <body>
        <div class="div-1">This is 33.33%</div>
        <div class="div-2">This is 66.66%</div>
        <div class="div-3">This is the third div</div>
    </body>

    div {
      display: inline-block;
      padding: 20px;
      text-align: center;
    }
    .div-1 {
      width: 33.33%;
      background: #FF6347;
      float:left;
    }
    .div-2 {
      width: 66.66%;
      background: #0EB36D;
      float:left;
    }
    .div-3 {
      width: 200px;
      height: 200px;
      background: #2958B3;
    }

We can see that the third div seems to be appearing below the first two divs. Let us inspect the page to understand further.

We can see that the third div indeed hasn’t appeared below the two divs, as is the normal flow of HTML. Rather it has aligned itself to the starting position of the page, almost as if the first two divs don’t exist. The reason this happens is that when you apply a float to an element in HTML, that element is removed from the normal flow of the page. This causes the rest of the elements appearing after it to bleed into its space. In order to overcome this issue, we need to ‘clear’ the floats in order for the browser to render the remaining elements properly. Let us look at some of the methods for the same:

Clearing the float of the next element

We can add a clear: both property to the element immediately proceeding the floated elements, as below

    .div-3 {
      width: 200px;
      height: 200px;
      background: #2958B3;
      clear: both;
    }

We can see that the third div element is behaving as intended, by positioning itself below the first two divs. This is because by applying clear: both property, you tell the browser that the float property is no longer in effect from that point onwards and that the normal flow of the page can resume.

However, applying the clear property to proceeding elements alone doesn’t solve the issue of floats every time. Consider the following situation where the floated elements are enclosed in a parent main element.

    <body>
      <main>
        <div class="div-1">This is 33.33%</div>
        <div class="div-2">This is 66.66%</div>
      </main>
      <div class="div-3">This is the third div</div>
    </body>

    div {
      display: inline-block;
      padding: 20px;
      text-align: center;
    }
    .div-1 {
      width: 33.33%;
      background: #FF6347;
      float:left;
    }
    .div-2 {
      width: 66.66%;
      background: #0EB36D;
      float:left;
    }
    .div-3 {
      width: 200px;
      height: 200px;
      background: #2958B3;
    }

If you try to run the above code and inspect the page, you can see that the height of the parent element ‘main’ is 0px, even though it has a few elements inside it that occupy space. This is because, in the absence of the clear: both property in the proceeding element, the parent main element hasn’t retrieved back its styles. So, in order for the parent element to gain back its styles, we must try to look into containing the floats rather than clearing them. There are different approaches to containing floats. However, we’re gonna look at three of the most popular: placing an empty div with clear: both, overflow technique and the clearfix technique.

Placing an empty div

In this method, we place an empty div before the closing tag of the parent element and set its style to clear: both.

    <body>
      <main>
        <div class="div-1">This is 33.33%</div>
        <div class="div-2">This is 66.66%</div>
        <div class-"clear></div>
      </main>
      <div class="div-3">This is the third div</div>
    </body>

    div {
      display: inline-block;
      padding: 20px;
      text-align: center;
    }
    .div-1 {
      width: 33.33%;
      background: #FF6347;
      float:left;
    }
    .div-2 {
        width: 66.66%;
        background: #0EB36D;
        float:left;
    }
    .div-3 {
      width: 200px;
      height: 200px;
      background: #2958B3;
    }
    .clear {
      clear: both;
    }

Containing floats in this manner is not efficient due to the need to add an empty div element every place float is used. Morever, the use of additional empty divs is also not semantically correct.

Overflow technique

In this method, we apply overflow: auto property to the parent element and set its style to clear: both.

    <body>
      <main>
        <div class="div-1">This is 33.33%</div>
        <div class="div-2">This is 66.66%</div>
      </main>
      <div class="div-3">This is the third div</div>
    </body>

    main {
      overflow: auto;
    }

    div {
      display: inline-block;
      padding: 20px;
      text-align: center;
    }
    .div-1 {
      width: 33.33%;
      background: #FF6347;
      float:left;
    }
    .div-2 {
      width: 66.66%;
      background: #0EB36D;
      float:left;
    }
    .div-3 {
      width: 200px;
      height: 200px;
      background: #2958B3;
    }

This method has a few drawbacks as well. There is a chance that adding the overflow property might add a scrollbar in Internet Explorer. We can fix that by setting overflow: hidden. However, that would, in turn, lead to certain styles like box-shadow to not be visible.

Clearfix technique

This is by far, the most effective as well as the most popular way to contain floats. In this method, we create a CSS class that includes certain rules and then apply that class to the parent element housing the floated elements. Let us name that class as ‘clearfix’.

    <body>
        <main class="clearfix">
            <div class="div-1">This is 33.33%</div>
            <div class="div-2">This is 66.66%</div>
        </main>
        <div class="div-3">This is the third div</div>
    </body>

    div {
      display: inline-block;
      padding: 20px;
      text-align: center;
    }
    .div-1 {
      width: 33.33%;
      background: #FF6347;
      float:left;
    }
    .div-2 {
      width: 66.66%;
      background: #0EB36D;
      float:left;
    }
    .div-3 {
      width: 200px;
      height: 200px;
      background: #2958B3;
    }

    .clearfix: before, .clearfix: after {
      content: "";
      display: table;
    }
    .clearfix: after {
      clear: both;
    }

In the above code, we use pseudo elements of before and after on the clearfix class to create dynamic content above and below the element it’s applied on. We also set the content as an empty string in order to make the elements hidden. Morever, we set the display property to table in order to make them block level elements that span the entire width of the page, both above and below the class. Setting the display property to block also works, but we apply it as table in order to ensure backwards compatibility on older browsers. These dynamically created pseudo elements are placed in a hidden manner above and below the content and ensure that the floats are properly contained within the confines of the element itself. We also apply clear: both property to the after element, in order to ensure that the next element does not get wrapped around the floated element(s).

This post was originally published here on Medium.

Responsive Web Design: Why We Need It and How It’s Implemented

Kabir Nazir — Sat, 29 Feb 2020 23:18:57 +0000

In the early days of working with HTML, most end users accessed the websites through their desktop computers or laptops only. Web developers used to develop for the large screen real estate and style their websites accordingly. However, in recent times, the number of users accessing the web from their mobile devices has increased exponentially. User adoption of mobile devices has seen massive growth in the last decade, along with the availability of cheap data plans. For example, back in 2012, there were more mobile phones than people in the UK.

As a result, web developers need to take into account the smaller screen size of such devices and style their websites so that they are optimized for all screen sizes. For the same purpose, responsive web design had been introduced and is being adopted by most as a defacto standard for designing web pages.

Responsive Web Design

Responsive web design is simply defined as the practice of building websites for every device and screen size, no matter the size. It involves providing a uniform user experience across multiple platforms. The term was coined and further developed by Ethan Marcotte in 2010.

While researching about responsive design, it’s common for one to also come across the terms adaptive or mobile. Although these terms are used interchangeably, there’s a slight difference between them. Responsive design refers to that which reacts quickly and effectively to any environment, while adaptive design involves having a base design that can be easily modified for any special purposes. Mobile design, on the other hand, refers specifically to designing a separate website only for mobile users.

Responsive design is beneficial in that it fulfills the requirements of all three designs and hence is widely preferred. Responsive design consists of mainly three components, namely flexible layouts, flexible media, and media queries. Let us now see in detail how one can go about implementing each of them on their websites.

Flexible Layouts

The use of flexible layouts involves encapsulating the HTML elements in a flexible container or grid, which resizes dynamically according to the screen width. The dimensions of these layouts are specified in percentage or em units, rather than as static values. This ensures that the layout (and the elements inside it) adjusts itself automatically according to the screen size.

Let us see the same with an example

    * {
      box-sizing: border-box;
    }

    .container:before,
    .container:after {
      content: "";
      display: table;
    }

    .container:after {
      clear: both;
    }

    .container {
      *zoom: 1;
    }

    span {
      padding: 20px;
      text-align: center;
      float: left;
    }

    .span--1 {
      width: 200px;
      background: #ff6347;
    }

    .span--2 {
      width: 300px;
      background: #0eb36d;
    }

As you can see above, we have a container that holds two elements of width 200px and 300px each. In a desktop browser, the elements appear normally without any hiccups. Let us see how it appears on a mobile device of dimensions 240x320.

We can see that the second span is running into the next line. It’s because the width of the mobile device was 240px, which was less than the combined width of the two elements which was 200+300=500px. Moreover, the second span also seems to be running off-screen as its width of 300px is greater than the screen width. Now let’s try to fix this by making the layout flexible by specifying percentages instead for the spans.

    * {
      box-sizing: border-box;
    }

    .container:before,
    .container:after {
      content: "";
      display: table;
    }

    .container:after {
      clear: both;
    }

    .container {
      width: 100%;
      *zoom: 1;
    }

    span {
      padding: 20px;
      text-align: center;
      float: left;
    }

    .span--1 {
      width: 40%;
      background: #ff6347;
    }

    .span--2 {
      width: 60%;
      background: #0eb36d;
    }

We can see that the above layout works well for both mobile and desktop screens. Using the same method of applying percentages, we can create a completely dynamic website that adapts itself to all screen sizes. For more control over your layouts, you can also try using the min-width and max-width properties as well.

Flexible Media

Media elements need to be resized according to the screen size and dimensions in order to obtain a smooth and undistorted viewing experience. A quick way to ensure that media elements are scalable is to set the max-width property to 100%. This works for media elements like img, video, and canvas.

However, this method does not work on all forms of media, especially for iframe and embedded media. In order to make them scalable too, they must be placed within a parent element and their position set as absolute. The parent element then needs to have a width of 100%, so that it may scale according to the viewport. You also need to set the height of the parent element to 0 in order to enable the haslayout mechanism of Internet Explorer.

Media Queries

Media queries are used to specify different CSS properties based on the device properties, such as the viewport width or the screen orientation. There are different ways to embed media queries in CSS, using the @media rule inside of an existing style sheet, importing a new style sheet using the @import rule, or by linking to a separate style sheet from within the HTML document. However, the preferred method is to use the @media rule inside of an existing style sheet to avoid any additional HTTP requests.

Media queries are written as rules with specifications. Each media query begins with the type of media its targeting, for example all, screen, print, tv, braille, etc. The rule is then followed by logical operators and certain CSS properties with values. If the value holds true for the current scenario, then the rule is applied. Let’s see an example

    // For mobile devices
    .container {
      width: 800px 
    }

    // For desktop devices
    @media all and (min-width: 1024px) {

      .container {
        width: 1200px 
      }
    }

In the above CSS, the elements with the class container would have a width of 800px. However, the media rule which we have applied specifies that for all devices that have a minimum viewport width of 1024px, set the width to 1200px instead. By following this approach, one can style pages for both mobile and desktop devices without having to create separate HTML files for different layouts.

This post was originally published here on Medium.

Asynchronous Javascript - 04 - Promises

Kabir Nazir — Sat, 29 Feb 2020 22:57:46 +0000

In this article, we’re going to be looking at an interesting feature of Javascript that was introduced in ES6 in order to run asynchronous code efficiently. Prior to ES6, for running asynchronous code (for e.g. a network request), we used callback functions. But that approach had a lot of drawbacks (including callback hell) which gave rise to issues in code-readability, error handling and debugging. In order to overcome these issues, a new Javascript object called Promise was introduced.

Promise

A Promise is a special type of Javascript object which acts as a placeholder for the eventual completion or failure of an asynchronous operation. It allows you to attach 'handlers' to it, which process the success value or failure reason when they arrive at a later stage. This lets us call asynchronous functions as if they were synchronous and store them in a proxy object, which 'promises' to return the output at a later stage of time. Let us try to understand this better with an example.

The basic syntax of a Promise is given above. A Promise is created with a function that is passed into it, called the executor function. The executor function contains the asynchronous code you wish to run. The function contains two parameters, resolve and reject. These are default callback functions provided by Javascript. The executor function is run as soon as a promise is created. Whenever the code of this function has completed running, we need to call either of the callback functions:

resolve(value): Calling this function indicates a success condition, with ‘value’ being the value returned from the successful completion of the executor function
reject(error): Calling this function indicates a failure or error condition, with the ‘error’ value being an Error object indicating the error details. ‘error’ doesn’t necessarily have to be an Error object but it is highly recommended.

The promise object returned by the constructor also has a few internal properties:

state: Set to “pending” initially. Changes to either “fulfilled” if resolve is called or “rejected” if reject is called.
result: Set to undefined initially. Changes to ‘value’ if resolve(value) is called, or ‘error’ if reject(error) is called.

Let us see how the above features work with a simple example.

The above code creates a promise to generate a random number from 1 to 10 and check if it’s even. We have used setTimeout in order to implement a delay of 1 second. When the promise object is created, its internal properties are set to their default values.

    state: "pending"
    result: undefined

Let us assume that the randomNumber generated at line 2 is an even number like 4. In this case, the code at line 5 gets executed and the resolve callback function is called with the value of 4 as its argument. This moves the promise object to a “fulfilled” state. This is analogous to saying that the executor function’s task has returned a ‘success’ result. The promise object’s properties now are

    state: "fulfilled"
    result: 4

If the randomNumber generated had been an odd number like 7, then the code at line 7 gets executed and the reject callback function is called with the Error object as its argument. This moves the promise object to a “rejected” state. The promise object’s properties now are

    state: "rejected"
    result: Error("Not an even number");

Note that in a promise, the executor function can call only either resolve or reject once. Any subsequent calls to either resolve or reject after the first one are ignored. This is because a promise is supposed to have a single result of either success or failure. Moreover, both resolve and reject accept only a single (or zero) argument. Additional arguments are ignored.

An important thing to note is that when a promise object is created, it doesn't immediately store the output of the asynchronous operation. The output (which might be either the success value passed by the resolve function, or the error value passed by the reject function) is obtained only at a later time. This output is stored in 'result', which is an internal property of a Promise and cannot be accessed directly. In order to obtain the result, we attach special handler functions to the promise, which we shall discuss below.

then, catch and finally

Promises have three important functions, or ‘handlers’ that can be attached to them, that allow us to receive or ‘consume’ their outputs. The first one is the then handler. The basic syntax of then is as follows.

The then handler takes up to two callback functions as arguments. The first callback is executed if resolve was called in the executor function. The second callback is executed if reject was called in the executor function. For example, in the following promise, the resolve function was called in the executor function.

Hence, only the first callback was executed and the second one was ignored.

In the case of reject function being called,

The first callback was ignored and the second callback function was executed.

We can also have separate handlers to consume the results of resolve and reject. This is where the catch handler comes into play. It takes only a single callback function as an argument and executes it if the promise was rejected.

The third handler available is finally. This works similar to how final works in the normal try-catch scenario. The finally handler takes no arguments and is always executed if it is attached to a promise, irrespective of whether the promise was resolved or rejected.

We had mentioned earlier in this article about how one of the reasons promises was introduced was to overcome callback hell. The feature of promises that achieves this is the ability of chaining. The handlers of a promise, namely the then, catch and finally, all return back a promise. Hence, we can use these handlers in order to ‘chain’ multiple promises. Let’s look at a simple example.

In the above example, we have created a simple promise that resolves with a value of 10. Next, we consume this result with our first then function at line 5. This function prints the value ‘10’ into the console and then returns the value 10 * 2 = 20. Due to this, the promise returned by this then function gets resolved with a value of 20. Hence, in line 9, when the then function is being called, its result is 20. That result of 20 gets printed onto the console, followed by a return of 20 + 5 = 25. Again, the promise returned by the current then function is hence resolved with the value of 25. By repeating this, we can chain any number of promises to an existing promise. For more information regarding chaining, you can look up this document on MDN.

Now that we have looked at promises, you might be wondering where they fit into the execution order. Do promises’ handlers (then, catch and finally) go into the callback queue since they are asynchronous? The answer is no.

They actually get added to something called the microtask queue. This queue was added in ES6 specifically for the handling of Promises (and a few other types of asynchronous functions, like await). So, whenever a promise is ready (i.e. it’s executor function has completed running), then all the then, catch and finally handlers of the promise are added to the microtask queue.

The functions in the microtask queue are also given higher preference than the callback queue. This means that whenever the event loop is triggered, once the program has reached the last line, the event loop first checks if the microtask queue is empty or not. If it’s not empty, then it adds all the functions from the microtask queue into the call stack first before moving on to check the callback queue.

For more information on Promises, you could look up this document on MDN.

This concludes my series on Asynchronous Javascript. Feel free to leave a comment for any queries or suggestions!

This post was originally published here on Medium.

Asynchronous Javascript - 03 - The Callback Queue

Kabir Nazir — Sat, 29 Feb 2020 22:33:23 +0000

We had discussed the workings of the single-threaded execution and the call stack of Javascript in the previous articles. We gained an understanding of the way synchronous functions are executed in Javascript. In this article, we will actually start looking at how asynchronous functions operate and are placed in the order of execution in Javascript.

When we are asked to think of one of the simplest functions that are asynchronous in Javascript, most of us would come up with the builtin setTimeout function. Let’s look at a simple example

The above code prints “Hello” onto the console after a delay of 1000 milliseconds (1 second). Sounds simple enough, right? Let us now tweak the code a bit.

The above code will print “Hello” onto the console after a delay of 0 seconds. This means that it will print it instantly. How about we add some code after the setTimeout function?

The above code should print out “Hello” and then print “World”, right? From what we have seen about the call stack, the setTimeout function at line 1 is supposed to go into the call stack first, followed by the console.log function at line 5. But let’s look at the actual output

    Output:
    World
    Hello

We see that “World” is printed before “Hello”. This means that the console statement at line 5 got executed before the setTimeout function. How is that possible? It’s possible because the setTimeout function never went into the call stack. Only the console.log statement at line 5 was sent into the call stack and got executed.

But we see that the setTimeout function too eventually got executed. This is because the setTimeout function got passed into something that’s called a callback queue in Javascript.

Callback queue

Before we look into the callback queue, let’s understand a few things about the setTimeout function. The first thing we need to know that setTimeout is not part of Javascript. It’s not found in the ECMAScript specs or is part of the Javascript engine. This function is actually provided by the web browser that Javascript runs on. To be more precise, it’s part of the window object in the browser. Hence, the setTimeout function will run normally on a browser but will not work on other environments of Javascript like Node. There are other functions like setTimeout which are part of the browser but not Javascript itself, like console (to print logs), document (to access elements of HTML), localStorage (which allows saving key/value pairs in the browser’s memory) and so on.

When an asynchronous function like setTimeout gets called, it doesn’t get added to the call stack. It instead gets added to the callback queue. The callback queue, as the name suggests, is a queue. Hence, functions added to it are processed in a first-in-first-out order. When the event loop in Javascript is fired, it first checks the call stack to see if it’s non-empty. If so, it executes the function at the top of the stack. However, if it finds the call stack to be empty, the program continues on with its execution. Once the end of the program is reached and the event loop is fired, as usual, it first checks the call stack to see if it's non-empty. If it’s not, it starts executing the functions one by one from the top of the stack. Once the call stack is empty, the event loop then checks the callback queue to see if it’s non-empty as well. If yes, it then proceeds to execute the functions one by one in the queue, starting from its head. Keep in mind that the functions in the callback queue start getting executed only after

We have reached the end of the program
There are no functions left to be executed in the call stack

The above flow might sound a bit confusing to grasp at first. Let us try to understand it better with the help of an example.

In the above code, we have created a function blockThreadFor1Sec. Let us assume that it contains some code that takes approximately 1 second to run, for e.g. a for loop that is looped a billion times. When the loop finishes, the function then prints “1 second elapsed” onto the console.

At the beginning of the program, both the call stack and the callback queue are empty. Let us also take note of the timestamp at each step. Currently, it is at 0 ms

    Timestamp: 0 ms

    |               |
    |               |
    |               |
    |               |
    |               |
    |_______________|

       Call stack

    |               |
    |               |  
    |               |
    |               |
    |               |
    |               |

      Callback queue

In line 1, the program only defines the function block1Second. The program then moves to line 6, where let’s say we’re at a timestamp of 1 ms (this isn’t the accurate timestamp, but just a rough value we take for simplicity). The program calls the setTimeout function and since it’s an asynchronous function, Javascript puts this function into the callback queue.

    Timestamp: 1 ms

    |               |
    |               |
    |               |
    |               |
    |               |
    |_______________|

       Call stack

    |               |
    |               |  
    |               |
    |               |
    | setTimeout()  |
    |               |

      Callback queue

When the event loop is fired, it sees that the call stack is empty. It then looks at the callback queue and finds it non-empty with the setTimeout function at the head. But it doesn’t immediately execute it because the function is set to execute only after a delay of 1000 ms. So, in our case, the function is to be executed only at a timestamp of (1 + 1000) = 1001 ms. Hence, the code inside the setTimeout function isn’t called yet.

The program then moves to line 10, at which point let’s say we’re at a timestamp of 2 ms. The block1Second function is called and since it’s a normal synchronous function, it is added onto the call stack.

    Timestamp: 2 ms

    |               |
    |               |
    |               |
    |               |
    | block1Second()|
    |_______________|

       Call stack

    |               |
    |               |  
    |               |
    |               |    Scheduled to
    | setTimeout()  | -> execute at
    |               |    1001 ms

      Callback queue

When the event loop gets fired, it sees that the call stack is non-empty. Hence, it executes the function at the top of the stack, which is block1Second. This function would take approximately 1 second or 1000 milliseconds to execute. Hence, when its execution is finished, we should be at a timestamp of (2 + 1000) = 1002 ms.

Here’s where things get interesting. As we have seen before, the setTimeout function was scheduled to be executed at a timestamp of 1001 ms. So, when the event loop is fired at a timestamp of 1001 ms, the setTimeout function present in the callback queue is not called yet because of condition #2 mentioned above that needs to be fulfilled first. i.e. the call stack needs to be empty. The call stack becomes empty only at 1002 ms when the block1Second function has finished executing and is removed from the call stack.

Let us now look at what happens at a timestamp of 1002 ms. The block1Second function finishes executing, “1 second elapsed” gets printed onto the console and the function is removed from the call stack.

    Timestamp: 1002 ms

    |               |
    |               |
    |               |
    |               |
    |               |
    |_______________|

       Call stack

    |               |
    |               |  
    |               |
    |               |    Scheduled to
    | setTimeout()  | -> execute at
    |               |    1001 ms

      Callback queue

Now that the call stack is empty, one might assume that the setTimeout function is ready to be called the next time the event loop is fired. However, that is not the case as condition #1 mentioned above has not been fulfilled. i.e. we haven’t reached the end of the program yet. Hence, the program moves on in its execution without executing the setTimeout function.

At line 12, we’re at a timestamp of 1003 ms. The program calls the console.log statement, which gets added to the call stack since it’s synchronous.

    Timestamp: 1003 ms

    |               |
    |               |
    |               |
    |               |
    | console.log() |
    |_______________|

       Call stack

    |               |
    |               |  
    |               |
    |               |    Scheduled to
    | setTimeout()  | -> execute at
    |               |    1001 ms

      Callback queue

When the event loop is triggered, it sees that the call stack is non-empty with a single function. Hence, the console.log function is executed (which prints “World” onto the console) and then removed from the call stack. We have now reached the end of the program and are at a timestamp of 1004 ms.

    Timestamp: 1004 ms

    |               |
    |               |
    |               |
    |               |
    |               |
    |_______________|

       Call stack

    |               |
    |               |  
    |               |
    |               |    Scheduled to
    | setTimeout()  | -> execute at
    |               |    1001 ms

      Callback queue

When the event loop is now triggered, it sees that the call stack is empty. It also sees that the end of the program has been reached. Now that both the conditions have been fulfilled, the event loop finally is ready to move on to the callback queue to start executing functions from there. It sees that the callback queue is non-empty. Hence, it executes the function at the head of the queue, which is our setTimeout function. The function prints “Hello” onto the console, after which the function reaches its end of execution and is removed from the callback queue.

    Timestamp: 1005 ms

    |               |
    |               |
    |               |
    |               |
    |               |
    |_______________|

       Call stack

    |               |
    |               |  
    |               |
    |               |
    |               |
    |               |

      Callback queue

When the event loop is triggered again, it sees that the call stack is empty, the program has reached its end and the callback queue is also empty. Hence, the program is finally terminated.

There’s just one more concept of asynchronous Javascript that we need to learn, which deals with promises and the microtask queue. We shall learn about it in the final part of this series.

This post was originally published here on Medium.

Asynchronous Javascript - 02 - The Event Loop

Kabir Nazir — Sat, 29 Feb 2020 22:20:17 +0000

As we have seen in our previous article, Javascript always jumps to the execution of the function at the top of the call stack. How does Javascript get notified of when a new function is added/removed to the stack? How does it know when to pause the execution of the current function and jump to the execution of a new function? All this is possible due to a component of Javascript called the event loop.

Event Loop

The event loop is one of the most important components of Javascript that we need to know in order to fully understand the execution flow. As the name suggests, it is a loop that runs over and over again, checking if there’s at least one function in the call stack, and if so, jumps the program execution to that of the function at the top of the call stack.

Let us try to understand the event loop better with an example

Output:

If you’re confused by the order of execution, read on. As you can see, we have three function declarations as well as a number of statements and function calls. Let us go line by line in the program execution. At the start of the program, the event loop of the Javascript is created and is started. The event loop first checks if there’s any function in the call stack. Our call stack currently looks like this:

    |             |
    |             |
    |             |
    |             |
    |             |
    |_____________|

      Call stack

Since the call stack is empty, the program continues its execution onto line 1, where the function sayOne is defined. Since it’s only a definition, the program just saves the function’s code in a variable called sayOne and moves on. At this point, the event loop again checks if there’s a function in the call stack. Since the call stack is still empty, the program moves on to the next line, which is 6. Here, the same steps of actions are repeated where function definition of sayTwo is saved and then the event loop checks the call stack again. The program then moves to line 10 where the same steps repeat for function sayThree.

The program then moves to line 14, where it encounters a statement for the first time. Do keep in mind that the call stack is still empty at this stage. Before executing the console.log statement to print “4" onto the console, the event loop checks if the call stack is empty. Since it is, the program goes ahead with the execution and prints 4 onto the console. The program then moves onto line 15 where it sees that the sayOne function has been called. Hence, it immediately adds this function to the call stack which now looks like this.

    |             |
    |             |
    |             |
    |             |
    |  sayOne()   |
    |_____________|

      Call stack

Before moving on to line 16, the event loop is fired once more to check if the call stack is non-empty. Since the call stack is now not empty, the program then decides to execute the function that is at the top of the call stack i.e. sayOne. When the code of sayOne is being run, in line 2, we see that the sayThree function is being called and hence it gets added to the call stack.

    |             |
    |             |
    |             |
    |  sayThree() |
    |  sayOne()   |
    |_____________|

      Call stack

Before moving on to line 3 in the sayOne function, the event loop is fired once more to check if the stack is non-empty. When it finds out it is, it does two actions at this moment. It first retrieves the function at the top of the stack and then checks to see if the currently running function is the same as it or not. If it was the same, it continues the execution of the current function. If they are not the same (which in our case, they are not), then the program pauses the execution of the current function and jumps to the execution of the topmost function (which is sayThree in this case). So, in line 11, before executing the console.log statement, the event loop once again checks for a non-empty stack, retrieves the topmost function, finds out it is the same as the currently running function and so resumes its code. Line 11 gets called (which results in the console.log statement printing “3" onto the console. Since we have reached the end of function sayThree, it is now removed from the call stack.

    |             |
    |             |
    |             |
    |             |
    |  sayOne()   |
    |_____________|

      Call stack

The execution of the program now returns back to the previous function, which is the sayOne function. At this point, we should note that the execution of this function resumes from where we left it, which is just before line 3. The event loop is fired once again and finds out the stack is non-empty. It sees that the topmost function in the stack is the same as the currently running function sayOne and hence resumes. Line 3 gets called which prints “1” onto the console. We have reached the end of function sayOne and it is promptly removed from the call stack.

    |             |
    |             |
    |             |
    |             |
    |             |
    |_____________|

      Call stack

The program execution then moves back to where it left off from its previous function (which is the global context, in this case). So, the program now returns back to just before line 16. Now the event loop is fired again and it finds out that the call stack is empty. So, it moves on to executing line 16, which prints “5” onto the console.

The rest of the program proceeds like how we discussed so far. At line 17, the sayTwo function gets added to the call stack.

    |             |
    |             |
    |             |
    |             |
    |  sayTwo()   |
    |_____________|

      Call stack

The event loop checks the call stack and runs the sayTwo function. This prints “2” onto the console. The sayTwo function is then removed from the call stack.

    |             |
    |             |
    |             |
    |             |
    |             |
    |_____________|

      Call stack

The event loop is fired again and when it sees that the stack is empty, it checks if there is any more code to be run in the current function. Since there is none, the program finally terminates.

So far in this series, we have only discussed the execution of synchronous code in Javascript. Javascript provides us with asynchronous functions, like the setTimeout function, which is used to delay the execution of a piece of code. We shall see how it fits into the execution flow in Part 3 of this series.

This post was originally published here on Medium.

Asynchronous Javascript - 01 - Single-Threaded Programming and the Call Stack

Kabir Nazir — Sat, 29 Feb 2020 22:11:59 +0000

Javascript is a synchronous language by default. This means that all the statements and functions execute one after the other in a predefined order. Javascript behaves this way because it has only a single thread of execution. Other languages like Java provide a multi-threaded execution environment, wherein there’s the main thread as well as other threads that can be created in runtime to run tasks in parallel. Hence, asynchronicity is quite simple and straightforward to achieve in these languages.

However, since Javascript provides us only with a single thread of execution, we need to understand how certain functions that seem to be asynchronous, like the setTimeout function, are able to run. But before we do that, let’s have a look at how the single-threaded execution flow works.

Single-Threaded Execution

Take the example of this simple program

Output:

    1
    2

In line 1, the program saves a function declaration to a variable ‘sayOne’. Note that it only saves the function declaration but does not call it yet. So, at this point, none of its code is actually run and hence line 2 would not get executed yet. In line 5, it saves another function definition to a variable ‘sayTwo’ (but doesn’t call it yet). In line 9, it calls the function sayOne. At this point, the saved function definition of sayOne is executed, which results in line 2 of the program being executed and the value of “1” being printed onto the console. Similarly, in line10, the program calls the function sayTwo, which leads to line 6 getting executed, which prints the value of “2” onto the console.

The above execution flow seems pretty straightforward and easy to grasp. Javascript executes the program line by line and executes them in that order. However, as you may have seen, the program isn’t truly being executed line by line and there’s some jumping around in the order of execution of lines, due to function calls. We’ll see about it later in this article. Another good thing to note here is that Javascript wouldn’t move on to the next line of execution until the previous line is executed.

For example, let us assume the sayOne function had a complex code that took a lot of time to execute (for example, a second). In this case, when in line 9, the program would wait till the sayOne function is completely executed before moving on to line 10 to execute the sayTwo function there. This is because, as we pointed out earlier, Javascript runs on a single thread of execution which is shared by all functions. Hence, the program waits until the current function is completely executed before moving on.

Let us tweak the above code a bit and try to understand what happens then. Let us add a third function called ‘sayThree’.

Let us now call this function in the code

As you can see, we have called the sayThree function (which prints “3” onto the console) inside the body of function sayOne. Hence, in the execution of the above program, what do you think would happen in line 14 when function sayOne is called? Would the console first log “1” and then move on to executing the code of sayThree, or would it pause its own execution, call the sayThree function, wait for it to complete, and then move on to finally print “1” onto the console?

Well, the output of the above program will be

    3
    1
    2

In order to understand this, we need to understand how Javascript maintains the order of functions internally.

Call Stack

Javascript has something called a call stack, to keep track of the order of functions to be executed. The call stack, as the name suggests, is a stack. Hence, items added to this stack will exit out of the stack in a ‘last in, first out’ order.

In the above program, when the program reaches line 14, the Javascript program sees that the function sayOne is to be called. When this happens, it adds function SayOne to the call stack. So, the stack currently looks like this

    |            |
    |            |
    |            |
    |            |
    |  sayOne()  |
    |____________|

      Call stack

This function remains in the call stack and is popped out only after its execution is completed. The way Javascript works, it always first executes the function at the top of the stack, then pops it out of the stack and then moves to the next function in the stack. Hence, the program now ‘jumps’ into the execution of the function at the top of the stack, which is the sayOne function. The execution of sayOne starts at line 2, where the program sees that the sayThree function is to be called. So, Javascript adds this function too to the call stack. The updated call stack now looks like this

    |             |
    |             |
    |             |
    |  sayThree() |
    |  sayOne()   |
    |_____________|

      Call stack

The program then jumps to the execution of the function at the top of the stack, which is the sayThree function. The code of sayThree function is now run, in which line 11 prints “3” onto the console. The program then sees that it has reached the end of the sayThree function and hence pops it out of the stack. So, the stack now looks like this

    |             |
    |             |
    |             |
    |             |
    |  sayOne()   |
    |_____________|

      Call stack

Javascript then sees that the sayOne function is at the top of the stack and hence, jumps back to where it left off in its execution. Line 3 prints “1” onto the console. Once more, upon reaching the end of sayOne function, Javascript pops it out of the stack, which then looks like

    |             |
    |             |
    |             |
    |             |
    |             |
    |_____________|

      Call stack

After seeing that the stack is empty, the Javascript program then jumps back to where it left off in the original execution, which is to line 15, where it sees that sayTwo function is called. As you might have guessed, sayTwo gets added to the stack

    |             |
    |             |
    |             |
    |             |
    |  sayTwo()   |
    |_____________|

      Call stack

Since it’s the topmost function in the stack, the program’s execution jumps to that of sayTwo, where in line 7, the value of “2” is printed on to the console. Upon reaching the end of the function, it is popped off the stack and the call stack is now empty. There are no more lines to run and hence the program terminates.

While we were discussing the call stack, you might have been a bit confused as to how Javascript ‘jumps’ during its execution to the function at the top of the call stack. How does Javascript know when a new function is added to the stack or when a function is removed from the stack and hence it needs to resume execution of the next function in the stack?

I shall be discussing that and much more in Part 2 of this series.

This post was originally published here on Medium.

DEV Community: Kabir Nazir

Prototype in Javascript - 04 - Using classes to create objects

The class construct

Inheritance in classes

Prototype in Javascript - 03 - The new keyword

The new keyword

Function.prototype

Prototype in Javascript - 02 - The __proto__ property

[[Prototype]]

The __proto__ property

Object.create

Prototype in Javascript - 01 - Object creation

Object creation

The CSS box-sizing property

Box Sizing

Use CSS float property to create columns

How to clear floats in CSS

Clearing the float of the next element

Placing an empty div

Overflow technique

Clearfix technique

Responsive Web Design: Why We Need It and How It’s Implemented

Responsive Web Design

Flexible Layouts

Flexible Media

Media Queries

Asynchronous Javascript - 04 - Promises

Promise

then, catch and finally

Asynchronous Javascript - 03 - The Callback Queue

Callback queue

Asynchronous Javascript - 02 - The Event Loop

Event Loop

Asynchronous Javascript - 01 - Single-Threaded Programming and the Call Stack

Single-Threaded Execution

Call Stack

The `class` construct

Prototype in Javascript - 02 - The proto property

The proto property