In what sense does a Constructor Function create an object?

JavaScript
1

Tell us what’s happening:
According to the notes in this exercise ( ES6: Use class Syntax to Define a Constructor Function), we’ll learn more about Constructor Functions in a later unit, but just trying to get my head around in what sense they create an object, since its a brand new concept in the curriculum. The example is as follows:


class SpaceShuttle {
  constructor(targetPlanet) {
    this.targetPlanet = targetPlanet;
  }
}
const zeus = new SpaceShuttle('Jupiter');

Is it correct that this creates an object with the following name/property/value?: SpaceShuttle {targetPlanet: Jupiter}

And the solved exercise is as follows:

class Vegetable {
constructor(vegetable) {
  this.name = vegetable;
}};

const carrot = new Vegetable('carrot');

Is it correct that this creates an object with the following name/property/value?: Vegetable {name: carrot}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36.

Challenge: Use class Syntax to Define a Constructor Function

Link to the challenge:

3

const does not create the object, new or Object.create does.

2 Likes
4

The constructor method is a special method for CREATING and initializing an object created within a class .
Then why does developer mozzila says it does?

1 Like
5

const is not an abbreviation for constructor.

2 Likes
6

It is correct that it creates an object like you describe, but it’s the new operator that’s doing it. The class syntax is syntactic sugar for this:

function SpaceShuttle (targetPlanet) {
  this.targetPlanet = targetPlanet;
}

If you try to run that like SpaceShuttle("Mars") it will just run like a normal function and try to assign to whatever this is (likely the window object in a browser)

But if you run it like new SpaceShuttle("Mars"), it will create a new object it of thin air, and assign to that instead.

Using the class syntax instead prevents you calling it without new (you’ll get an error). But the constructor function is directly equivalent to what I’ve written there.

1 Like
7

Thanks, Dan! That helps me see the distinction between the separate work being done by class and new.

8

And actually, Dan, thinking more about your answer, and experimenting with console.log(), I think I was wrong in describing the objects that are created above. It looks like the names of the objects created above are different, and correspond to the name of the const. So as follows:

zeus {targetPlanet: Jupiter}
rather than SpaceShuttle {targetPlanet: Jupiter}

carrot {name: carrot}
rather than Vegetable {name: carrot}

I had thought that Vegetable and SpaceShuttle were names of the objects being created. I don’t fully understand it yet, but I think Vegetable and SpaceShuttle are something more like just names of the functions in the class syntactic sugar (as you put it).

9

I’m not sure what you’re looking at this in. The names you’re seeing are just the variable that particular object is assigned to. Chrome prints the object type (SpaceShuttle {), my Firefox just prints Object { for some reason.

Nevertheless, what you are creating are types of objects, so SpaceShuttle is an object that is constructed using the function SpaceShuttle

10

Hi Dan. I’m using Chrome, but I’m just looking at this in the FCC environment. I guess I am confused about what is technically the object that is created, because, taking the Vegetable/carrot example again:

class Vegetable {
constructor(name){
this.name = name;}}
const carrot = new Vegetable(‘carrot’);

I get the following from console.log in the FCC environment:

console.log(carrot) // prints {name: 'carrot' } console.log(Vegetable) // prints [Function: Vegetable]

The first of those, i.e., { name: ‘carrot’ }, looks like an object to me, whereas the second looks like an array–moreover, an array of a kind I don’t understand yet. The same thing happens with the other example… That is, if I console log the initial variable, I get:

console.log(SpaceShuttle) // prints [Function: SpaceShuttle]

But if I console log the variable at the end, I get something that looks like an object to me:

console.log(zeus) // prints { targetPlanet: 'Jupiter' }

So it seems to me that the actual object being produced by the constructor function is the one produced when we “call” the function by using “new” at the very end. I hope that my thought process makes sense. If you are able to offer any confirmation or clarity, that would be great. Otherwise, thanks for your responses above!

11

Hey @Averroes1198, I think you’re overthinking a bit. Objects in JS don’t have names per se:

const array = new Array(1, 2, 3); // Creates array object
console.log(array.name); // undefined

What they have is to called “tag”:

Object.prototype.toString.call(array); // [object Array]

So it’s an object with the “Array” tag. This is not an array, this is just a notation JS uses for tags. Tags are mutable:

array[Symbol.toStringTag] = 'Purple Orange Under The Sun';
Object.prototype.toString.call(array); // [object Purple Orange Under The Sun]

So in your case, Vegetable is a Function with "Vegetable" tag.