Difference between: `function Person(){}`, `const person = Person()`, and `const person = new Person()` in JavaScript?

TL;DR

• function Person(){}: A function declaration in JavaScript. It can be used as a regular function or as a constructor.
• const person = Person(): Calls Person as a regular function, not a constructor. If Person is intended to be a constructor, this will lead to unexpected behavior.
• const person = new Person(): Creates a new instance of Person, correctly utilizing the constructor function to initialize the new object.

Function declaration

function Person(){} is a standard function declaration in JavaScript. When written in PascalCase, it follows the convention for functions intended to be used as constructors.

function Person(name) {
  this.name = name;
}

This code defines a function named Person that takes a parameter name and assigns it to the name property of the object created from this constructor function. When the this keyword is used in a constructor, it refers to the newly created object.

Function call

const person = Person() simply invoke the function's code. When you invoke Person as a regular function (i.e., without the new keyword), the function does not behave as a constructor. Instead, it executes its code and returns undefined if no return value is specified and that gets assigned to the variable intended as the instance. Invoking as such is a common mistake if the function is intended to be used as a constructor.

function Person(name) {
  this.name = name;
}

const person = Person('John'); // Throws error in strict mode
console.log(person); // undefined
console.log(person.name); // Uncaught TypeError: Cannot read property 'name' of undefined

In this case, Person('John') does not create a new object. The person variable is assigned undefined because the Person function does not explicitly return a value. Attempting to access person.name throws an error because person is undefined.

Constructor call

const person = new Person() creates an instance of the Person object using the new operator, which inherits from Person.prototype. An alternative would be to use Object.create, such as: Object.create(Person.prototype) and Person.call(person, 'John') initializes the object.

function Person(name) {
  this.name = name;
}

const person = new Person('John');
console.log(person); // Person { name: 'John' }
console.log(person.name); // 'John'

// Alternative
const person1 = Object.create(Person.prototype);
Person.call(person1, 'John');
console.log(person1); // Person { name: 'John' }
console.log(person1.name); // 'John'

In this case, new Person('John') creates a new object, and this within Person refers to this new object. The name property is correctly set on the new object. The person variable is assigned the new instance of Person with the name property set to 'John'. And for the alternative object creation, Object.create(Person.prototype) creates a new object with Person.prototype as its prototype. Person.call(person, 'John') initializes the object, setting the name property.

Follow-Up Questions

• What are the differences between function constructors and ES6 class syntax?
• What are some common use cases for Object.create?

Further reading

• MDN Web Docs: Object prototypes
• Differences between Class and Function Constructors
• How this keyword works in JavaScript?