Chapter 7 - Operators

The first line in our getWeather function is the following:

var url = apiUrl +
  '?appid=' + apiKey +
  '&units=imperial' +
  '&lon=' + coordinate.longitude +
  '&lat=' + coordinate.latitude;

The expression above, although spans over multiple lines, is considered to be one line of code since it is an assignment to a variable which only ends at the semicolon. As you may have already understood from context, the above assignment takes the value of apiUrl and then adds to it (appends) the additional query params (parameters) we need to complete the URL.

As an example, when we send a request to the URL:

http://api.openweathermap.org/data/2.5/weather
  ?appid=fa32f&units=imperial&lon=30&lat=10

The server at Open Weather Map will receive the entire URL as a string and then parse it (using conventions) into four query parameters which begin after the question mark (?) and are separated by ampersands (&). The first query param, called appid, will hold the value of "fa32f" which is the API Key we received when we signed up and stored in the variable, apiKey. The second parameter we use, unit, is going to be hard coded (cannot be changed programmatically) into our function for now, and will just make sure we get our data in units that make sense to us (if you're not in the US, feel free to change this value from imperial to metric). The third parameter will be called lon (longitude) and will hold the value of "30" and the fourth will be lat (latitude) and will hold the value of "10".

It's important to note that we didn't just come up with those query parameters and make up names for them. The Open Weather Map API expects those specific keys! If you want to see what other query parameters are available through the Open Weather Map API, check out their friendly documentations.

So back to our code. When we do something like:

apiUrl + '?lon=' + coordinate.longitude

We simply concatenate the string "?lon=" to the string that we already have in our apiUrl variable. Then we take the value in coordinate.longitude (note how coordinate is an object that has a property by the name of longitude) and concatenate it to the rest of our string. So if our coordinate object looked like this:

coordinate = {
  longitude: 30,
  latitude: 10
};

Then we would end up with the same URL we used as an example above:

http://api.openweathermap.org/data/2.5/weather
  ?appid=fa32f&units=imperial&lon=30&lat=10

Note the ampersand (&) separating the two query parameters (lon and lat). This is normally how we transfer data in query parameters. It's just a convention, and I strongly encourage you to stick to it. In this case, you ought to stick to it, or else the Open Weather Map API won't understand what you want.

While we're talking about string concatenation with the plus operator (+), let's talk about more intuitive uses of the mathematical operators we have in JS. Here are the most important ones:

Just like the good 'ol math you know (or don't), the above operators do magic to numbers just like you'd expect.

5 + 2; // yields the value of 7

5 * 2; // yields the value of 10

The Modulo, used with the percent (%) sign, simply gets us the remainder of a division of two numbers. So this:

5 % 2; // yields the value of 1

(since 5 divided by 2 has a remainder of 1)

Please note that if you try to do addition on a string (and not a number), you will get string concatenation (like our previous example showed), so:

'3' + '5';

Will yield the string "35" rather than the number 8 since the "3" and "5" we used above are actually strings because they are wrapped in quotes.

So enough about arithmetic operators. They behave like you'd expect in most cases. JS has a few "gotchas", but if you test your code and follow conventions, you should be good to go.

Let's get back to our main code.

The second instruction in our getWeather function is this:

makeRequest(url, callback);

And while it looks like a lot more than just one instruction, it is actually pretty simple. It calls (invokes) our makeRequest function (which we haven't discussed in detail yet). Again, adding parentheses (()) to the end of our function name is how we invoke it. In the scenario above we're invoking makeRequest with two arguments:

  1. url - the URL that we've just finished constructing and stored in the url variable, and
  2. callback - a function to be executed once the computer finished retrieving the weather data. FYI, callback is the same argument we retained from our own, getWeather, invocation. We're just passing it along to makeRequest's invocation.

Don't freak out about this stuff; we're going to talk about it in more detail soon.

Table of Contents
Home