var myArray = ["a", "c", "b"];
myArray.swap(1, 2);
console.log(myArray);
// ["a", "b", "c"];
 
Array.prototype.swap=function(a, b) {
    this[a]= this.splice(b, 1, this[a])[0];
    return this;
}

It could also be done with a temp var, but this solution seems to be the most elegant. The key to this is in the additional arguments the splice() function can accept.

splice(start, itemCount, additionalItems ...)

splice() removes elements denominated by the start and itemCount argument, and – if specified – inserts additional items at the same position.

Also important to note is that splice() returns an array. And to turn that array into an item again we need to select it directly with [0].

var oneArray = ["a", "b", "c"];
var anotherArray = oneArray;
anotherArray[0] = "z";
 
console.log(oneArray, anotherArray);
// ["z", "b", "c"], ["z", "b", "c"]

Ok, but let’s say you’ll need to make a copy of the array. How do you do that?

var oneArray = ["a", "b", "c"];
var anotherArray = oneArray.slice(0);
anotherArray[0] = "z";
 
console.log(oneArray, anotherArray);
// ["a", "b", "c"], ["z", "b", "c"]

If you’d really, really want you could also wrap it into a prototype function. Although the code-characters savings are minimal.

Array.prototype.copy = function() {
	return this.slice(0);
}
 
var anotherArray = oneArray.slice(0);
//vs
var anotherArray = oneArray.copy();

Minimal, but maybe contextually for self-explaining.

ctx.fillStyle = "666";		// text color
ctx.textAlign = "center";		// alignment
ctx.font = "normal 12px Helvetica Neue";		// font
ctx.fillText("my Text, x , y);		// draw

Sometimes, you might want to draw a border around the text. Getting the textHeight should not present a problem, after all we can set the font size directly. But textWidth is not fixed in that way, because it depends (nnnn) on the actual text that is being displayed.

ctx.measureText takes the text as an argument and returns an object with a width property, describing the width of the text.

var texttWidth = ctx.measureText(columnName).width;

width is for now the only inhabitant of that object, but it would be a fair guess, that it might be more densely populate in the future.

<div id="item" class="disabled">Open File...</div>

Next, we check in Javascript is this certain feature is supported. If it is, we replace the disabled element with an active version.

if (isSupported()) {
	$('#item').replaceWith('<a id="openFile">Open File...</a>');
}

Which results in this:

<a id="item">Open File...</a>

Simple, but effective.

So far so good.

As in Javascript Arrays also inherit from Object, I could see not reason, why freezing an array should not work.

var obj = {'a':1, 'b:2'};
Object.freeze(obj);
Object.isFrozen(obj);       // returns true
obj.a = 10;                 // new assignment has no affect
obj.a;                      // returns 1
 
var arr = [1, 2];
Object.freeze(arr);
Object.isFrozen(arr);      // returns true
arr[0] = 10;
arr;                       // returns [10, 2] ... ouch!

It turns out, that it seems to be an implementation bug in Safari (5.1). It’s working in the latest Firefox and Chrome releases.

To check whether freezing arrays works in your brower, click the following button:
Check the Freezer!

ps. I asked the question first on Stack Overflow: ‘Freezing’ Arrays in Javascript?. Thanks for the constructive answers.

Object.keys(myObject).length;

More details at Stackoverflow. This functionality is part of EMCAScript 5 specs.

var array = [ 	{a:13, b:false },
		{a:7, b:true },
		{a:78, b:true } ]

The old, ECMAScript 3 way of checking for objects, in which b is true would be a simple for-loop:

var results = [];
for (var i=0; i<array.length; i++) {
	if (array[i].b) {
		results.push(array[i]);
	}
}

Ok, that’s working, but not very elegant nor concise. Luckily, ECMAScript 5 offers a nicer way:

var results = array.filter( function(item) {
	return item.b;		// if item.b is true
});

var array = [132, 32, 14, 525, 52, 12, 52];
var sum;
for (var i=0; i<array.length; i++ ) {
	sum += array[i];
	console.log(sum);
}

I was slightly puzzled, why the above code outputs Nan instead of the consecutive sums of the array.

var array = [132, 32, 14, 525, 52, 12, 52];
var sum = 0; // sum needs to be init...?
for (var i=0; i<array.length; i++ ) {
	sum += array[i];
	console.log(sum);
}

After declaring sum with a number, it works. Still have to find out why.

var myArray = ["a", "b", "c", "z"];
 
for (int i=0; i<myArray.length; i++) {
	console.log(myArray[i]);
}

But I recently came across a Javascript loop that puzzled me slightly.

var myArray = ["a", "b", "c", "z"];
 
for (var i=0,f ; f=myArray[ i++]; ) {
	console.log(f);
}

Let’s have a closer look what’s happening here. As a reminder, For-statements have the following structure:
for (initiation; condition; increment) { block }

In the initiation, variables are initiated; Condition tests this var, and if it returns true, continues another loop; and here’s something funny; the increment is left blank. Don’t panic, because we are already incrementing i at the condition test.

This is equivalent:

var myArray = ["a", "b", "c", "z"];
 
for (var i=0,f ; f=myArray[ i]; i++) {
	console.log(f);
}

This, however, is not the same:

var myArray = ["a", "b", "c", "z"];
 
for (var i=0,f ; f=myArray[ ++i]; ) {
	console.log(f);
}

i gets incremented before it is used to traverse myArray, therefor resulting in this output:

b
c
z

In nice and simple arrays like in this example, it should not make any difference to test the array length at every time coming around, but a larger ones it might be beneficial.

As usual, take care that the array does not contain any falsy objects. And don’t loop an object that way.

Thanks to the Re-introduction to Javascript https://developer.mozilla.org/en/a_re-introduction_to_javascript for clarifying that issue for me.

Turns out things are not so clear after all. Let’s consider the following case: I have an array of numbers, I’d like to get the sum of all numbers in the array.
One way to do it:

var myArray = [1,2,3,5,7];
for (var i=0, sum=0; i<this.length; i++) {
	sum += this[i];
}
console.log(sum);		// 18

So, shouldn’t this work too…?

var myArray = [1,2,3,5,7];
for (var i=0, sum=0; sum = myArray[i]; i++) {};
console.log(sum);		// undefined

Apparently not… I am trying to find out why not.

This, on the other hand works:

for (var i=0, sum=0; this[i]; sum+=this[i++]){};

There is a implementation port of Processing (aptly called ProcessingJS) by John Resig of jQuery fame. It’s still lacking the 3D features, but not because they would be hard to implement in JS, but rather the OpenGL bindings in the browsers don’t exists wide-spreadly (yet). Let’s hope WebGL is going to change that soon.

After working a lot with Processing, one becomes quite spoilt with it’s methods. The two best kept secrets of Processing are on the one hand the matrix state operations – pushMatrix(), and popMatrix() – and on the other hand the very handy map() method, basically mapping a number from one range to another.

In Javascript’s canvas you have the pushMatrix() popMatrix() equivalents as save() and restore(). The map() methods does not exists as such, but it is easy implemented. I took a look at the Processing source and rewrote the Java methods in Javascript.

var p5 = {};
 
p5.sq = function(a) {
	return a*a;
}
 
p5.constrain = function(amt, low, high) {
  return (amt < low) ? low : ((amt > high) ? high : amt);
}
 
p5.degrees = function(radians) {
  return radians * (180/Math.PI);
}
 
p5.mag = function(a, b) {
  return Math.sqrt(a*a + b*b);
}
 
p5.dist = function(x1, y1, x2, y2) {
  return Math.sqrt(p5.sq(x2-x1) + p5.sq(y2-y1));
}
 
p5.lerp = function(start, stop, amt) {
  return start + (stop-start) * amt;
}
 
p5.norm = function(value, start, stop) {
  return (value - start) / (stop - start);
}
 
p5.map = function (value, istart, istop, ostart, ostop) {
	return ostart + (ostop - ostart) * ((value - istart) / (istop - istart));
}

The code including comments and a minified version is also up on GitHub, show you love and fork it.
https://github.com/trembl/p5.Math.js/

Rather than creating a dedicated object, and as all the function are kind of related to Math, I thought it would be a good idea to extend the Math object itself. (Well, it’s a good idea for my project – your mileage, especially if you are flying with a lot of libraries might vary).

And how to you extend a Javascript build-in object? With prototype, right?

Math.prototpe.sq = function(a) {
	return a*a;
}

Wrong. Because Math does not have a constructor, it therefore hasn’t been constructed and therefore does not have the prototype method. It has been instantiated and you add methods (or functions?) like this:

Math.sq = function(a) {
	return a*a;
}

You get the idea. The new code also lives at GitHub, check it out. https://github.com/trembl/p5.Math.js/