Concerned about what I'm learning. I am learning about this in JavaScript

Question

I am using codecademy to train, however I noticed that the expected result was different than what the completion notes suggested it would be, even though I got passing marks.

Instructions

1. This is a great way to make objects more flexible. Under the person object, write another variable named friend and set it equal to an object with one key named name. The value of name should be your friend's name.

You can create another object literal like this:

let friend = {
    name: 'name here'
};

2. Under the friend object, set friend.sayHello equal to person.sayHello.

friend.sayHello = person.sayHello;

This will add a key named sayHello to the friend object and set it equal to the method inside of person.sayHello. The person.sayHello method uses the this keyword. What will this be when the friend object calls it?

3. At the bottom of your main.js, use console.log() to print the output of calling friend.sayHello() and notice the output in the console.

It logged your friend's name instead of yours because the meaning of this changed to the friend object, for which the name key is different.

My code

let day = 'Wednesday';
let alarm;
let person = {
  name: 'William',
  age: 29,
  weekendAlarm: 'No alarms needed',
  weekAlarm: 'Alarm set to 7AM',
  sayHello: () => {
    return 'Hello, my name is ${this.William}';
  },
  sayGoodbye(){
    return 'Goodbye!'
  }
};
//Friend
let friend = {
  name: 'Preston'
};
//changing functions
friend.sayHello = person.sayHello;
if (day === 'Saturday' || day === 'Sunday') {
  alarm = 'weekendAlarm';}
else {
  alarm = 'weekAlarm';
}
console.log(person['name']);
console.log(person['age']);
console.log(person[alarm]);
person.hobbies = ['Pimping', 'Poon Slaying'];
person.hobbies = 'slayin hoes';
console.log(person['hobbies']);
console.log(person.sayHello());
//logging friend to console.log
console.log(friend.sayHello());

My question:

The instructions suggest the final "Hello, my name is..." should be "Hello, my name is Preston."

My code doesn't do that. Did I do something wrong? Or if the learning machine isn't up to date in standards, should I need to report it as a bug?

Your contribution in this post may go further than just helping me.

Answer 1

The reason your code "works" as it does is for three reasons:

• you use an arrow function for defining sayHello: that has a different way of working with this. In your case it will be undefined (or the global object in non strict mode). You need to use the function keyword to define it (or the ES6 shorthand syntax -- see below).

• A template literal (with ${ }) needs backticks as delimiter, not normal quotes. As you have it now it will just take thos ${ } as literal text.

• this.William references a property that does not exist, it should be this.name.

Relevant part of the corrections:

let person = {
    name: 'William',
    sayHello() {
        return `Hello, my name is ${this.name}`;
    }
};
// Friend
let friend = {
    name: 'Preston'
};
// Assigning functions
friend.sayHello = person.sayHello;

// Logging friend to console.log
console.log(friend.sayHello());

Answer 2

There are several issues with your code.

1, The arrow function does not has "this"

sayHello: () => {
  return 'Hello, my name is ${this.William}';
},

You must use short syntax like the way you defined sayGoodbye, or use traditional syntax function(){...}

2, Wrong template literal syntax

Not ', but '`'

3, Wrong variable name:

return 'Hello, my name is ${this.William}';

The correct is this.name

So, the correct version is:

let person = {
  name: 'William',
  age: 29,
  ...
  sayHello() {
    return `Hello, my name is ${this.name}`;
  },
  ...
};