title: Array in d3.js, console.log can show its contents, but its length is 0
body: <p>community. I have encountered a very strange d3.js behavior.</p>
  <p>In the following html code, the console.log print out the array &quot;projects&quot; and its length in my firefox console. Strangely, the content (A, B, C) is there, but the length part is 0!!</p>
  <p>Any help is appreciated, thanks!!</p>
  <pre><code>&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
                                      
  &lt;script src=&quot;http://d3js.org/d3.v3.min.js&quot;&gt;&lt;/script&gt;
  
  &lt;script&gt;(function() {
  
  
  var event = d3.dispatch(&quot;data&quot;);
  
  var projects = [];
  
  
  d3.tsv(&quot;example.tsv&quot;, type, function(input) {
  
    event.data(input);
    input.forEach(function (d) {
        if (projects.indexOf(d.project) == -1) {
          projects.push(d.project);
        }
    })
  });
  
  
  graph(event);
  
  
  function graph(event) {
  
    event.on(&quot;data.graph&quot;, function(input) {
  
      console.log(projects, projects.length);
  
    });
  
  }
  
  
  
  function type(d, i) {
    d.id = i;
    d.project = d.project;
    return d;
  }
  
  
  })()&lt;/script&gt;
  </code></pre>
  <p>Here are the example.tsv</p>
  <pre><code>project
  A
  B
  C
  </code></pre>
  <p><strong>Edit</strong></p>
  <p>OK, big thanks to Lars. I googled d3.tsv and async, found a page in O'Reilly:</p>
  <p><a href="http://chimera.labs.oreilly.com/books/1230000000345/ch05.html#_data" rel="nofollow noreferrer">http://chimera.labs.oreilly.com/books/1230000000345/ch05.html#_data</a></p>
  <blockquote>
  <p>Note that d3.csv() is an asynchronous method, meaning that the rest of your code is executed even while JavaScript is simultaneously waiting for the file to finish downloading into the browser. (The same is true of D3’s other functions that load external resources, such as d3.json().)</p>
  <p>This can potentially be very confusing, because you—as a reasonable human person—might assume that the CSV file’s data is available, when in fact it hasn’t finished loading yet. A common mistake is to include references to the external data outside of the callback function. Save yourself some headaches and make sure to reference your data only from within the callback function (or from within other functions that you call within the callback function).</p>
  <p>Personally, I like to declare a global variable first, then call d3.csv() to load the data. Within the callback function, I copy the data into my global variable (so it’s available to all of my subsequent functions), and finally I call any functions that rely on that data being present.</p>
  </blockquote>
  <p>I admit, this contradicts my personal understanding of program paradigm. But the console.log still confuses me. As Lars said, console.log is not async but it evals the two variables in another order?? Isn't that the definition of async??</p>