JavaScript

Static vs Dynamic Binding in JavaScript

In JavaScript, Binding is the process of linking the correct function definition with a function call or associating a value to a variable. A memory address is assigned to each function definition at the compilation phase. When a particular function is invoked, the program execution shifts control to that specific memory address and fetches the function code stored at the executed location. This mechanism is known as binding.

Binding in JavaScript is divided into two types: “Static Binding” and “Dynamic Binding”. If all of the required information related to function calls and variable assignment is already known at compile-time, it is called Static Binding. In the other case, Dynamic Binding occurs when the required information is acknowledged at run-time.

This write-up will explain Static Binding and Dynamic Binding in JavaScript with the help of appropriate examples. So, let’s start!

Static Binding in JavaScript

JavaScript “Static Binding” occurs when a compiler recognizes all required information related to assigning values to variables or invoking a function, at the compilation phase. It is also known as “Compile-time Binding” or “Early Binding”.

The JavaScript Static binding technique is implemented during the coding process, making the program more efficient because all variable values and the function calls are predefined in this type of binding. However, it also affects code flexibility.

Some examples of the Static Binding procedure are: “Operator Overloading” and “Function Overloading”.

Now, let’s check out how Static binding works behind the Operator Overloading and Function Overloading in JavaScript.

Operator Overloading with Static Binding in JavaScript

JavaScript permits us to redefine how operators work for various user-defined types such as structures and objects. This functionality is known as Operator Overloading.

Example: Operator Overloading with Static Binding in JavaScript

Since operator overloading provides the functionality to change the behavior of the specified operator at compile-time, we will use this functionality for redefining the behavior of the “+” operator:

For instance, you can utilize the “+” operator to add two numbers:

3 + 6

Or to concatenate strings:

'linux' + ' ' + 'hint'

Or to concatenate numbers with strings:

1 + ' article'

Output

At compile-time, Operator “+” is overloaded based on the type of data we have used. For instance, “3” + “6” created a new number “9”, whereas, “1” + “article” generated a “1 article” string. That’s how we have implemented operator overloading with the help of static binding.

Function Overloading with Static Binding in JavaScript

Function Overloading is another example of static binding in which multiple functions are defined with the same name having different parameters. The function call binds itself to the correct function based on the passed arguments at the compilation time.

Example 1: Function Overloading with Static Binding in JavaScript

In Function Overloading, the added methods can have the same name, but to overload them, you have to pass different arguments, changing the results accordingly.

For instance, we have created two functions with the same name. The first “show()” function accepts two arguments, “x” and “y,” and it returns their sum:

function show(x,y) {

 return x+y;

}

The second “show()” function will accept and return the passed “z” argument:

function show(z) { 
 return z;

}

Now when we pass “3” and “5” values as arguments, the “show(3,5)” function call will bind itself to the first show() function, which accepts has two parameters, whereas when one argument is specified, the “show(2)” function call will bind with the second show() function:

show (3,5);

Output

show(2);

Output

In the above-given example, both added “show()” functions are bound statistically at the compilation time. As a result, no time will be wasted determining which function to call, which results in fast and efficient program execution.

We will now move ahead and discuss Dynamic Binding in JavaScript.

Dynamic Binding in JavaScript

“Dynamic Binding” in JavaScript is the process of assigning a value to a variable or invoking a function at run-time. It is also known as “Runtime Binding” or “Late Binding” because the binding of function calls to the correct function or assignment of values to the respective variables is delayed until the run-time.

Dynamic Binding enables the program to be more flexible by permitting users to choose what function should be invoked and what value to assign to a variable at the execution time. However, it slows the execution, as all of the specified information is delivered at run-time.

Method Overriding” is an excellent example of the utilization of Dynamic Binding in JavaScript.

Method Overriding with Dynamic Binding in JavaScript

In JavaScript, Method Overriding is a mechanism that allows a child class to implement the method of the parent class in a different manner. In this way, the child class overrides the parent class method with the help of dynamic binding.

Example: Method Overriding with Dynamic Binding in JavaScript

In this example, we will override the “speak()” method of the “Birds” (parent) class. For this purpose, we will further define two “speak()” methods, first in the “Owl” class and second in the “Pigeon” class, and then invoke the “speak()” method of both of these child classes:

class Birds {

 speak() {

  console.log("Birds have different sounds");

 }

}

class Owl extends Birds {

 speak() {

  console.log("Owl says Screeeeee");

 }

}

class Pigeon extends Birds {

 speak() {

  console.log("Pigeon says coo COO coo");

 }

}

const owl = new Owl();

const pigeon = new Pigeon();

owl.speak();

pigeon.speak();

It can be seen from the below output the speak() method of Birds class is overridden by its child classes because of the Dynamic Binding:

That was all about Static vs Dynamic Binding in JavaScript. You can further explore this topic according to your requirements.

Conclusion

Static Binding in JavaScript occurs when a compiler recognizes all of the required information related to the assignment of variable values or invoking a function at the compilation phase, whereas Dynamic Binding is assigning a value to a variable or invoking an invoking value a function at run-time. Function overloading and Operator overloading are based on Static Binding, and Method Overriding is considered an example of Dynamic Binding. This write-up discussed Static Binding and Dynamic Binding in JavaScript with the help of suitable examples.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.