How to solve a Javascript spread operator expression error

Question

I'm creating an Object (Customer) which is visualized with a SVG circle, so I want a reference to this SVG circle in the Customer Object.

I was trying to do something smart:

class Customer {
  constructor(color, queue) {
    this.color = color;
    this.queue = queue;
    this.id = Date.now();
    this.queue.push(this)
    this.circle = { ...document.createElementNS("http://www.w3.org/2000/svg", "circle"), queue.newLocation(), {fill: this.color, id: this.id} };
  }
}

queue.newLocation() returns an {cx: .., cy: ..} object. However the error I get is:

Unexpected token '.' (queue`.`newLocation) 

when I omit the queue.newLocation I get:

Unexpected token '{'

What goes wrong?

(Error appears in Chrome & Safari).

Answer 1

You should use spread operator with queue.newLocation() and {fill: this.color, id: this.id} because circle variable is object. mean accept only key and value.

class Customer {
  constructor(color, queue) {
    this.color = color;
    this.queue = queue;
    this.id = Date.now();
    this.queue.push(this)
    this.circle = { ...document.createElementNS("http://www.w3.org/2000/svg", "circle"), ...queue.newLocation(), ...{fill: this.color, id: this.id} };
  }
}

Answer 2

This is why it's usually not a good idea to write one liners. The error is:

this.circle = { ...document.createElementNS("http://www.w3.org/2000/svg", circle"), queue.newLocation(), {fill: this.color, id: this.id} };
                                                                                                         |
                                                                                                         |
      scroll to see my ASCII arrow pointing to the syntax error -----------------------------------------'

There's nothing wrong with your spread operators at all. The error is somewhere else.

You would have gotten a better error message if you were to instead write your code as:

this.circle = {
    ...document.createElementNS("http://www.w3.org/2000/svg", circle"),
    {
        fill: this.color,
        id: this.id
    }
};

Then one of two things will happen.

First possibility is you immediately realize that the object { fill, id} is missing a key or it is not supposed to be an object in the first place. So the correct code should either look something like this:

this.circle = {
    ...document.createElementNS("http://www.w3.org/2000/svg", circle"),
    attr: {               // or something appropriate
        fill: this.color,
        id: this.id
    }
};

or this:

this.circle = {
    ...document.createElementNS("http://www.w3.org/2000/svg", circle"),
    fill: this.color,
    id: this.id
};

The second possibility is you don't spot the mistake and javascript will tell you the line number of the error is the { after queue.newLocation() which would make the error obvious to you.