JavaScript Fundamentals

Constructor Functions

Blueprints for creating multiple objects with the same structure

Find videos you like?

Save to resource drawer for future reference!

What are Constructor Functions?

Constructor functions are templates for creating multiple objects with the same properties and methods. Like a cookie cutter - define once, use many times!

Cookie Cutter Analogy

Instead of manually creating each object, use a constructor function as a mold. One template creates unlimited objects with the same structure!

Creating a Constructor Function

Use capital first letter and the new keyword

Basic Structure

function Person(name, age) {
  this.name = name;      // Property
  this.age = age;        // Property
  
  this.greet = function() {  // Method
    console.log('Hi, I am ' + this.name);
  };
}

// Create instances with 'new'
const person1 = new Person('Alice', 25);
const person2 = new Person('Bob', 30);

Convention: Constructor functions start with a capital letter (Person, Car, User) to distinguish them from regular functions!

Basic Constructor Example

Creating a Person constructor

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

The "new" Keyword

What happens behind the scenes

Four Steps of "new"

Create empty object

Creates a new empty object: {}

Set "this" to new object

Points this to the new object

Execute constructor code

Runs the function, adding properties to this

Return the object

Automatically returns the new object (no return needed!)

What 'new' Does

Behind the scenes magic

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Real-World Examples

Common use cases

Practical Constructors

User Account

function User(username, email) {
  this.username = username;
  this.email = email;
  this.isActive = true;
  
  this.login = function() {
    console.log(`${this.username} logged in`);
  };
}

Product

function Product(name, price) {
  this.name = name;
  this.price = price;
  
  this.discount = function(percent) {
    return this.price * (1 - percent / 100);
  };
}

Bank Account

function BankAccount(owner, balance) {
  this.owner = owner;
  this.balance = balance;
  
  this.deposit = function(amount) {
    this.balance += amount;
  };
  
  this.withdraw = function(amount) {
    if (amount <= this.balance) {
      this.balance -= amount;
    }
  };
}

Real-World Constructor Examples

Practical applications

javascript

code

DarkEditable

// User constructor
function User(username, email) {
  this.username = username;
  this.email = email;
  this.isActive = true;
  
  this.login = function() {
    console.log(`${this.username} logged in`);
  };
  
  this.logout = function() {
    console.log(`${this.username} logged out`);
  };
}

const user1 = new User('alice123', 'alice@example.com');
user1.login();  // 'alice123 logged in'

// Product constructor
function Product(name, price, category) {
  this.name = name;
  this.price = price;
  this.category = category;
  
  this.applyDiscount = function(percent) {
    this.price = this.price * (1 - percent / 100);
  };
  
  this.getInfo = function() {
    return `${this.name} - $${this.price}`;
  };
}

const laptop = new Product('Laptop', 1000, 'Electronics');
console.log(laptop.getInfo());  // 'Laptop - $1000'

laptop.applyDiscount(20);
console.log(laptop.getInfo());  // 'Laptop - $800'

// Bank Account constructor
function BankAccount(owner, initialBalance) {
  this.owner = owner;
  this.balance = initialBalance || 0;
  
  this.deposit = function(amount) {
    this.balance += amount;
    console.log(`Deposited $${amount}. New balance: $${this.balance}`);
  };
  
  this.withdraw = function(amount) {
    if (amount <= this.balance) {
      this.balance -= amount;
      console.log(`Withdrew $${amount}. New balance: $${this.balance}`);
    } else {
      console.log('Insufficient funds');
    }
  };
  
  this.getBalance = function() {
    return `$${this.balance}`;
  };
}

const account = new BankAccount('Alice', 1000);
account.deposit(500);   // Deposited $500. New balance: $1500
account.withdraw(200);  // Withdrew $200. New balance: $1300
console.log(account.getBalance());  // '$1300'

Console Output

Click "Run Code" to see output here...

Prototype Methods (Better Way)

Share methods across all instances

More Efficient

Instead of creating a new function for each instance, add methods to the prototype so all instances share the same function!

❌ Less Efficient

function Person(name) {
  this.name = name;
  
  // New function for EACH instance
  this.greet = function() {
    console.log('Hi ' + this.name);
  };
}

// 100 instances = 100 copies of greet()

✅ More Efficient

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

// ONE function shared by ALL instances
Person.prototype.greet = function() {
  console.log('Hi ' + this.name);
};

// 100 instances = 1 copy of greet()

Prototype Methods

Efficient method sharing

javascript

code

DarkEditable

// Constructor with properties only
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// Add methods to prototype (shared by all instances)
Person.prototype.greet = function() {
  console.log(`Hello, I'm ${this.name}`);
};

Person.prototype.getAge = function() {
  return this.age;
};

Person.prototype.haveBirthday = function() {
  this.age++;
  console.log(`Happy birthday! Now ${this.age} years old`);
};

// Create instances
const alice = new Person('Alice', 25);
const bob = new Person('Bob', 30);

// Methods work for all instances
alice.greet();  // 'Hello, I'm Alice'
bob.greet();    // 'Hello, I'm Bob'

alice.haveBirthday();  // 'Happy birthday! Now 26 years old'

// Check if method is shared
console.log(alice.greet === bob.greet);  // true (same function!)

// Real-world: Car constructor
function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
  this.mileage = 0;
}

Car.prototype.drive = function(miles) {
  this.mileage += miles;
  console.log(`Drove ${miles} miles. Total: ${this.mileage}`);
};

Car.prototype.getInfo = function() {
  return `${this.year} ${this.make} ${this.model}`;
};

const car1 = new Car('Toyota', 'Camry', 2020);
car1.drive(100);  // 'Drove 100 miles. Total: 100'
console.log(car1.getInfo());  // '2020 Toyota Camry'

Console Output

Click "Run Code" to see output here...

instanceof Operator

Check if object was created by constructor

Type Checking

Use instanceof to check if an object was created by a specific constructor

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

const alice = new Person('Alice');

console.log(alice instanceof Person);  // true
console.log(alice instanceof Object);  // true (all objects)
console.log(alice instanceof Array);   // false

instanceof Examples

Checking object types

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Key Takeaways

Do This ✅

• Use capital first letter for constructors
• Always use new keyword
• Add methods to prototype
• Use instanceof to check types
• Set properties in constructor body

Avoid This ❌

• Don't forget new keyword
• Don't add methods inside constructor (use prototype)
• Don't use lowercase for constructor names
• Don't call constructor like regular function
• Don't return values from constructor

Constructor Pattern

// 1. Define constructor (capital first letter)
function MyConstructor(param1, param2) {
  this.property1 = param1;
  this.property2 = param2;
}

// 2. Add methods to prototype
MyConstructor.prototype.method1 = function() {
  // use this.property1, this.property2
};

// 3. Create instances with 'new'
const instance = new MyConstructor(value1, value2);

Modern Alternative

Constructor functions are still valid, but modern JavaScript uses ES6 Classes which provide cleaner syntax. They work the same way under the hood!

Previous Topic

Hoisting

How JavaScript moves variable and function declarations to the top of their scope.

Next Topic

Prototypes

Understanding prototypal inheritance and the prototype chain.

Ask a Question

Have a question about Constructor Functions? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript Fundamentals

Constructor Functions

Blueprints for creating multiple objects with the same structure

Find videos you like?

Save to resource drawer for future reference!

What are Constructor Functions?

Constructor functions are templates for creating multiple objects with the same properties and methods. Like a cookie cutter - define once, use many times!

Cookie Cutter Analogy

Instead of manually creating each object, use a constructor function as a mold. One template creates unlimited objects with the same structure!

Creating a Constructor Function

Use capital first letter and the new keyword

Basic Structure

function Person(name, age) {
  this.name = name;      // Property
  this.age = age;        // Property
  
  this.greet = function() {  // Method
    console.log('Hi, I am ' + this.name);
  };
}

// Create instances with 'new'
const person1 = new Person('Alice', 25);
const person2 = new Person('Bob', 30);

Convention: Constructor functions start with a capital letter (Person, Car, User) to distinguish them from regular functions!

Basic Constructor Example

Creating a Person constructor

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

The "new" Keyword

What happens behind the scenes

Four Steps of "new"

Create empty object

Creates a new empty object: {}

Set "this" to new object

Points this to the new object

Execute constructor code

Runs the function, adding properties to this

Return the object

Automatically returns the new object (no return needed!)

What 'new' Does

Behind the scenes magic

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Real-World Examples

Common use cases

Practical Constructors

User Account

function User(username, email) {
  this.username = username;
  this.email = email;
  this.isActive = true;
  
  this.login = function() {
    console.log(`${this.username} logged in`);
  };
}

Product

function Product(name, price) {
  this.name = name;
  this.price = price;
  
  this.discount = function(percent) {
    return this.price * (1 - percent / 100);
  };
}

Bank Account

function BankAccount(owner, balance) {
  this.owner = owner;
  this.balance = balance;
  
  this.deposit = function(amount) {
    this.balance += amount;
  };
  
  this.withdraw = function(amount) {
    if (amount <= this.balance) {
      this.balance -= amount;
    }
  };
}

Real-World Constructor Examples

Practical applications

javascript

code

DarkEditable

const user1 = new User('alice123', 'alice@example.com');
user1.login();  // 'alice123 logged in'

const laptop = new Product('Laptop', 1000, 'Electronics');
console.log(laptop.getInfo());  // 'Laptop - $1000'

laptop.applyDiscount(20);
console.log(laptop.getInfo());  // 'Laptop - $800'

Console Output

Click "Run Code" to see output here...

Prototype Methods (Better Way)

Share methods across all instances

More Efficient

Instead of creating a new function for each instance, add methods to the prototype so all instances share the same function!

❌ Less Efficient

function Person(name) {
  this.name = name;
  
  // New function for EACH instance
  this.greet = function() {
    console.log('Hi ' + this.name);
  };
}

// 100 instances = 100 copies of greet()

✅ More Efficient

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

// ONE function shared by ALL instances
Person.prototype.greet = function() {
  console.log('Hi ' + this.name);
};

// 100 instances = 1 copy of greet()