Template literals in methods on objects Javascript-CodePudding

I am having an issue when trying to console.log a template literal. As you can see below, I have a simple object of samsung, which has a method where it turns on and prints the template literal to the console.

let samsung = {
  model: "S21",
  camera: "48px",
  processor: "Snapdragon888",
  turnOn: function(model, camera, processor) {
    console.log(
      `I have turned on! I am the ${model}, I have a ${camera} camera and a ${processor} processor`
    );
  },
};
console.log(samsung.turnOn());

I've tried it lots of different ways, using arrow functions, using the "this" operator, adding/removing parameters of the function, putting in "Samsung" instead of "this" etc. But it prints out the following no matter what: I have turned on! I am the ${model}, I have a ${camera} camera and a ${processor} processor

CodePudding user response：

You didn't pass any parameters to the function, so they are by default undefined.

If you want to get the property value of the object, use this to reference the object:

let samsung = {
  model: "S21",
  camera: "48px",
  processor: "Snapdragon888",
  turnOn: function() {
    console.log(
      `I have turned on! I am the ${this.model}, I have a ${this.camera} camera and a ${this.processor} processor`
    );
  },
};
console.log(samsung.turnOn());

CodePudding user response：

Just for you to understand the situation:

this can be used to reference the current object for an execution scope, in the case of your sample it's the object you defined.

Using that keyword allows you to access to any method (this.turnOn()) or property (this.camera) it has available.

One caution when using arrow-functions is that this will miss its value, so be careful when to use which syntax for defining your methods.

In your case it could've worked if you defined the function outside the object and just passed each parameter separately using the . operator.

const turnOn = (model, camera, processor) => {
    console.log(
      `I have turned on! I am the ${model}, I have a ${camera} camera and a ${processor} processor`
    );
};
turnOn(object.model, object.camera, object.processor);

Or using this with the method defined inside the object to reference each property.