Confusing Javascript. Coding Style. Why Is it that Javascript is often badly written?

(1 comment)

There are some clever things you can do in code to make things quick and simple, such as in C you can increment a counter with

i ++;

This is nice simple code, does not do too much, but just enough. Also you can have conditional values returned in a line with the ternary operator

b = (a == 3) ? "haha" : "Hoho";

So if 'a' is equal to 3, set b to "haha", otherwise set b to "Hoho". Sure, this takes a bit of getting used to, but is not too much of a stretch, and when you get used to it, it makes for easy to read code.

So I wanted to refresh my memory on how to perform an AJAX call. I use them all the time, but generally I just put all the variables in the right place and use a css class that does all the hard work for me. Now I have to use some AJAX to call my API, download some data to the DOM via an API and do something with it.

Pretty simple really... except whenever I look up javascript examples, I find that the coding is so terse, it is impossible to understand what you are copying and pasting, so you just copy, paste stuff the variables in the right place, and hope for the best. This was the code I implemented for calling a URL, downloading a JSON formatted list, and passing it to a div

$(document).ready(function () {
  $('#get-data').click(function () {
    var showData = $('#show-data');

    $.getJSON('example.json', function (data) {
      console.log(data);

      var items = data.items.map(function (item) {
        return item.key + ': ' + item.value;
      });

      showData.empty();

      if (items.length) {
        var content = '<li>' + items.join('</li><li>') + '</li>';
        var list = $('<ul />').html(content);
        showData.append(list);
      }
    });

    showData.text('Loading the JSON file.');
  });
});

This works, but code is buried in parameter lists, so it is impossible to work out what is code, and what is a parameter. You should not mix the two in my opinion. Sure, a function pointer can be in the function list, but the function itself should be defined separately. Also, why do people never put return statements after a function is finished? Once a function is finished, the return statement lets people know it is finished. Python programmers are guilty of this too, and though it is not always necessary, sometimes it is good to comment the end of a code block, or put a return statement at the end of the function.

I rewrote this code as best as I could to get an understanding of what it did, and this is what I came up with:

{% block content %}
<a href="#" id="get-data">Get JSON data</a>
<div id="show-data"></div>
{% endblock content %}

{% block postscript %}

<script>
$(document).ready(callmefirst);

function callmefirst() {
  $('#get-data').click(gogetdata);
  return
}

var showData = $('#show-data');

function gogetdata() {
    $.getJSON('example.json', parsedata4display);
    showData.text('Loading the JSON file.');
    return
}

function parsedata4display(data) {
    showData.empty();
    var list = '<ul>';
    for (d=0; d < data.items.length; d++) {
        list += '<li>' + data.items[d].key + ': ' + data.items[d].value + '</li>';
    }

    if (d > 0) {
        list += '</ul>';
        showData.append(list);
    }
    return
}
</script>

{% endblock %}

This is a django template, so {% block content %} contains the HTML body, and {% block postscript %} contains javascript after all libraries such as JQuery have been loaded. Have a read, and comment as to whether you think my code is clear.

Current rating: 4

Comments

James Bloggs 1 year, 3 months ago

I find the same issue, though I am not an experienced Javascript Programmer. This programming style goes against everything I was taught at uni regarding programming style, but from looking at most code examples, it is considered the norm in Javascript.

Link | Reply
Currently unrated

New Comment

required

required (not published)

optional