title: variable declaration conditional syntax
body: <p>I was looking some great d3.js <a href="http://bl.ocks.org/mbostock/2706022" rel="nofollow">code examples</a> when I saw something like:</p>
  
  <pre><code>var links = [
    {source: "test1", target: "test2"},
    {source: "test1", target: "test3"},
    {source: "test2", target: "test3"},
    {source: "test3", target: "test4"}
  ];
  
  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});
  });
  </code></pre>
  
  <p>I didn't get immediately how the var nodes was being declared.</p>
  
  <p>My first guess was to translate it into:</p>
  
  <pre><code>links.forEach(function(link) {
    if(link.source != nodes[link.source]){
      nodes[link.source] = {name: link.source};
    }
    if(link.target != nodes[link.target]){
      nodes[link.target] = {name: link.target};
    }
  });
  </code></pre>
  
  <p>But the links are not drawn anymore.</p>
  
  <p>What is the difference between the two methods?</p>
  
  <p>What is the point of the initial syntax, is that just a shortcut or do it increase performances?</p>
  
  <p>Is there a best practice to follow in such cases ?</p>
  
  <p><strong>Edit</strong></p>
  
  <p>So if I try to fully understand</p>
  
  <pre><code>link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
  </code></pre>
  
  <ol>
  <li><p>As <em>nodes[link.source]</em> is an object <em>link.source</em> takes its reference. This is always happening.</p></li>
  <li><p>OR condition, I'm not sure to get that part.</p>
  
  <p>I guess if <em>nodes[link.source]</em> is defined <em>link.source = nodes[link.source]</em> return true we don't need go further.</p>
  
  <p>If it's not defined and return false, the OR clause force to go further...</p></li>
  <li><p><em>nodes[link.source]</em> gets a value so thanks to the reference <em>link.source</em> is pointing to the same value.</p>
  
  <p>I guess at this stage <em>link.source</em> is not yet containing a reference to <em>nodes[link.source]</em>, but its initial value. It will contain the new reference after the comma.</p></li>
  </ol>
  
  <p>Am I wrong somewhere ? Point 2 seems strange to me.</p>