Skip to main content

JavaScript Objects

JavaScript Object Constructors

Written by Published

A JavaScript constructor function builds many objects with the same shape.

Writing out the same object by hand ten times is repetitive and easy to get wrong.

A constructor is a template you call with the new keyword.

Example

Example

javascript

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

const ada = new Person("Ada");

console.log(ada.name);

The output is Ada.

What is a Constructor?

A constructor is an ordinary function intended to be called with new.

new creates an empty object, points this at it, and returns it.

By convention the name starts with a capital letter.

Syntax

Syntax

javascript

function Name(parameter) {
  this.property = parameter;
}

const item = new Name(value);

Forgetting new is the classic mistake.

Several Properties

Each object built this way gets its own copy of the properties.

Example

Example

javascript

function Car(brand, year) {
  this.brand = brand;
  this.year = year;
}

const a = new Car("Toyota", 2021);
const b = new Car("Honda", 2019);

console.log(a.brand + " " + b.brand);

The two objects are completely separate.

Adding a Method

A method can be assigned inside the constructor.

Example

Example

javascript

function Person(name) {
  this.name = name;
  this.greet = function () {
    return "Hello " + this.name;
  };
}

console.log(new Person("Ada").greet());

Every object gets its own copy of the function, which uses more memory.

Sharing Methods on the Prototype

Putting the method on the prototype means one shared copy.

Example

Example

javascript

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

Person.prototype.greet = function () {
  return "Hi " + this.name;
};

console.log(new Person("Grace").greet());

Every instance can use it, but only one function exists.

Forgetting new

Without new, this is not a fresh object and the function returns undefined.

This is why the capital letter convention matters.

Example

Example

javascript

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

const good = new Person("Ada");

console.log(good.name);

Calling Person("Ada") without new would give undefined.

Classes Do This More Clearly

A class is the modern way to write the same thing.

It uses prototypes underneath, but the syntax is much easier to read.

Example

Example

javascript

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return "Hey " + this.name;
  }
}

console.log(new Person("Alan").greet());

Prefer classes in new code; constructors are worth knowing for older code.

Complete Example

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Object Constructors</title>
</head>
<body>

  <h1>JavaScript Object Constructors</h1>

  <p id="result"></p>

  <script>
    function Person(name, role) {
      this.name = name;
      this.role = role;
    }

    Person.prototype.describe = function () {
      return this.name + " is a " + this.role;
    };

    const ada = new Person("Ada", "mathematician");
    const alan = new Person("Alan", "logician");

    document.getElementById("result").innerHTML =
      ada.describe() + "<br>" + alan.describe();
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try a third person:

Create one more with new Person(...) and describe them.

Important Points

  • A constructor is a function called with new.
  • new creates the object and points this at it.
  • Constructor names start with a capital letter by convention.
  • Methods on the prototype are shared by every instance.
  • Classes are the modern, clearer way to do the same thing.

Conclusion

Constructor functions build many objects from one template.

They are how JavaScript worked before classes existed, and classes still use them underneath.

Understanding them makes the classes section much easier.