Pitfalls of JavaScript arrays

JavaScript has its bad sides, and arrays sometimes have unexpected behavior.

Adding two arrays

var t1 = [ "a", "b" ]
var t2 = [ "c", "d" ]
var t3 = t1 + t2
document.write("t3 = " , t3)

Result, t3 = ["a", "bc", "d"] ???

You must use concat instead:

var t3 = t1.concat(t2)
document.write("t3 = " , t3)

Initializing an array

var a = new Array(1)
var b = new Array(1, 2)
document.write(a)
document.write(b)

The first array is empty, while the second contains [5,10]. What happens is that giving 5 as an argument declares an array with 5 empty slots.

However, we can initialize an array with a single value in the case of a character string.

a = new Array("5")
document.write(a)

Scanning the content

All languages ​​have a for .. in loop, even C++ since version 11. The same applies to JavaScript. But the functioning is surprising. 

var a2 = [ "one", "two", "three"]
for(var x in a2) {
  document.write(x)
}

This displays numbers because it returns the keys, attribute names or indices in the case of a simple array, not the values. If you do not want to wait for the for .. of coming implementation, write instead:

for(var x in a2) {
  document.write(a2[x])
}

But conventional loop will be faster as shown in chapter Scanning an array.

Whether two arrays are identical

The array a is created:

var a = [1, 2]

It is compared with its content (or another array with same content):

document.write(a == [1, 2])

Résult: false. The array is not identical to itself!

To get a right result, it must be converted to a string:

document.write(a.join() == [1,2].join())

Now the result is: true.

Comparing two arrays, again

Here below two arrays... 

var a1=[4,5,6]
var a2=[1,2,3]

The first is it lesser than the second? console.log(a1 < a2)

Is it greater? console.log(a1 > a2)

Comparing now these two other arrays. The first is it lesser than the second?

var a1=[0,500,6000,10000]
var a2=[1,2,3]
document.write(a1 < a2)

Apparently, only the first element matters... And if the first element is the same in both arrays, only the second matters, and so on...

Associative array: how to order it?

There is not really associative array in JavaScript. An object is used to fulfill this role, attribute names being the keys. As we have seen, we can display a list of keys with a for .. in loop. But how to put the keys in alphabetical order?
The following function produces this result ...

function ksort(ob) {            
  var k = Object.keys(ob)
  var cl = {}
  for(var i in ob) {
    cl[i] = ob[i]
    delete ob[i]
  }
  k.sort()
  for(var i = 0;i < k.length; i++) {
    ob[ k[i] ] = cl[ k[i] ]; 
  }
} 

var ad = { "z" : 50, "c" : 30, "a": 5 }
ksort(ad)
for (var x in ad) {
  document.write(x)
}

What we did was creating a new array with the attributes of the former, sort this array, save the values, delete the content of the former, and recreate each key from the keys of the new array, with the initial value. We then have the "keys" in alphabetical order!

With these traps in arrays, we saw half of JavaScript quirks. The other half is mainly in Boolean operations. Then are the good parts, more numerous than we think.

© 2014 Xul.fr