Home

JavaScript language advanced tips and tricks

Mon, 06/30/2008 - 21:12 — John Riche

The guys behind the jslibs project have created a nice wiki with great JavaScript tips and tricks. Just see for yourself through the following samples. Some of them might not be available to all browsers but are worth a closer look...

Check if an object is not empty:

  1. function isNotEmpty(obj) {
  2. for ( var tmp in obj )
  3.   return true
  4. }

Transform the arguments object into an array:

  1. function foo() {
  2.   Array.slice(arguments); // is ['aa',11] 
  3. }
  4. foo('aa',11);

The singleton pattern is a design pattern that is used to restrict instantiation of a class to one object. This is useful when exactly one object is needed to coordinate actions across the system:

  1. function MySingletonClass() {
  2.  
  3.   if ( arguments.callee._singletonInstance )
  4.     return arguments.callee._singletonInstance;
  5.   arguments.callee._singletonInstance = this;
  6.  
  7.   this.Foo = function() {
  8.     // ...
  9.   }
  10. }
  11.  
  12. var a = new MySingletonClass()
  13. var b = MySingletonClass()
  14. Print( a === b ); // prints: true

Functions argument default value:

  1. function foo( a, b ) {
  2.   a = a || '123';
  3.   b = b || 55;
  4.   Print( a + ',' + b );
  5. }
  6.  
  7. foo(); // prints: 123,55
  8. foo('bar'); // prints: bar,55
  9. foo('x', 'y'); // prints x,y

Insert an array in another array:

  1. var a = [1,2,3,4,5,6]
  2. var b = ['a','b','c']
  3. var insertIndex = 5;
  4.  
  5. Array.concat( a.splice( 0, insertIndex ), b, a );
  6. // Result: 1,2,3,4,5,a,b,c,6

No votes yet

Comments

Wed, 07/16/2008 - 20:46 — Andrea Giammarchi (not verified)

5 snippets, 1 partially correct

Hi John Riche,
I do not know why I am here, probably because of your chose title ...

There is nothing truly advanced in your suggestions, specially because most of these are wrong.

The isNotEmpty fails with every kind of "advanced instance"

  1. function MyConstructor(){};
  2. MyConstructor.prototype.myGenericMethod = function(){
  3. };
  4. isNotEmpty(new MyConstructor); // true, method failure

The singleton uses privileged methods without a reason, so as basic example is not that good.
However, the point is that a singleton pattern with a public instance, sounds really everything but advanced.

  1. MySingletonClass._singletoninstance = new MySingletonClass; // and bye bye sinlgeton

There are different way to implement a better singleton, and this is only one of them:

  1. Singleton = function(){
  2. 	function Singleton(){
  3. 		if(_instance)
  4. 			return	_instance;
  5. 		else if(this instanceof arguments.callee){
  6. 			_instance = this;
  7. 			/** your constructor stuff here */
  8. 		}
  9. 		else
  10. 			return	new arguments.callee;
  11. 	};
  12. 	// you can use this scope to create prototypes too, or the external one
  13. 	var	_instance;
  14. 	return	Singleton;
  15. }();
  16.  
  17. Singleton() === Singleton() && new Singleton() === new Singleton();
  18. // true

With the function foo, and default arguments, you will never be able to set an empty string, a null, an integer (0), a boolean (false), because of your implementation. Check with === undefined instead.

Last creation works, but it is using a public static Array method to perform a simple task like this one:

  1. var	a = [1,2,3,4,5,6],
  2. 	b = ['a','b','c'];
  3. a = a.splice(0, 5).concat(b, a);

I do like people that share their knowledge, but at the same time, I think that the topic "advanced" is the most inflated ever, daily, and for everything about JavaScript language.

I hope you will agree with me.

Kind Regards,
Andrea Giammarchi

P.S. for the slice, and to avoid compatibility problems, use the zero value as second argument

Thu, 07/17/2008 - 11:45 — John Riche

Where to draw the line between basic and advanced code !?

Hi Andrea and thank you for your input, especially as you are raising great points.

The first one would be about the "advanced" term I've used in the article's title. You're right in the fact that this might not be as advanced as you'd wish but where would you draw the line ? I personally think that nowadays, when you write some code that go away from the rails of mootools, JQuery, Prototype or any other super easy to use Javascript frameworks, I'm tempted to call it advanced Javascript. Language features such as "prototype", "callee" or "arguments" might not be on everyone's Javascript vocabulary either.

While you are perfectly right with the "IsNotEmpty" and default arguments techniques, these might respectively be useful for simple cases and for code clarity.

Finally, all these samples were taken from the JsLibs wiki which you could enhance if you'd like. I'm sure lots of people will benefit from your input.

Anyway, thanks again for your comments.

John.