Edit: This “trick” is used in a lot of JavaScript compression tools or pre-made scripts, like Adobe Dreamweaver’s JavaScript roll-over images.
Note: This is actually a JavaScript trick that was, I would think, never meant to be actually executable. Do not use it in production environments, it’s unstable and clearly more confusing than useful. It’s just cool to know.
JavaScript Browser Support
JavaScript has always had its share of standardization issues. From Microsoft’s JScript to even Adobe’s ActionScript, they are all, afterall, just ECMAScript Dialects (well, since 2 years after JavaScript’s invention, in 1997).
In any cases, some very obscure less documented stuff exists in JavaScript, often akin to indivial dialects of ECMAScript. One of them is the omission of curly braces in conditional statements and functions.
Omission in conditional statements actually looks like it’s standardized since all ECMAScript dialects support it perfectly (JavaScript, JScript, ActionScript 2.0, ActionScript 3.0). However, it heavily lacks documentation and is often omitted entirely from books.
On the other hand, curly braces omission with functions will not work in anything else than Firefox. This is no surprise though, since Firefox supports a much more recent version of JavaScript than other browsers, although I doubt that functionality is actually part of ECMAScript.
As of Firefox 3.1, it supports version 1.9, compared to 1.5 which is standard on KHTML/Webkit/Chromium browsers like Konqueror, Safari and Chrome. Opera and Internet Explorer have version 1.5 and version 1.3 respectively, but they cannot really be judged on their JavaScript version since they both use custom JavaScript builds. Opera uses a combination of standard ECMAScript support plus JavaScript and JScript extensions, providing it with greater support for Internet Explorer-only scripts. On the other hand, Internet Explorer uses JScript entirely, Microsoft’s own version of JavaScript, which adheres in its own ways to the ECMAScript standard.
What’s a curly brace (or bracket)?
Note: In every example, omitting the semicolon at the end of a statement is totally possible and will not influence the functionality of the code in any way. Despite what it might look like in these examples, a semicolon is purely stylistic in JavaScript and is only used here for the sake of familiarity (because most programmers write like this and it’s a good practice to do so for languages like PHP that do require them).
In case you missed on the curly brace thing, this is a curly brace set: { }
With Conditionals
Following is traditional if conditional statement.
if (boolean == true)
{
alert("test");
}
Next up is the same construct without the curly braces.
if (boolean == true)
alert("test");
Both of those work exactly alike. Much in the same way, if else conditional statements can be used.
if (boolean == true)
alert("test";
else
alert("test2");
And so, this short-hand like syntax can also be used with conditional loops like for and while.
With Functions
Albeit not being supported in anything else than Firefox, it’s still interesting to note that functions will also work without the curly braces, like this.
function myFunction() //code to execute;
Particularities
However, it’s important to know the omission of curly braces does not function exactly like regular statement blocks. In fact, it is only possible with one statement, after which the other statements will be executed as if they were out of the condition of function. This is due to JavaScript’s ignorance of Line Returns and Tabulations. Don’t forget JavaScript reads everything as one line, so the indentation shown here simply illustrates how useless it is to the code’s contructs.
The following two examples produce the exact same output.
With Curly Braces
var myVar = 10;
if (myVar == 10)
{
document.write("myVar is equal to 10.<br>");
}
document.write("This block executes even if the if condition is not met.";
Without Curly Braces
var myVar = 10;
if (myVar == 10)
document.write("myVar is equal to 10.<br>");
document.write("This block executes even if the if condition is not met.";