"This" in Factory Functions

Question

I am sorry if this is a really stupid question. I have searched about it and couldn't find a clear answer. There is a factory function in a tutorial on the web like the one below. I have mostly understood how "This" works in other places but I can't quite wrap my head around how "This" helps us here. The code still works even when I remove "This". I also don't understand why removing "return color;" breaks "color.rgb()".

function makeColor(r, g, b) {
  const color = {};
  color.r = r;
  color.g = g;
  color.b = b;
  color.rgb = function () {
    //const { r, g, b } = this;
    return `rgb(${r}, ${g}, ${b})`;
  };
  return color;
}

const newColor = makeColor(50, 100, 150);
newColor.rgb();

console.log(newColor); // {r: 50, g: 100, b: 150, rgb: ƒ}
console.log(newColor.rgb()); //rgb(50, 100, 150)

`r`, `g`, `b` are closed over variables from the constructor. Try `newColor.r = 0` before `newColor.rgb()` and see the difference between using `this` and not. — deceze, Nov 09 '20 at 13:03
if you remove `return color`, then your `makeColor` function doesn't return anything, and so the variable `newColor` would be undefined and thus `newColor.rgb()` wouldn't do anything — TKoL, Nov 09 '20 at 13:04
Thank you so much to both of you! @deceze Your comment made things very very clear for me now for how the scope would work here! — Bnny, Nov 09 '20 at 13:27
Does this answer your question? [How does the "this" keyword work?](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) — Heretic Monkey, Nov 09 '20 at 13:56

score 0 · Answer 1 · answered Nov 09 '20 at 13:05

The code still works even when I remove "This"

I assume you mean it still works with this line commented out

//const { r, g, b } = this;

The reason is that you essentially have a closure over the variables r, g, and b so you can still read them.

I also don't understand why removing "return color;" breaks "color.rgb()".

removing the return line breaks everything as now your makeColor function returns undefined:

function makeColor(r, g, b) {
  const color = {};
  color.r = r;
  color.g = g;
  color.b = b;
  color.rgb = function () {
    //const { r, g, b } = this;
    return `rgb(${r}, ${g}, ${b})`;
  };
  //return color;
}

const newColor = makeColor(50, 100, 150);
//newColor.rgb();

console.log(newColor); // undefined
//console.log(newColor.rgb()); //rgb(50, 100, 150)

The line return color returns the object which has properties r, g,b and function rgb()

score 0 · Answer 2 · answered Nov 09 '20 at 13:08

0

When you remove const { r, g, b } = this;, the rgb(${r}, ${g}, ${b}) references the parameters of makeColor, which you assigned to color.

When you call makeColor, it does whatever is in the function and then return a value. In your case, the value is the color object defined in makeColor. If you remove the return, it will return undefined

answered Nov 09 '20 at 13:08

Hugh

354
1
11

I now see why returning nothing would break the code. – Bnny Nov 09 '20 at 13:28

score 0 · Accepted Answer · answered Nov 09 '20 at 13:12

const { r, g, b } = this; in this line this refers the created object instance if you remove this line it will work because your argument names in your function method match with the constructed object's property names. That's why code "works".

function makeColor(r, g, b) {
  const color = {};
  color.r = r;
  color.g = g;
  color.b = b;
  color.rgb = function () {
    //const { r, g, b } = this;
    return `rgb(${r}, ${g}, ${b})`;
  };
  return color;
}

const newColor = makeColor(50, 100, 150);
newColor.rgb();

console.log(newColor); // {r: 50, g: 100, b: 150, rgb: ƒ}
newColor.b = 0;
console.log(newColor.rgb()); // this still prints 150 where it should print 0
// cause b refers to the argument passed into the makeColor function not instance member 

function makeColor2(r, g, b) {
  const color = {};
  color.r = r;
  color.g = g;
  color.b = b;
  color.rgb = function () {
    const { r, g, b } = this;
    return `rgb(${r}, ${g}, ${b})`;
  };
  return color;
}

const newColor2 = makeColor2(50, 100, 150);
newColor2.b = 0;
console.log(newColor2.rgb()); // b is 0 as expected

And for the second question, the factory method is to build something and you produce that thing by returning it from the function. If you don't return it, it will stay as local and will have no use at all.

Very very clear now how the scope works here. I didn't think of this scenario. — Bnny, Nov 09 '20 at 13:29

"This" in Factory Functions

3 Answers3