- Home
- /
- Tutorials
- /
- JavaScript Tutorial
- /
- JavaScript Object Constructors
JavaScript Objects
JavaScript Object Constructors
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. newcreates the object and pointsthisat 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.
