What is the correct placement of constructors or classes in JS code?

Question

Since constructors are basically an object that is stored as a copy, it seems like they are treated like a variable in the sense that they cannot be just "Anywhere" in the code, like with a function for example?

So they basically need to be above the location that the constructor is called or the prototype in the code or else they will be undefined or undiscovered...

Can someone else confirm for me that this is indeed the case?

Thanks!

"*constructors are basically an object that is stored as a copy*" - can you elaborate on what you mean by that, please? No, constructor functions are just functions like any other. — Bergi, Jan 27 '19 at 16:06
"_they basically need to be above the location that the constructor is called or the prototype in the code or else they will be undefined or undiscovered_" This seems like something you could just test yourself. — takendarkk, Jan 27 '19 at 16:06
Yes, prototype objects are initialised using assignments. You must do that before using them, before creating instances. [`class`es aren't hoisted](https://stackoverflow.com/q/35537619/1048572). — Bergi, Jan 27 '19 at 16:08
Thanks guys, I read up on JS a bit more and got it now :) Sorry about posting a duplicate; I did look for something similar but couldn't find it. — Sebastian Neferu, Jan 29 '19 at 09:55

Scott Marcus · Answer 1 · 2019-01-27T16:12:35.857

In JavaScript, declarations are hoisted, making code execute as if those declarations were actually written at the top of their enclosing scope. A declaration could be a variable declaration or a function declaration. Because of this, you can physically write the code in a way that seems like you are using something before its been declared, but in actuality, because of hoisting, you aren't.

Variable Declaration Hoisting:

console.log(x); // undefined because x hasn't been initialized, but has been declared
var x = "test";
console.log(x); // "test" because the assignment has now been processed

console.log(y); // error because y has never been decalred

Function Declaration Hoisting:

foo();  // "hello from foo" because the entire function declaration was hoisted.
 
function foo(){
  console.log("hello from foo");
}

Classes are not hoisted so you must write them before you use them.

Class Hoisting ATTEMPT:

const p = new Rectangle(); // ReferenceError

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

It really is that simple.

score 0 · Accepted Answer · answered Jan 27 '19 at 16:07

A variable is just a means to store and reference a value. An object is a type of value. A function is a type of object. A constructor function is a function designed to be called with the new keyword (which creates an object and sets up the prototype chain on it).

To call a constructor function, you need to have access to that value. This can be via a variable (and usually is).

The variable must contain the constructor function before you can reference it.

A function declaration is a means to create a function, which can be a constructor function, which is hoisted, allowing it to be used earlier in the code then it appears.

However, constructor functions typically have a number of methods added to the prototype and these are not hoisted so in the example below:

The instance of dog is successfully constructed
The attempt to bark fails because the assignment to prototype.bark hasn't happened yet

var fido = new Dog("Fido");
fido.bark();

function Dog(name) {
    this.name = name;
}

Dog.protype.bark = function () {
    alert(`Woof! I'm ${this.name}`);
}

What is the correct placement of constructors or classes in JS code?

2 Answers2