Confused with Objects and Constructors

What is the point of a Constructor if it does the same thing as an Object? They both seem to build an object. However, a Constructor appears to be written in a more complicated manor for some reason?

Traditionally in JavaScript, a constructor function is used to build an object in an identifier. This allows you to define a structure and reuse it.

// Creating an object in a variable
let Julie = {
age: 13,
eyeColor: "brown"
}

// Creating an object constructor function
function Person( age, eyeColor ){
  this.age = age;
  this.eyeColor = eyeColor;
}

let Julie = new Person( 13, "brown");

// Using the new keyword instantiates a new instance of an object using this function.

The conversation gets a bit confusing as you bring in the new support for the class keyword. Classes have their roots in other programming langauges, but JavaScript is entirely object oriented. Everything is an object. Functions are objects, arrays are objects, strings are objects, objects are even objects!

Classes are not functions, they do not execute when you call them, they are more literally a blueprint. JavaScript is imitating this behavior in objects, that other langauges have. Classes furthermore have inheritance, extending to other classes. Objects have prototypes.

I don’t know enough to draw all the comparisons, but a constructor in JS is a function we use to build a new instance of an predefind object structure. A constructor in the class is a function inside that class that executes when a class is instantiate, and it may initialize variables in the identifier, setup the class for use, etc.

A constructor is just a function that prepares the new instantiated Object (JavaScript)/Class (PHP is all I know off the top of my head).

So, I guess constructors are more easily reused than objects? An object is a one-time deal and a constructor and can be called over and over again using different values.

Yes, but constructors are not a thing per-say in JavaScript, it is a function that we use to create reusable Objects.

If you look at the object constructor I wrote above, it’s just a function. The function is assigning properties to the context of the function using the this keyword. Using new is what causes the returned data from the function to be an object, and for that object to be stored in the identifier. It’s a combination of basic JS procedures that brings about this behavior.

So a constructor is just a function we use to create objects.

It’s kind of like how you can create a function two ways.

// Function keyword
function test(){};

// Blank function
let test = function(){};

I’m just beginning to wrap my head around this myself so I’ll share this teaser to hopefully get you interested. There’s a lot to object creation and object prototypes and a fair bit of controversy over which is the right way to go about all of this.

// I'll invite some people to my program party
// mary showed up before I had my constructor ready
// I'll just make her on the fly
var mary = {name:"Mary", age:23};  // obj literal 

function Person(name, age) {
  this.name = name;
  this.age = age;
}

// a few people from Person constructor
var bob = new Person("Bob", 47);  
var jane = new Person("Jane",34);

//somewhere else in program decide to add a greet method so my people can mingle
Person.prototype.hiya = function(){ return "Hi, I'm " + this.name;}

// Oh good - more people showed up
var newArrivals = [["Javier",42],["Sandra",29],["Maxine",32],["Jeremy",21]];
var morePeople = [];

for(var guest of newArrivals){
  morePeople.push(new Person(guest[0],guest[1]));
}

console.log(bob.hiya());  // Hi, I'm Bob
console.log(jane.hiya()); // Hi, I'm Jane
morePeople.forEach(function(el){console.log(el.hiya())});

try{
console.log(mary.hiya()); // bummer - Mary is speechless
}
catch(error){
  console.error(error.message); //mary.hiya is not a function
}

// but there is still hope - let's make mary a real Person
Object.setPrototypeOf(mary, Person.prototype);
console.log(mary.hiya()); // now Mary can say hi too
2 Likes