Show the object properties values using an object method

Question

I'm new to JS and I recently studied about objects and functions. Here I want to call a function for each object in an array of objects. I'm using forEach to do so. The result is undefined for each property.

function showDetail() {
  console.log(`name: ${this.name}
         price: ${this.price}
         sold: ${this.sold}
         console: ${this.console}
         `);
}
const games = [{
    name: ' Crash Bandicoot N. Sane Trilogy',
    price: 1060,
    sold: 20,
    console: 'PS4',
  },
  {
    name: 'Lego Marvel Super Heroes',
    price: 700,
    sold: 25,
    console: 'XBOX',
    showDetail: function() {
      console.log(this.name);
    }
  },
  {
    name: 'Gta V',
    price: 1449,
    sold: 30,
    console: 'PS4',
    showDetail: function() {
      console.log(this.name);
    }
  }
];
games.forEach(showDetail);

The result is like this for each object:

name: undefined
     price: undefined
     sold: undefined
     console: [object Object]
 games.forEach(showDetail);

Answer 1

You should pass a 'game' as parameter to the function and print its properties, not from 'this'

function showDetail(game){
   console.log(`name: ${game.name}
   price: ${game.price}
   sold: ${game.sold}`);
}

const games = [ ..... ]
games.forEach( function(game) { showDetail(game) });
//if there is support for arrow functions, it's cleaner
games.forEach( game => showDetail(game) );
//also, as mentioned by Máté in the comments
games.forEach( showDetail ); //will work

If you want the 'showDetail' function to work with this 'this', you should bind the 'game' to the function

games.forEach( game => showDetail.bind(game)() );
function showDetail(){
   //here the 'this' is the 'game', because it has been bounded via .bind() method
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Answer 2

When you write

games.forEach(showDetail);

showDetails is a callback function of forEach and it is passed the object as the first parameter and hence you would write

function showDetail(game) {
  console.log(`name: ${game.name}
         price: ${game.price}
         sold: ${game.sold}
         console: ${game.console}
         `);
}

when you this inside showDetail, the this value is not binded to the object context and hence this.name doesn't return the object value. However if you write

games.forEach(game => {
   showDetail.call(game);
});

you are providing the context to be object and this case this.name inside showDetail will work

Answer 3

Maybe you mean this

// constructor

function Game(parms) {
  this.name = parms.name;
  this.price = parms.price;
  this.sold = parms.sold;
  this.gconsole = parms.gconsole;
}

// toString override

Game.prototype.toString = function() {
  return `name: ${this.name}
         price: ${this.price}
         sold: ${this.sold}
         gconsole: ${this.gconsole}
         `;
}

const games = [
  new Game({
    name: ' Crash Bandicoot N. Sane Trilogy',
    price: 1060,
    sold: 20,
    gconsole: 'PS4'
  }),
  new Game({
    name: 'Lego Marvel Super Heroes',
    price: 700,
    sold: 25,
    gconsole: 'XBOX'
  }),
  new Game({
    name: 'Gta V',
    price: 1449,
    sold: 30,
    gconsole: 'PS4'
  })
];
games.forEach(function(g) {
  console.log(g.toString());
});