Constructors in objects created with classes

Do objects created with classes always come with constructors?

Your code so far


// Only change code below this line

// Only change code above this line

const carrot = new Vegetable('carrot');
console.log(carrot.name); // Should display 'carrot'

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36

Challenge: Use class Syntax to Define a Constructor Function

Link to the challenge:

Yes, if you use the class keyword to create a class then there will always be a constructor. Usually you will define the constructor but if you don’t then JS will provide a default constructor.

Is there a specific reason for asking this question you need help with?

1 Like

I’m just wondering if all objects created with classes come with constructors, and yes, thank you, question answered
And yes, there is a reason, I am trying to dissect class objects at the moment so I can understand them better
I’m trying to still wrap my head around class objects before I continue, because I see and know how important they are within JS. I don’t really want to continue onto further lessons in case this subject goes deeper within the next few lessons.

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.

1 Like

Well, from what I can see from all this is what objects are really capable of (even inserting arrays within these class objects, oh and functions, where values normally go)
I can understand why so many students give up (apparently over 90% drop out) but yeah, line upon line for me :wink: but…to never give up, as long as there are answers (somewhere…there must be one) I keep moving
What you’ve shown me is how complex and complicated JS can be but all good, I’ll get there…
Yeah it looks very complicated…especially with what you can actually DO with this language…
I’m currently busy with getters and setters right now so give me chance :wink: lol

I’m going to bookmark this page Dan and once I’m a bit more “savvy” around JS I’ll come back to this. But I’m also understanding now what JS is actually built of, very interesting and it’s also quite interesting how things are built within JS to perform different functions on the web

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.