Some basic questions about OOP in JS

Question

currently I´m learning about objects and I´m not sure about the terminology of some words and descriptions. I´m sure some of you can help me out here :)

Code example:

function Person(name) {
    this.name = name,
    this.introduce = function() {
        console.log("My name is " + this.name);
    }
}

var jon = new Person("Jon")
jon.introduce();

My questions:

1. Is there actually a difference between the code above and the following code:

   var Person = function(name) {
       this.name = name,
       this.introduce = function() {
           console.log("My name is " + this.name);
       }
   }
   
   var jon = new Person("Jon")
   jon.introduce();
   

Which one is better practice? I guess the first code snippet, since it´s less code.

2. Now the terminology.

2.1 Am I right, given the code example at the beginning, that you call the following snippet the Prototype?

    function Person(name) {
        this.name = name,
        this.introduce = function() {
            console.log("My name is " + this.name);
        }
    }

2.2 Am I right, given the code example at the beginning, that you call the following snippet the constructor(-function)?

    var jon = new Person("Jon")

Thanks and happy eastern! :)

Answer 1

Point 1: The big Words

function Person(name) {
    this.name = name,
    this.introduce = function() {
        console.log("My name is " + this.name);
    }
}

var jon = new Person("Jon")
jon.introduce();

This function has a name 'Person'. This is called a Function statement.

var Person = function(name) {
    this.name = name,
    this.introduce = function() {
        console.log("My name is " + this.name);
    }
}

var jon = new Person("Jon")
jon.introduce();

This funciton is anonymous and does not have a name. We can assign a name but it is not required since the variable can be used to execute the function. This is called a function expression.

You can read more about Function statements and expressions here:

https://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/

Point 2: Execution (Hoisting)

Functions assigned to variable must be called after the function is defined because of the way hoisting works.

So for the first case the function can be called either below or above it is defined.

But for the second case the function must be invoked after it. Since it is stored in a variable. Invoking it before the function will return undefined. It won't give error. The variable is there in memory space but it is not defined at that point.

You can read more about variable and function hoisting here:

http://adripofjavascript.com/blog/drips/variable-and-function-hoisting

Point 3: Function constructor:

In your case the term to use for function is "Function Constructor" since you are essentially using function as a constructor for the Person object to define it's properties.

Answer 2

1. It's simply the difference between a function expression vs. declaration. I would go with the seemingly simpler declaration instead of the unnamed anonymous function assigned to a variable.

2. 1. That snippet shows the constructor function also returned by jon.constructor. The prototype of a person constructed by that constructor function - which you can access via Object.getPrototypeOf(jon) or Person.prototype - is pretty much empty. Assigning this.name = name doesn't add a name attribute to the prototype but the currently created object.

   2. It's the new operator applied to a constructor function returning a newly constructed object.