In this context, the function chase() returns undefined because when run in the global context, ‘this’ points to the window object by default and does not have the properties (‘breed’ or ‘lovesToChase’) defined on that object.

4. The ‘new’ keyword and why ‘this’ is so powerful as you continue your JavaScript journey

It’s useful to use the keyword “this” when creating constructor functions for objects because that allows the method to work on any object.

A constructor function allows us to define an object (like Number or String, except it has its own special properties and methods).

I love dogs, so let’s create a dog object type and store some information inside of it.

function Dog(breed, name, friends){
    this.breed = breed;
    this.name = name;
    this.friends = friends;	
    this.intro = function() {
        console.log(`Hi, my name is ${this.name} and I’m a ${this.breed}`);
        return this;
    }; 
}

It’s important to note that ‘this’ does not have a value while in the constructor function.

However, each time you create a new instance of the Dog object, the value of ‘this’ will point to the object you just instantiated. It will NOT point to the Dog prototype itself.

Use the ‘new’ keyword with the name of the object type and pass any required parameters when instantiating the new instance of the object.

It’s similar to doing something like this:

var str = new String('Hello world');
/*******
You could do the above, but it's best to avoid it (instead do like the variable str2 below)
(because JavaScript knows that anything inside single or double quotes has the type of String)
Same goes for other primitives. This is for example purposes only. 
NOTE: To clarify -- the only time I ever use the new keyword in practice is when I use a function constructor and create my own object type.
*******/

var str2 = 'Hello world';
// both have the prototype of String and inherit all the String methods and properties

// Using the Dog prototype, create a new instance 
var chester = new Dog('beagle', 'Chester', ['Gracie', 'Josey', 'Barkley']);
chester.intro();        // returns Hi, my name is Chester and I'm a beagle
console.log(chester);   // returns Dog {breed: "beagle", name: "Chester", friends: Array(3), intro: ƒ}

// Here's another example:
var City = function(city, state) {
  this.city = city || "Phoenix";
  this.state = state || "AZ";
  this.sentence = function() {
    console.log(`I live in ${this.city}, ${this.state}.`);
  };
};

var phoenix = new City(); // use the default parameters
console.log(phoenix); // returns the phoenix object (an instance of the City prototype)
phoenix.sentence(); // returns "I live in Phoenix, AZ."

var spokane = new City('Spokane', 'WA');
console.log(spokane); // returns the spokane object (another instance of the City prototype)
spokane.sentence(); // returns "I live in Spokane, WA."

The ‘new’ keyword is important!

It changes the context of ‘this’ to the instance that it created from the Object constructor function.

That’s why when ‘this’ is used inside a constructor function, it doesn’t point to it’s object prototype. It actually points to the new instance of that object type.

So, what makes THIS so powerful in this context, you’re asking?

It allows us to scale applications and make repeatable code.

Think about your social media accounts.

Each account could be an object based off a prototype called ‘Friend’. Each time a new account is created, it inherits the methods and properties from its prototype, while passing in unique information like name, password, interests, job, etc.

// Constructor Function
var Friend = function(name, password, interests, job){
  this.fullName = name;
  this.password = password;
  this.interests = interests;
  this.job = job;
};

function sayHello(){
   // uncomment the console.log to see the object that 'this' points to
  //  console.log(this); 
  return `Hi, my name is ${this.fullName} and I'm a ${this.job}. Let's be friends!`;
}

// Create one or multiple instances of the Friend prototype with the keyword 'new'
var john = new Friend('John Smith', 'badpassword', ['hiking', 'biking', 'skiing'], 'teacher'); 

console.log(john); 

// Assign the function to the greeting key on the john object
john.greeting = sayHello; 

// Call the the new method
console.log( john.greeting() ); 

// Remember, you can't call sayHello() as a function; it will return "Hi, my name is undefined and I'm a undefined. Let's be friends!"
// Because the function's context is global and the window object does NOT have the keys that belong to the Friend prototype
console.log( sayHello() ) ;