Multiple Assignments in JavaScript Expression and Syntax Explanation

Question

The following code is from Mike Bostock's Force-Directed Graph with Mouseover. I am sorry that I can't ask a more pointed question about this code, but I was wondering if someone could explain the syntax in the forEach block that computes the distinct nodes from the links.

What exactly is happening in the line below and what is being assigned to what variables? Is there a name for performing multiple assignments in the same expression?

link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});

var links = [
  {source: "Ericsson", target: "ZTE", type: "suit"},
  {source: "Kodak", target: "Samsung", type: "resolved"},
  {source: "Apple", target: "Samsung", type: "suit"},
  {source: "Kodak", target: "RIM", type: "suit"},
  {source: "Nokia", target: "Qualcomm", type: "suit"}
];

var nodes = {};

// Compute the distinct nodes from the links.
links.forEach(function(link) {
  link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
  link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
});

musicnothing · Accepted Answer · 2017-03-23 15:31:39Z

There's actually a fair amount to unpack in this line:

link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});

First it should be mentioned that x = y || z is equivalent* to this:

if (y)
    x = y;
else
    x = z;

It should also be noted that i = (j = k) means that we're going to assign k to j, and then assign that value to i as well. So in the end, i, j, and k will all have the same value.

So in this case, we're really getting this:

if (nodes[link.source]) {
    link.source = nodes[link.source];
} else {
    nodes[link.source] = { name: link.source };
    link.source = nodes[link.source];
}

That is, if nodes[link.source] is truthy (not 0, null, undefined, empty string), then link.source will be assigned nodes[link.source] as a value.

If it is falsy, then both link.source AND nodes[link.source] will be assigned {name: link.source} as their value.

*Those are equivalent because when you're evaluating an ||, if the left hand side is truthy, there is no need to evaluate the right hand side--you can already evaluate the statement as true. So in JavaScript, it "returns" y if y is truthy, z if y is falsy but z is truthy, or false if both are falsy.

Collectives™ on Stack Overflow

Multiple Assignments in JavaScript Expression and Syntax Explanation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related