Can an arrow function be used as a constructor? Why?

👨‍💻 Frontend Developer 🟠 May come up 🎚️ Medium
#JavaScript #Functions #JS Basics

Brief Answer

No, arrow functions cannot be used as constructors. They don’t have the internal [[Construct]] property, which is necessary for working with the [new] keyword. Moreover, arrow functions don’t have their own [this], making them unsuitable for creating objects.

// ❌ This doesn't work
const User = (name) => {
  this.name = name;
};
 
// new User('John'); // TypeError: User is not a constructor
 
// ✅ This is correct
function User(name) {
  this.name = name;
}
 
const user = new User('John');
console.log(user.name); // 'John'

Full Answer

Arrow functions are like lazy workers who don’t want to take responsibility for creating something new. They can’t be constructors, and the reason is very simple! 🚫

Why Arrow Functions Can’t Be Constructors

Arrow functions are simplified functions that lack some important capabilities of regular functions:

No [[Construct]] Property

// Regular functions have [[Construct]] property
function RegularFunction() {}
new RegularFunction(); // Works
 
// Arrow functions don't have it
const ArrowFunction = () => {};
// new ArrowFunction(); // TypeError!

No Own this

// Regular constructor function
function User(name) {
  this.name = name; // this — new object
}
 
// Arrow function
const UserArrow = (name) => {
  this.name = name; // this is taken from outer scope!
};
 
// new UserArrow('John'); // Error!

Simple Examples

Attempting to Use as Constructor

const Car = (brand) => {
  this.brand = brand;
};
 
// ❌ Doesn't work
// const myCar = new Car('Toyota'); // TypeError: Car is not a constructor

Correct Way

// ✅ Regular function as constructor
function Car(brand) {
  this.brand = brand;
}
 
const myCar = new Car('Toyota');
console.log(myCar.brand); // 'Toyota'

What Happens “Under the Hood”

Calling Regular Function with new

function User(name) {
  this.name = name;
}
 
// new User('John') does:
// 1. Creates empty object {}
// 2. Sets this = {}
// 3. Executes function code
// 4. Returns this

Attempting to Call Arrow Function with new

const User = (name) => {
  this.name = name;
};
 
// new User('John') can't:
// ❌ No [[Construct]] property
// ❌ No own this
// ❌ Can't create new object

When to Use Arrow Functions

For Simple Operations

const add = (a, b) => a + b;
const numbers = [1, 2, 3].map(n => n * 2);

For Preserving Context

const obj = {
  name: 'John',
  friends: ['Peter', 'Mary'],
  showFriends() {
    this.friends.forEach(friend => {
      console.log(this.name + ' is friends with ' + friend);
    });
  }
};

When to Use Regular Functions

For Constructors

function Product(name, price) {
  this.name = name;
  this.price = price;
}
 
const product = new Product('Book', 500);

For Object Methods

const calculator = {
  value: 0,
  add(num) {
    this.value += num;
    return this;
  }
};

Common Mistakes

Attempting to Use Arrow Function as Constructor

// ❌ Common mistake
const CreateUser = (name) => {
  this.name = name;
};
 
// new CreateUser('John'); // TypeError!
 
// ✅ Correct solution
function CreateUser(name) {
  this.name = name;
}
 
new CreateUser('John'); // Works!

Confusion with Syntax

// ❌ Syntax error
// new (name => { this.name = name })('John');
 
// ✅ Correct syntax for constructor function
new function(name) { this.name = name; }('John');

Simple Rules

  1. Arrow functions — cannot be used as constructors 🚫
  2. No [[Construct]] — arrow functions don’t have this property ⚠️
  3. No this — arrow functions don’t have their own [this] ❌
  4. For constructors — use regular functions 🏗️
  5. For simple functions — arrow functions are convenient ✅

Arrow functions are good for simple tasks, but not suitable for creating objects. Regular functions are needed for that! 💪


Want more articles to prepare for interviews? Subscribe to EasyAdvice, bookmark the site and improve yourself every day 💪