All objects are created using a constructor function, that’s how objects are created in JavaScript. The entire language is built primarily with objects (and an object is a collection of properties).
When you write
const example = { name: "Dan" }
The JS runtime (the program that evaluates and runs the code) being used will first construct a basic object, then evaluate the property name: "Dan"
and assign that. So could write the above as
const example = new Object(); // <-- call the constructor
example.name = "Dan";
A constructor is a function that returns an object. The new
keyword is important here because it tells the runtime to construct an object using the function that comes after it.
Classes enable you to create types of objects.
{ name: "Dan" }
, that’s going to just create an object of the type of Object
, just a basic object. Which has some properties attached to it, some useful functions – there’s toString()
for example, which [natch] renders the object as a string.
const example = ["this", "is", "an", "array"]
, that’s going to construct an object of the type Array
. It’s like writing:
const example = new Array(); // <-- call the constructor
example[0] = "this";
example[1] = "is";
example[2] = "an";
example[3] = "array";
Array
type objects do a few special things, and you can’t really copy how they are defined or how they work accurately, but:
// constructor
function BadArray() {
this.length = 0;
}
BadArray.prototype.push = function (value) {
this[this.length] = value;
this.length = this.length + 1;
return this.length;
}
BadArray.prototype.pop = function() {
this.length = this.length - 1;
const lastItem = this[this.length];
delete this[this.length];
return lastItem;
}
And using it:
const example = new BadArray()
console.log(example)
// { length: 0 }
example[0] = "this";
example[1] = "is";
example[2] = "an";
example[3] = "array";
console.log(example)
// { 0: "this", 1: "is", 2: "an", 3: "array", length: 4 }
example.push("it is bad")
console.log(example)
// { 0: "this", 1: "is", 2: "an", 3: "array", 4: "it is bad", length: 5 }
example.pop()
console.log(example)
// { 0: "this", 1: "is", 2: "an", 3: "array", length: 4 }
class
is something called syntactic sugar. It’s some syntax (the characters and keywords: class
, followed by an opening {
, then some functions that you write like functionName() { /* things the function does */ }
, then a closing }
) that you can use instead of writing constructor functions and their associated functions in the above way. it makes it [IMO] clearer, this works exactly the same as above:
class BadArray () {
// this is the same thing as the `BadArray` function shown above:
constructor() {
this.length = 0;
}
push(value) {
this[this.length] = value;
this.length = this.length + 1;
return this.length;
}
pop() {
this.length = this.length - 1;
const lastItem = this[this.length];
delete this[this.length];
return lastItem;
}
}
As the length in my bad array always starts at 0, I can do this:
class BadArray () {
length = 0;
push(value) {
this[this.length] = value;
this.length = this.length + 1;
return this.length;
}
pop() {
this.length = this.length - 1;
const lastItem = this[this.length];
delete this[this.length];
return lastItem;
}
}
That’s basically exactly the same, but I haven’t explicitly defined the constructor
. JavaScript still calls a constructor function though, missing it off is just another piece of syntactic sugar.
Don’t worry about classes too much. Yes, because JS is built using objects, object construction happens all the time and understanding what JS is doing is important. But you don’t have to use them explicitly at all to write JS, and in very many contexts you wont.