Javascript 2 dimensional array

Question

Can anyone tell me why this isn't working? From what I can tell buy documentation and whatever examples I can find, it should, but I keep getting the error below

var colorArray = [];
    colorArray[0] = [];
    colorArray[0][0] = '2F76EE';
    colorArray[0][1] = '2F76EE';
    colorArray[0][2] = '5fff74';
    colorArray[0][3] = '5e6cff';
    colorArray[0][4] = 'a6ff1d';
    colorArray[1][0] = '2F76EE'; //error is happening here
    colorArray[1][1] = '2F76EE';
    colorArray[1][2] = '5fff74';
    colorArray[1][3] = '5e6cff';
    colorArray[1][4] = 'a6ff1d';

The Error when I run it

Uncaught TypeError: Cannot set property '0' of undefined

Thanks!

See http://stackoverflow.com/questions/966225/how-can-i-create-a-two-dimensional-array-in-javascript — Phrogz, Mar 19 '14 at 03:39
JavaScript doesn't have two dimensional arrays. It has arrays, and you can nest them. But just because you put a sub-array in the first slot of the main array does not mean you automatically get one in the second slot. — Phrogz, Mar 19 '14 at 03:42

thefourtheye · Accepted Answer · 2014-03-19T03:49:09.550

When you say colorArray[1][0], JavaScript accesses colorArray[1] and as it is not defined yet, it evaluates to undefined. So, you are trying to do undefined[0]. That is why it is failing.

To fix this,

you have to initialize element 1 like this

colorArray[1] = [];

before doing any changes to that element

colorArray[1][0] = '2F76EE';
colorArray[1][1] = '2F76EE';
...

Since you are doing static initialization, you can even do

var colorArray = [];
colorArray.push([ '2F76EE', '2F76EE', '5fff74', '5e6cff', 'a6ff1d' ]);
colorArray.push([ '2F76EE', '2F76EE', '5fff74', '5e6cff', 'a6ff1d' ]);

Otherwise, you can initialize straight away, like this

var colorArray = [[ '2F76EE', '2F76EE', '5fff74', '5e6cff', 'a6ff1d' ],
                  [ '2F76EE', '2F76EE', '5fff74', '5e6cff', 'a6ff1d' ]];

You can also do something like this

var element1 = [ '2F76EE', '2F76EE', '5fff74', '5e6cff', 'a6ff1d' ];
var element2 = [ '2F76EE', '2F76EE', '5fff74', '5e6cff', 'a6ff1d' ];
var colorArray = [];
colorArray.push(element1, element2);

Note: You might be wondering, why I can't simply do

colorArray.push(element1, element1);

since both the arrays are the same. It will work, of course. But it has a problem. If you mutate one of the arrays it will affect others also. For example,

var element1 = [ '2F76EE', '2F76EE', '5fff74', '5e6cff', 'a6ff1d' ];
var colorArray = [];
colorArray.push(element1, element1);
colorArray[0].push("abcdef");
console.log(colorArray);
// [ [ '2F76EE', '2F76EE', '5fff74', '5e6cff', 'a6ff1d', 'abcdef' ],
//   [ '2F76EE', '2F76EE', '5fff74', '5e6cff', 'a6ff1d', 'abcdef' ] ]

You might not have expected this. But in JavaScript, all the variable names are just references to objects. So, when you do colorArray.push(element1, element1); you are adding the same reference twice. So, both the elements are pointing to the same object. So, mutating one will affect the other.

score 1 · Answer 2 · answered Mar 19 '14 at 03:39

1

You need to have

colorArray[1] = [];

answered Mar 19 '14 at 03:39

H77

5,859
2
26
39

score 0 · Answer 3 · answered Mar 19 '14 at 03:41

0

Far simpler than what you have, and also avoiding your problem:

var colorArray =
  [['2F76EE','2F76EE','5fff74','5e6cff','a6ff1d'],
   ['2F76EE','2F76EE','5fff74','5e6cff','a6ff1d']];

(See other answers for why what you wrote is broken.)

answered Mar 19 '14 at 03:41

Phrogz

296,393
112
651
745

Javascript 2 dimensional array

3 Answers3