Some Random JavaScript Coding Tidbits

Although my knowledge of HTML and CSS seems somewhat rounded and complete, I don’t feel the same way about JavaScript. I always seem to be learning something new, or else reminding myself of stuff I might have learned years ago but have forgotten.

So here are a few things I’ve recently learned or read about that might be useful to you.

Functions With Optional Arguments

Have you ever done the following, or something like it:

alert("hello world!");

Wow, that’s complex stuff, huh? Well, as you probably know, the alert() function is built into the language. You generally pass a single argument into the alert() function, and the browser will throw a pop-up message to the user displaying the message passed in.

But what happens if you do this:

alert("hello world!", "How you doin'?");

You might assume one of two things should happen: (1) Two consecutive alerts showing the same message, or (2) an error with no alert. But the answer is neither. Instead, the result is exactly the same as the first example that has only one argument.

The reason for this is that, in JavaScript, function calls can accept an unlimited number of arguments — even if the defined function itself only processes one or two (as in the case of alert()).

So what does this mean? Well, this has its pros and cons. If someone mistakenly adds an extra argument to a function call that will only deal with a certain number of arguments, they could be left scratching their heads over why the argument isn’t being processed, since no error informs them of the problem.

On the plus side, this allows you to write functions that accept optional arguments, and then write code to deal with this accordingly. This happens all the time in jQuery, and it’s something that can make your functions more flexible.

Redefining Native Objects

While we’re on the topic of alert(), here’s another thing it might be useful to know. Try this:

function alert(myvalue) {
    document.write(myvalue);
}

alert('hello world');​​​​

To save you the trouble, here it is in a fiddle.

In this example, we’ve redefined the alert() function so that instead of the message being displayed in a customary alert dialog, the alert() function writes the message onto the page. In the past, this also meant you could redefine other values, like the undefined property.

Try the following example in an older browser like IE8:

var undefined = 'hahaha';
var myvar;

if (myvar === undefined) {
    alert('it is undefined');
} else {
    alert('it is defined');
}

Although the myvar variable has not yet been defined, when we check to see if it’s equal to “undefined”, the if-else statement resolves to tell us that “it is defined”. This is because of what we did on the first line of that code block: We redefined “undefined”.

Update: As pointed out in the comments, being able to redefine certain properties like “undefined” is no longer possible in ECMAScript 5 compliant browsers. But this does work in an older browser, like IE8.

Comparing Strings Like Numbers

You probably have done numeric comparisons before using greater-than or less-than operators (“>” and “<”). And if you’ve wanted to compare two strings, you’ll just check to see if they’re equal. But you can also do this:

if ('baseball' > 'football') {
    alert('baseball rules!');
}​​​​​​​​​ else {
    alert('football rules!');
}​

Notice that I’m checking to see if the string “baseball” is greater than the string “football”. Unfortunately, JavaScript doesn’t know anything about sports. Baseball is obviously much greater than football. But in this case, the result will be an alert message of “football rules!”. Try it.

So how does the browser calculate which string is greater? Well, it simply assigns a number value to each letter and then the comparison is done from the resulting assigned numbers, comparing each digit from left to right (not the numbers as wholes). To make the baseball/football comparison return a positive alert for us baseball fans, all we have to do is convert the first character in the string “football” to uppercase, like this:

if ('baseball' > 'Football') {
    alert('baseball rules!');
} else {
    alert('football rules!');
}

Uppercase letters are viewed as lower in value than lowercase letters, so now the if-else statement will return the correct result — that baseball is in fact greater than football.

Again, this is not necessarily something that you’ll be using any time soon. It’s not often you have to compare strings in this way. But it’s good to know that it is possible should the need for such a computation ever arise.

Update: Thanks to “bz” in the comments for a few clarifications in this section. Clearly, I should be paying him to write this. :)

More Like This?

What do you think of these types of posts? I normally don’t cover JavaScript as much as I do CSS. But I would like to publish stuff I pick up here and there, if for no other reason than to have a reference of my own to use. Your thoughts are welcome — especially if anything I’ve said here is incorrect.

Source : http://www.impressivewebs.com/random-javascript-coding-tidbits