Javascript 2 dimensional array

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,

1. 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';
   ...
   

2. 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' ]);
   

3. Otherwise, you can initialize straight away, like this

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

4. 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.