Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Asynchronous Programming with JavaScript Asynchronous JavaScript with Callbacks Implement a Callback

Samuel Kleos
seal-mask
.a{fill-rule:evenodd;}techdegree
Samuel Kleos
Front End Web Development Techdegree Student 12,719 Points
Posted by Samuel Kleos
.a{fill-rule:evenodd;}techdegree
Samuel Kleos
Front End Web Development Techdegree Student 12,719 Points

Confusion.. 😵‍💫 Is the data object being returned by getJSON() a param or argument?

This is the getJSON() function. It does the following:

  1. Makes request with URL supplied as argument
  2. Receives the response parses JSON and stores in variable 'data'.
  3. Returns a callback as param with data as the argument.

generateHTML() accepts 'data' as a parameter, but when it's called by getJSON() it uses 'data' as the argument for a callback invoked at the end of getJSON() like so: return callback(data).

My question is whether the 'data' is an argument or a parameter and if it depends on the context of when getJSON() function is invoked with generateHTML: getJSON(wikiURL+person.name, generateHTML);.

Perhaps it's an argument in the context of getJSON((callback) => { return callback(data) }) and a parameter in the context of generateHTML(data)?

If so, can you change the 'data' keyphrase in either function?

How can you pass generateHTML(data) to the getJSON function which uses data as an argument? Does the 'data' keyphrase matter?

From my understanding generateHTML is a reference to a function when inside getJSON as an argument, not a function in itself. Therefore data is an argument 

function getJSON(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.onload = () => {
    if(xhr.status === 200) {
      let data = JSON.parse(xhr.responseText);
      return callback(data);
    }
  };
  xhr.send();
}

function generateHTML(data) {
  // perform some actions with data object and its properties.

function getJSON(randomURL, generateHTML);
Doris Keller
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Doris Keller
Front End Web Development Techdegree Graduate 47,927 Points
Doris Keller
.a{fill-rule:evenodd;}techdegree seal-36
Doris Keller
Front End Web Development Techdegree Graduate 47,927 Points

That's a great question and really a little confusing. Inside a function declaration, you're generally use parameters as placeholders for the actual arguments you will pass to the function when calling the function. Inside the function call, you're using actual data as arguments for the function.

That means, that the data inside function generateHTML(data) is a parameter and when you invoke the callback function inside the getJSON() function declaration, it's an actual argument, containing the parsed response text.

It might be a little more clear, if you'd use a different name for the parameter or the variable declared inside the getJSON() function.