You are probably used to thinking about functions, methods, and class constructors as three distinct things if you are experienced with object-oriented programming. However, in JavaScript, they are simply three alternative ways to use the same concept.

In object-oriented programming, a class simply refers to a property that all objects that belong to that class share. You may claim that your pet is a dog in real life, but in programming we can say that "abc" is an object of the String class.

Simply said, an object is a collection of data (properties) and functions (sometimes known as methods) that manipulate the data. That's it; a method is just a function contained within an object.

In JavaScript, a function is a piece of reusable code that has the potential to take input values, perhaps do something with them, and potentially return a value. Every function in JavaScript is also an object of the type Function. Therefore, a function has data and methods (other functions) associated with it, just like any other object.

No JavaScript construct directly relates to a Class. However, if a function is called with the new keyword preceding it, it is referred to as a constructor since it creates and returns a new object. The collection of all objects that were generated using the same function constructor is then known as a class.

functions: Simplest applications of function calls:

function helloWorld(name) {
  return "hello world, " + name;
}

helloWorld("JS"); // "hello world JS"

In JavaScript, functions that are object attributes are what are referred to as methods.

var obj = {
  helloWorld : function() {
    return "hello world, " + this.name;
  },
  name: 'John'
}
obj.helloWorld(); // // "hello world John"

Take note of how helloWorld refers to these obj. attributes. Here, it is obvious?or you may have previously realised it?that this is tied to the object. The intriguing aspect, though, is that we can duplicate a reference to the same function, helloWorld, into a different object and have a different result. I'll see:

var obj2 = {
  helloWorld : obj.helloWorld,
  name: 'John'
}
obj2.helloWorld(); // "hello world John"

You might be curious as to what happens during a method call in this context. In this instance, the expression itself will define how this will be bound. With receiver object obj2, the expression obj2.helloWorld() invokes the helloWorld property of object obj.

Constructors are the third application of functions. Constructors are defined with function, just like function and method.

function Employee(name, age) {
  this.name = name;
  this.age = age;
}

var emp1 = new Employee('John Doe', 28);
emp1.name; // "John Doe"
emp1.age; // 28

Contrary to method and function calls, a constructor  call such as new Employee("John Doe", 28) generates a brand-new object, passes it as the value of this, and implicitly returns the new object as its outcome.

Initializing the object is the constructor??function's main responsibility.

Don't get too caught up in terminology; instead, attempt to understand what each term means so that, over time, you'll have a good idea of where your ?objects, functions, methods, and constructors are located and how they interact.


Recommended Posts

View All

What is the Temporal Dead Zone in JavaScript?


The time frame in which access to the let and const declarations is prohibited is known as the Temporal Dead Zone.

Essential Bootstrap 4 Components for Web App


Bootstrap 4 offers a selection of reusable and customizable Bootstrap 4 components that speed up and simplify development.

What is prototype and prototype chaining in JavaScript


This article explains the concept of prototype and prototype chaining in JavaScript. Learn how prototypes work, how they are used to create inheritanc...

Top 10 ES6 Features Every JavaScript Developer Must Know


The specification for JavaScript implementation is provided by ES6. Learn about its recently added ES6 features that make writing JavaScript easier!

What is the difference between Call, Apply and Bind


Looking to learn about the differences between Call, Apply, and Bind in JavaScript? This article breaks down the nuances of each method and provides c...