JavaScript Objects
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
javascript
function Person(name) {
this.name = name;
}
const ada = new Person("Ada");
console.log(ada.name);The output is Ada.
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
javascript
function Name(parameter) {
this.property = parameter;
}
const item = new Name(value);Forgetting new is the classic mistake.
Each object built this way gets its own copy of the properties.
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.
A method can be assigned inside the constructor.
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.
Putting the method on the prototype means one shared copy.
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.
Without new, this is not a fresh object and the function returns undefined.
This is why the capital letter convention matters.
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.
A class is the modern way to write the same thing.
It uses prototypes underneath, but the syntax is much easier to read.
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
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>Run the above example in the Try It Editor.
Try a third person:
Create one more with new Person(...) and describe them.
new.new creates the object and points this at it.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.