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

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

How do you decode or encode a URL in JavaScript?


Learn how to encode and decode URLs in JavaScript with this comprehensive guide. Avoid common mistakes and ensure data security. Read more now.

Difference between var and let in JavaScript


Learn the difference between var and let in JavaScript. Understand variable hoisting, scope, and how they affect your code's behavior. Get started now...

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

Understanding Hoisting in JavaScript


Learn about hoisting in JavaScript: how variables and functions are moved to the top of their scope during compilation, affecting code behavior.