Using bind inside a function that passes (as its argument) a dynamic value to be used by the bind method itself

Question

I'm practising with the apply, call and bind methods and I'm trying to use bind in the following context:

const chardonnay = {
  type: "still white",
  grape: "chardonnay",
  region: "France",
  description: function () {
    return `This is a ${this.type} wine made of 100% ${this.grape} grapes from ${this.region}.`;
  },
};

const malbec = {
  type: "still red",
  grape: "malbec",
  region: "Argentina",
};

const describeWine = (wine) => {
  return chardonnay.description.bind(wine);
};

console.log(describeWine(malbec));

Basically what I'm trying to accomplish is that I can pass a dynamic value to be used by bind later on so that I store the bind functionality on another function which parameter will be the argument for the bind function method.

I'm sorry but this is the best I can explain it.

Can someone explain why this approach is not giving me the desired results and what would be the best way to accomplish that?

Answer 1

You forgot to call the bind's returned function like this :

const chardonnay = {
  type: "still white",
  grape: "chardonnay",
  region: "France",
  description: function () {
    return `This is a ${this.type} wine made of 100% ${this.grape} grapes from ${this.region}.`;
  },
};

const malbec = {
  type: "still red",
  grape: "malbec",
  region: "Argentina",
};

const describeWine = (wine) => {
  return chardonnay.description.bind(wine)();
};

console.log(describeWine(malbec));