title: Passing arguments to anonymous function inside page.includeJs() and page.evaluate()
body: <p>A little background... I'm a little new to javascript, and to phantom.js, so I don't know if this is a javascript or phantom.js bug (feature?).</p>
  
  <p>The following completes successfully (sorry for the missing phantom.exit(), you'll just have to ctrl+c once you are done):</p>
  
  <pre><code>var page = require('webpage').create();
  var comment = "Hello World";
  
  page.viewportSize = { width: 800, height: 600 };
  page.open("http://www.google.com", function (status) { 
      if (status !== 'success') {
          console.log('Unable to load the address!');
          phantom.exit();
      } else {
          page.includeJs('http://code.jquery.com/jquery-latest.min.js', function() {
              console.log("1: ", comment);
          }, comment);
  
          var foo = page.evaluate(function() {            
              return arguments[0];
          }, comment);
  
          console.log("2: ", foo);            
      }
  });
  </code></pre>
  
  <p>This works:</p>
  
  <pre><code>page.includeJs('http://code.jquery.com/jquery-latest.min.js', function() {
      console.log("1: ", comment);
  }, comment);
  </code></pre>
  
  <p><strong>Output</strong>: <code>1:  Hello World</code></p>
  
  <p>But not:</p>
  
  <pre><code>page.includeJs('http://code.jquery.com/jquery-latest.min.js', function(c) {
      console.log("1: ", c);
  }, comment);
  </code></pre>
  
  <p><strong>Output</strong>: <code>1:  http://code.jquery.com/jquery-latest.min.js</code></p>
  
  <p>And not:</p>
  
  <pre><code>page.includeJs('http://code.jquery.com/jquery-latest.min.js', function() {
      console.log("1: ", arguments[0]);
  }, comment);
  </code></pre>
  
  <p><strong>Output</strong>: <code>1:  http://code.jquery.com/jquery-latest.min.js</code></p>
  
  <p>Looking at the 2nd piece, this works:</p>
  
  <pre><code>var foo = page.evaluate(function() {            
      return arguments[0];
  }, comment);
  
  console.log("2: ", foo);
  </code></pre>
  
  <p><strong>Output</strong>: <code>2:  Hello World</code></p>
  
  <p>And this:</p>
  
  <pre><code>var foo = page.evaluate(function(c) {           
      return c;
  }, comment);
  
  console.log("2: ", foo);
  </code></pre>
  
  <p><strong>Output</strong>: <code>2:  Hello World</code></p>
  
  <p>But not this:</p>
  
  <pre><code>var foo = page.evaluate(function() {            
      return comment;
  }, comment);
  
  console.log("2: ", foo);
  </code></pre>
  
  <p><strong>Output</strong>:</p>
  
  <blockquote>
    <p>ReferenceError: Can't find variable: comment</p>
    
    <p>phantomjs://webpage.evaluate():2</p>
    
    <p>phantomjs://webpage.evaluate():3 </p>
    
    <p>phantomjs://webpage.evaluate():3 </p>
    
    <p>2:  null</p>
  </blockquote>
  
  <p>The good news is, I know what works and what doesn't, but how about a little consistency?</p>
  
  <p>Why the difference between <code>includeJs</code> and <code>evaluate</code>?</p>
  
  <p>Which is the proper way to pass arguments to an anonymous function?</p>