number of parameters in callback

Isabell
Isabell used Ask the Experts™
on
Hi,

I have a main easyhttp.js file as below:
function easyHTTP() {
  this.http = new XMLHttpRequest();
}

easyHTTP.prototype.get = function (url, callback) {
  this.http.open('GET', url, true);

  self = this;
  this.http.onload = function () {
    if (self.http.status === 200) {
      callback(null, self.http.responseText);
    } else {
      callback('Error: ' + self.http.status);
    }
  };
  this.http.send();
}

Open in new window

And I execute it on the following app.js file.

const http = new easyHTTP();

http.get('https://jsonplaceholder.typicode.com/posts',
  (err, posts) => {
    if (err) {
      console.log(err);
    } else {
      console.log(posts);
    }
  })

Open in new window


Now what i don't understand is in app.js when we create a callback function, we pass 2 parameters (err, posts) right?
How come we pass only one argument when we call callback function as below?
callback('Error: ' + self.http.status);

Open in new window


Also, in callback function declaration, we pass 2 parameters and in 'if' statement, we pass only one like if(err).
How this function knows that which one is err and which one is posts when only one parameter is passed.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
Capture-d-e-cran-2019-03-23-a--13.05.png
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
Let's break your code down
Line 5 of first listing
easyHTTP.prototype.get = function (url, callback) {

Open in new window

The get() function expects two parameters: url and a callback function
Let's look at your second listing - this is using arrow functions - it might be easier to see what is going on if we rewrite it to look like this
http.get('https://jsonplaceholder.typicode.com/posts', function  (err, posts) {
    if (err) {
      console.log(err);
    } else {
      console.log(posts);
    }
  })

Open in new window

From the above we can see that the callback takes two parameters: err and posts.
Let's go back to the first listing again. In the onLoad (lines 10 - 14) we have
 if (self.http.status === 200) {
      callback(null, self.http.responseText);
    } else {
      callback('Error: ' + self.http.status);
    }

Open in new window

Let's look at the condition where self.http.status === 200. This will fire the true statement for the if condition which does this
callback(null, self.http.responseText);

Open in new window

This calls the callback [function(err,posts)] with the following values
err => null
posts => self.http.responesText

Open in new window

In the callback we check the err parameter - which in this case will be null - so the else fires and console.log(posts) executes

Let's look at the case were status !== 200
callback('Error: ' + self.http.status);

Open in new window

This is calling our same callback function with
err => 'Error:' + self.http.status
posts => undefined

Open in new window

Going back to the if (err) test in the callback err now has a value and so the true statement of the if fires and console.log(err) executes

So to answer your questions
How come we pass only one argument when we call callback function as below?
In the case of an error - there are no posts so we only pass the error value. We could just as easily have done this
callback('Error: ' + self.http.status, null);

Open in new window

It would have had the same result. In JavaScript we don't have to define parameters if we are not going to use them (PROVIDING they are at the end of the parameter list) and as the callback if statement branches on the err value - where the true part does not use posts - we don't need to included it in the call.

How this function knows that which one is err and which one is posts when only one parameter is passed.
The order of the parameters - as described above. err is always in the first position, posts is always second.
posts is optionally defined but we can also call the callback with posts = null

Author

Commented:
Thanks Julian for your detailed explanation!!!
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial