I prepared an IMG tag to display a specified image URL by setting the src attribute using JavaScript. The src attribute of that image has been left empty for that purpose (see code below).

1
2
3

<div id="imgWrapper" style="display: none;">
  <img id="imgEl" src="" alt="Empty src attribute!" />
</div>

1
2
3
4

function showImage(src) {
  $('imgEl').src = src;
  $('imgWrapper').show();
}

Later I discovered by using Firebug that an additional request is being sent to the server. That request used the same path and query string as the original page request used. That way two tickets were added to the shopping cart instead of one. What was keeping me from discovering that issue earlier was that the first response from the server didn’t know yet about the second ticket – so the browser displayed only one ticket in the shopping cart. After reloading the second ticket showed up.

Some JavaScript debugging and HTML commenting later I found out that this behaviour comes from the IMG element with its empty src attribute. Firefox uses the currently called URL for that image to get its content! Even though the wrapping DIV is set to not display it the browser loads that images content.

Happy about figuring out what caused the problem I rewrote the JavaScript mechanism for displaying that specific image. Using the excellent Prototype Library the code snippet would look something like this:

1
2

<div id="imgWrapper" style="display: none;">
</div>

1
2
3
4
5
6
7
8
9

function showImage(src) {
  var wrapper = $('imgWrapper');
  var img = $(document.createElement('img'));
  img.src = src;
  img.alt = 'Don\'t use an empty src attribute!';
  wrapper.update('');
  wrapper.appendChild(img);
  wrapper.show();
}

Problem

A typed language defines types (such as integer, string, boolean, …) to variables – that way the contents of variables are clearly defined. When not having this restriction (as JavaScript doesn’t) one might do the following (JavaScript code):

1
2

var alpha = 'This is some String';
alpha = 5;

Most of the time this is OK, but there are times when you clearly need to know how values are evaluated. You might check for content if you need to do special things for special types. Let us assume you want to assign alpha a default value if it is empty (''). Your code might look like this:

3
4
5

if(alpha == '') {
    alpha = '-';
}

This is perfectly OK if alpha is a string.

Nevertheless, alpha could always be an integer, too. And strangely, when the value of alpha is 0 (zero) the boolean expression alpha == '' evaluates to true! So alpha would become '-' in our case, which is not exactly what we intended to do, right? This could lead to some serious errors in your programme flow.

Solution

What can you do about it? Is there anything you could do? Yes, there is. When operating with values like '' (empty string), true/false (boolean contents of variable) and 0 (zero) you should always use the strict equivalence operators: === (equals to and same type) and !== (not equals to or not same type). The above code would then look something like this:

3
4
5

if(alpha === '') {
    alpha = '-';
}

That small change effects the semantics of the code. It now sets the default value if and only if the value of alpha is equals to '' and the type of alpha is the same as the type of '' (which is string, respectively). In fact, this is what you wanted to do, isn’t it?

If you use strict equivalence operators correctly then you can make sure the code does what you want it to do. Keep this in mind if you like writing correct code using untyped languages.

See also

Here are some useful links for JavaScript and PHP:

• JavaScript – Comparison Operators
• PHP – Expressions