JavaScript Tips, Traps and Hacks

I am a China based develper currently involved in JavaScript. It’s a fantanstic exerience to discover so many nice things in such a scripting language with an initial design goal to be an add-on of an early web browser. Compared to other programming languages I have experience with, including C/C++, VB(>=7), C#, Java, Python, Ruby, ActionScript, PHP, etc, JavaScript is the most dynamic and thrilling one.

I share some of the interesting tips and hacks in this post so it’s easy for me (and others) to pick them up for later use. This post is being updated.

 

Hack # Converting the arguments object to an Array [2007-1-15]

The arguments object is an Array-like object providing access to arguments passed to a function. When hacking with functions, we frequently need to maniqulate and pass around arguments as an Array.

The Prototype library uses it’s $A() function to accompanish the conversion, which is intuitive and beautiful.

Function.prototype.bind = function() {
  var __method = this, args = $A(arguments), object = args.shift();
  return function() {
    return __method.apply(object, args.concat($A(arguments)));
  }
}

Yet there is a another way.

//... inside a function defination
var args = [].slice.call(arguments);

// or var args = Array.prototype.slice.call(arguments);
//...

The slice(start, end) method of an Array object returns a copy of a specified portion of the array. Here we omit the start and end arguments and call slice() upon the arguments object. An array containing all arguments is returned. Then we can modify the array as we need and pass it to the apply() method of functions.

Notice that slice() only does a shallow copy and the return value is just an array any without magical behaviour of the arguments object. There is no args.callee property. Moreover, if a parameter is listed at the nth position in the parameter list of the function defination, arguments[n] is a synonym for the local variable corresponding to the nth argument. Any change made to arguments[n] will affect the local variable because it’s actually modifying the named property of the call object. However, since args is just a shallow copy of arguments, assigning args[n] will not affect the local variable. To demonstrate this,

function f (a) {
	alert('a: ' + a); 
	var args = [].slice.call(arguments); 
	arguments[0] = 'Assigning arguments[0] affects a'; 
	alert('a: ' + a);
	args[0] = 'Assigning args[0] does not change a'; 
	alert('a: ' + a);
}
f('JavaScript rocks!');

The three alerts will display JavaScript rocks, Assigning arguments[s] affects a and Assigning arguments[s] affects a in order.

Tip: [].slice.call() can be used for any Array like objets, not only limited to the arguments object.

 

Tip # Using object as associative array to replace switch…case…default

//coming

 

Trap # this points to the global object in "define, execute and vanish" style anonymous function invocation

//coming

 

Hack # The fastest way to find the min/max element in an Array

//coming

Advertisements
This entry was posted in JavaScript. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s