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, " +;
  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) { = name;
  this.age = age;

var emp1 = new Employee('John Doe', 28);; // "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

Global Variables in JavaScript Explained

Global variables are defined outside of functions or alongside window objects for use throughout the program

What is the first class function in JavaScript ?

Learn about first-class functions in JavaScript! Find out what they are, how they work, and how they can be used to enhance your coding skills.

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...

Calculate the length of an associative array using JavaScript

Associative arrays are regular arrays in JavaScript where an element is present at a specific index.

Learn JavaScript Closures with Code Examples

Master JavaScript closures with code examples! Our comprehensive guide explains how closures work and how to use them in your code. Start learning now...