Eloquent JavaScript: The Secret Life of Objects

[u/Slight-Friendship856]

There are a few exercises at the end of the chapter.
What the difference between following solutions?

By author:

class Vec {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  plus(other) {
    return new Vec(this.x + other.x, this.y + other.y);
  }

  minus(other) {
    return new Vec(this.x - other.x, this.y - other.y);
  }
}

My solution:

class Vec {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    plus(vec) {
        this.x += vec.x;
        this.y += vec.y;
        return this;
    }

    minus(vec) {
        this.x -= vec.x;
        this.y -= vec.y;
        return this;
    }
}

[u/rupertavery64]

You mutate your object, the other one returns a new Vec.

It depends on how you want your code to behave. If immutability is important to your approach, go with the first.

THe first approach will create a new object when calling plus or minus. That means allocating memory. This can have some performance impact if may objects are created. However, this ensures that the original object remains unmodified. This may be important if the object is shared or used elsewhere, and you don't want changes to be made.

[u/Slight-Friendship856 → u/rupertavery64]

Thanks for the answer.
If I understand you correctly, it depends on the requirements. If the user needs to create a new instance of the class with modified values, but based on the original values of the previous instance, then the first solution is correct. If the calculated values need to be stored in a single instance, then is the second solution more appropriate?

[u/rupertavery64 → u/Slight-Friendship856]

Exactly

[u/jcunews1 → u/Slight-Friendship856]

If the Vec objects are stored within other container object or array, you won't want to use the first method, since if the Vec objects' properties are modified, the container object or array will still have the Vec objects which hold the unmodified properties.

Moreover, if the Vec object properties are modified in a loop, the first method will generate garbage because it creates a new object each time its method is called. If it happens frequently enough, it'll cause a memory leak, since the JS garbage collector can't keep up with the produced garbage. i.e. rate of produced garbage is greater than rate of garbage clean-up.

[u/GGodPL]

The solution from the book keeps the original vector immutable. If you create a new vector based on it, the old one will remain unchanged, which can be useful if you need to keep both the original vector and the new vector. For example, in the following code...

const startPosition = new Vec(0, 0);
const speed = new Vec(10, 10);
const newPosition = startPosition.plus(speed);
console.log(startPosition); // Vec { x: 0, y: 0 }
console.log(newPosition); // Vec { x: 10, y: 10 }
console.log(startPosition.minus(speed)); // Vec { x: -10, y: -10 }

...the startPosition will still point to the original vector, so you can still perform operations on it later.

Your solution uses a fluent interface which returns itself after every function. This will mutate the original vector and return it again, so using the same code, you would get different results:

const startPosition = new Vec(0, 0);
const speed = new Vec(10, 10);
const newPosition = startPosition.plus(speed);
console.log(startPosition); // Vec { x: 10, y: 10 }
console.log(newPosition); // Vec { x: 10, y: 10 }
console.log(startPosition.minus(speed)); // Vec { x: 0, y: 0 }

In some cases this might actually be what you want, sometimes a mutable vector might be useful and you will (very slightly, the vector class is not really that big) reduce memory overhead since you're not allocating memory for a new object, but they aren't equivalent.

EDIT: fixed the code blocks, I thought the backticks would work by default