Is jquery a procedural language?

Hi, Please assist me,

The below code is not executing in a procedural fashion, my variable locUrl in console.log(locUrl + " second display"); gets executed first, but it is way below in the code :thinking:, then console.log(locUrl + " initial display");
displays after.

this affects the logic of my code and throws me off.

can you help me locate any logical error below …

$(document).ready(function() {
  //var darkRequest = [];
  var locUrl = "";

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var curLocation =
        position.coords.latitude + "," + position.coords.longitude;
      locUrl =
        "https://api.darksky.net/forecast/[mykey]/" +
        curLocation;
      console.log(locUrl + " initial display"); // THIS VARIABLE DISPLAYS SECOND
    });
  } else {
    console.log("please enable your location");
  }

  console.log(locUrl + " second display"); //THIS VARIABLE IS DISPLAYED FIRST
  if (locUrl) {
    $.getJSON(locUrl, function(data) {
      var items = [];
      $.each(data, function(key, val) {
        items.push("<li id='" + key + "'>" + val + "</li>");
      });

      console.log(items);
    });
  }
});

Thank You!, RyzorBent.

Geolocation.getCurrentPosition() is asynchronous that’s why it executes later

Okay, thank you … this makes sense … 've also moved the if statement into the getcurrentposition function and all seem to be working fine now.

$(document).ready(function() {
  //var darkRequest = [];
  var locUrl = "";

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var curLocation =
        position.coords.latitude + "," + position.coords.longitude;
      locUrl =
        "https://cors-anywhere.herokuapp.com/https://api.darksky.net/forecast/[mykey]/" +
        curLocation;
      console.log(locUrl);
      
      if (locUrl != "") {
    $.getJSON(locUrl, function(data) {
      var items = [];
      $.each(data, function(key, val) {
        items.push("<li id='" + key + "'>" + val + "</li>");
      });
      console.log(items);
    });
  }
    });
  } else {
    console.log("please enable your location");
  }
  
});

I know you’ve already solved your problem, but I would just like to try to explain to you why your code was behaving this way. It’s because HTTP requests are asynchronous, meaning that the JS engine doesn’t wait for the response to continue executing. It simply continues executing the rest of the code, and when the response is ready, the callback function you provide is executed (it’s “called back”). So when you moved the if statement inside the getCurrentPosition method, essentially you’ve made it part of its callback, so now it waits for the response from getCurrentPosition before executing.

As a note: jQuery is not a language, it’s just a JavaScript library.

2 Likes

Thank you for the explanation, it helped further clarify the mist around jquery :slight_smile:

1 Like

It looks like your problem has been fixed and explained well by @AmirF27, but your question has not: “Is JavaScript a procedural language?”

I think part of becoming a capable coder is being able to do more than just patching problems (i.e. asynchronous execution); it is understanding how they got there and knowing possible design patterns to avoid or embrace them. So, I think this is a very good question to examine JavaScript and programming principles in general.


Is JavaScript procedural? Yes. No. One of, if not the best, things about JavaScript is that it is extremely flexible. You have had to solve the problem of asynchronous execution by using part of functional programming, a callback. This is good, but it does not answer the question, “Is JavaScript procedural?” As I already stated above, JavaScript can implement many design paradigms, including procedural, and it can do so in your case with some code tweaks.

Unfortunately the latest JavaScript support in browsers is not all here, so to be able to run this in a browser, you will need to use special tools called transpilers to make newer code work in older browsers. This is probably a bit too advanced for someone starting out with JavaScript and jQuery, but it is important in this case to see the procedural capabilities of JavaScript. Eventually you will become comfortable enough with JavaScript to use these tools, and the latest JS specs will be standard across browsers soon enough anyway.


First procedural way, jQuery .then() (should be fine to use this without any extra work, be aware it is not the same as ES6 Promises, a new official part of the latest JavaScript).

Example usage:

$.getJSON(url)
  .then(function successHandler1() {
    alert( "$.get succeeded! :)" );
  })
  .then(function successHandler2() {
    alert( "Just a reminder, $.get succeeded! :P" );
  })
  .catch( function() {
    alert( "$.get failed! :(" );
  });

This is very straightforward, and I believe it is easier to understand than callbacks when using getJSON().


The latest JavaScript approach, Async Functions (will work natively in the latest Node version, but will require a transpiler to work on the browser).

Example usage:

function getLocation() {
  navigator.geolocation.getCurrentPosition(function(location) {
    return location;
  });
}

async function getData() {
  if (navigator.geolocation) {
    var location = await getLocation();
    var locUrl = 'http://url/?loc=' + location;
    
    // fetch is a new native version of jQuery's getJSON
    var response = await fetch(locUrl);
    var json = await response.json();
    console.log(json);
  } else {
    alert('Your device does not support geoLocation!');
  }
}

Those are two examples of procedural programming in the latest JavaScript. Procedural programming is good, because that is how our brain thinks. Being able to view responses directly in order without having to look through callbacks, I would argue, is much better than going through callback after callback. I think my last example shows how JavaScript is becoming a great language able to do functional programming approaches with procedural thinking for complicated async parts. I hope this answered your original question, and that it will help you understand these problems and JavaScript better.

1 Like

@RyzorBent You’re very welcome. :slight_smile:

@IsaacAbrahamson That’s a great explanation! I’m personally in love with Promises. :smiley:

1 Like