Template literals in methods on objects Javascript

Question

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

"*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*" I do not believe this result is possible. The template must be processed and the placeholders replaced with values. If you don't supply the values you'd get `undefined` but you won't just get the placeholders printed. — VLAZ, Dec 03 '21 at 20:15

Spectric · Answer 1 · 2021-12-03T20:15:49.967

2

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());

edited Dec 03 '21 at 20:15

answered Dec 03 '21 at 20:14

Spectric

30,714
6
20
43

1

Thank you! I forgot about not putting in the parameters after changing so many things. I have also tried "this" again and now it works fine, so I must have done something incorrect the first time. Much appreciated Spectric! – CG-180 Dec 03 '21 at 20:26

score 0 · Answer 2 · answered Dec 03 '21 at 20:18

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.

Hi Antonio, Thank you so much for the explanation! It makes more sense now. I have tried it both ways, with "this" and without, and it's working ok. Much appreciated! — CG-180, Dec 03 '21 at 20:28

Template literals in methods on objects Javascript

2 Answers2