TheHippo » JavaScript

JavaScript curiosity: mixing function and global scope

Hippo — Mon, 31 May 2010 15:05:46 +0000

I am developing with JavaScript for a while and I am used to a lot of it quirks. But even after years of using this language you still find new curiosities. Today a struggled a while with this one.
Considering this piece of JavaScript code:

var i = 10;
function foo() {
i++; // i is now 11
console.log("foo1: "+i);
i = 0; // i is now 0
console.log("foo2: "+i);
};
console.log("global1: "+i); // should be 10
foo();
console.log("global2: "+i); // and now 0

Ok. That’s fine. Now we change the code a little bit to this one:

var i = 10;
function foo() {
i++; // is now 11
console.log("foo1: "+i);
var i = 0; //create a new variable with value 0
console.log("foo2: "+i);
};
console.log("global1: "+i); // expect: 10
foo();
console.log("global2: "+i); // expect: 11

What do you expect? I was quite surprised:

global1: 10
foo1: NaN
foo2: 0
global2: 10

Why do we get a Not a Number? Why is JavaScript not using the global var as in the first example? Why is the global variable i not increased, the operation took place before the declaration of the local variable i? JavaScript has some “strange” rules about variable declaration. Every variable declared within a function is initialised at the beginning of the function, so our function actually would look like this:

var i = 10;
function foo() {
var i; //undefined
i++; // undefined + 1 = NaN
console.log("foo1: "+i);
i = 0; //and now 0
console.log("foo2: "+i);
};
console.log("global1: "+i); //10
foo();
console.log("global2: "+i);//still 10, because global i has not changed

Looking into the rules of JSLint which helps to verify JavaScript code to improve the quality of your JavaScript you get a few rules how to safely declare variables:

JavaScript allows var definitions to occur anywhere within a function. JSLint is more strict.
JSLint expects that a var will be declared only once, and that it will be declared before it is used.
JSLint expects that a function will be declared before it is used.
JSLint expects that parameters will not also be declared as vars.
JSLint does not expect the arguments array to be declared as a var.
JSLint does not expect that a var will be defined in a block. This is because JavaScript blocks do not have block scope. This can have unexpected consequences. Define all variables at the top of the function.

So Remember: Variables are not initialised when they are declared!

Links:

all JSLint rules for quality JavaScript code.
WTFJS.com, a page collection all kinds of JavaScript curiosities.

SQL Buddy – a PHPMyAdmin alternative

Hippo — Fri, 11 Dec 2009 04:05:09 +0000

In the last time I am back to a lot of server development. This also means a lot of database engineering. For the most the time I have used PHPMyAdmin for nearly every I have to work with a MySQL database. After a while a got a little bit disappointed, because PHPMyAdmin is a kind of bloated and sometimes it’s just take to long to perform a simple operation.

The offline alternative

A looked around for some alternatives and the first found was the MySQL Query Browser which is part of the MySQL GUI Tools. It is fast (okay, it is a installed application, but still its fast) and very comfortable for editing and creating tables and databases and also okay for just filling / editing some data inside the tables. Also nice is that is free.

MySQL Query Browser - result view

MySQL Query Browser - Table option view

In the MySQL GUI Tools there is also a so called MySQL Administrator which is nice for some statistics, setting up users and creating and restoring backups.

The online alternative

There is only one but a big con with the MySQL Query browser. I can not run it on my server, because therefore I needed to open the MySQL port and that one thing I definitely will not do.

So I searched for a while on the web and the tool which looked best for me was SQL Buddy:

PHP-based
makes heavy use of AJAX
enough options for the most common operations
size just 1 MB (instead of 11 MB for the full version of PHPMyAdmin)

SQL Buddy - result view

SQL Buddy - Table option view

For the most common tasks SQL Buddy is perfect. It is nearly as fast as installed application and easy to use.

But nobody is perfect, there are few thing I found out, that could not be archived with SQL Buddy. There is no option to create and import xx.sql.bz2 files, and currently no handling of the different storage engines, which means that you could not use foreign keys for example.

Conclusion

For you local computer you are okay with the MySQL GUI Tools and SQL Buddy, on the server I will use SQL Buddy but for the more complex tasks I will stick to PHPMyAdmin.

Minefield – Firefox preview

Hippo — Mon, 12 Oct 2009 09:10:39 +0000

I make no secret of that I am a big fan of the Firefox web browser. Except of a few things that I will name later I am/was always impressed by the speed improvements that are made over the past few years, which seems very important to me, because many pages you use in you daily life are more and more based on heavy JavaScript functionalities. A few days ago I decided to give a try to the newest development version of the Firefox – named Minefield – and make some tests.

Building

Instead of using a nightly build I decided to to compile it by myself, which was not that hard. If you like to do it yourself could simply follow the instruction on that page: Simple Firefox build. I used slightly modified the mozconfig file in hope to get the best performance:

. $topsrcdir/browser/config/mozconfig
mk_add_options MOZ_OBJDIR=@TOPSRCDIR@/objdir-ff-release
mk_add_options MOZ_MAKE_FLAGS="-j4"
ac_add_options --disable-tests
ac add_options --disable-crashreporter

Testing

As performance test I used the Sunspider JavaScript Benchmark from the Webkit developers. To make it short, here are the result for 3 versions of Firefox:

time in milliseconds, faster is better

Results

When I switched from from Firefox 3.0.x to the 3.5 branch of Firefox I was really amazed by the performance boost gained through the new JavaScript engine Tracemonkey. As the results above show the next Firefox releases will get another boost. Good news!

P.S.: Other things I like Firefox for is because of all the very useful add-ons, I hardly could imagine a day as a web-developer without the use of Firebug. AdBlock saves my nerves every day. Linkification, TinyURL generator and Greasemonkey are just a few other I really like and needed to be named here.