By Diego


2009-06-08 18:24:54 8 Comments

I have been reading online and some places say it isn't possible, some say it is and then give an example and others refute the example, etc.

  1. How do I declare a 2 dimensional array in JavaScript? (assuming it's possible)

  2. How would I access its members? (myArray[0][1] or myArray[0,1]?)

30 comments

@guest 2020-03-01 21:56:43

To create an 4x6 array, simply do this

const x = [...Array(6)].map(elem => new Array(4))

@Kamil Kiełczewski 2020-01-17 17:22:34

Performance

Today 2020.02.05 I perform tests on MacOs HighSierra 10.13.6 on Chrome v79.0, Safari v13.0.4 and Firefox v72.0, for chosen solutions.

Conclusions for non-initialised 2d array

  • esoteric solution {}/arr[[i,j]] (N) is fastest for big and small arrays and it looks like it is good choice for big sparse arrays
  • solutions based on for-[]/while (A,G) are fast and they are good choice for small arrays.
  • solutions for-[] (B,C) are fast and they are good choice for big arrays
  • solutions based on Array..map/from/fill (I,J,K,L,M) are quite slow for small arrays, and quite fast for big arrays
  • surprinsingly for-Array(n) (B,C) is much slower on safari than for-[] (A)
  • surprinsingly for-[] (A) for big array is slow on all browsers
  • solutions K is slow for small arrays for all browsers
  • solutions A,E,G are slow for big arrays for all browsers
  • solution M is slowest for all arrays on all browsers

enter image description here

Conclusions for initialised 2d array

  • solutions based on for/while (A,B,C,D,E,G) are fastest/quite fast for small arrays on all browsers
  • solutions based on for (A,B,C,E) are fastest/quite fast for big arrays on all browsers
  • solutions based on Array..map/from/fill (I,J,K,L,M) are medium fast or slow for small arrays on all browsers
  • solutions F,G,H,I,J,K,L for big arrays are medium or fast on chrome and safari but slowest on firefox.
  • esoteric solution {}/arr[[i,j]] (N) is slowest for small and big arrays on all browsers

enter image description here

Details

Test for solutions which not fill (initialise) output array

We test speed of solutions for

  • small arrays (12 elements) - you can perform tests on your machine HERE
  • big arrays (1 million elements) arrays - you can perform tests on your machine HERE

function A(r) {
  var arr = [];
  for (var i = 0; i < r; i++) arr[i] = [];
  return arr;
}

function B(r, c) {
  var arr = new Array(r);
  for (var i = 0; i < arr.length; i++) arr[i] = new Array(c);
  return arr;
}

function C(r, c) {
  var arr = Array(r);
  for (var i = 0; i < arr.length; i++) arr[i] = Array(c);
  return arr;
}

function D(r, c) {
  // strange, but works
  var arr = [];
  for (var i = 0; i < r; i++) {
    arr.push([]);
    arr[i].push(Array(c));
  }
  return arr;
}

function E(r, c) {
  let array = [[]];
  for (var x = 0; x < c; x++) {
    array[x] = [];
    for (var y = 0; y < r; y++) array[x][y] = [0];
  }
  return array;
}

function F(r, c) {
  var makeArray = function(dims, arr) {
    if (dims[1] === undefined) {
      return Array(dims[0]);
    }

    arr = Array(dims[0]);

    for (var i = 0; i < dims[0]; i++) {
      arr[i] = Array(dims[1]);
      arr[i] = makeArray(dims.slice(1), arr[i]);
    }

    return arr;
  }
  return makeArray([r, c]);
}

function G(r) {
  var a = [];
  while (a.push([]) < r);
  return a;
}

function H(r,c) {
  function createArray(length) {
    var arr = new Array(length || 0),
        i = length;

    if (arguments.length > 1) {
        var args = Array.prototype.slice.call(arguments, 1);
        while(i--) arr[length-1 - i] = createArray.apply(this, args);
    }

    return arr;
  }
  return createArray(r,c);
}

function I(r, c) {
  return [...Array(r)].map(x => Array(c));
}

function J(r, c) {
  return Array(r).fill(0).map(() => Array(c));
}

function K(r, c) {
  return Array.from(Array(r), () => Array(c));
}

function L(r, c) {
  return Array.from({length: r}).map(e => Array(c));
}

function M(r, c) {
  return Array.from({length: r}, () => Array.from({length: c}, () => {}));
}

function N(r, c) {
  return {}
}



// -----------------------------------------------
// SHOW
// -----------------------------------------------

log = (t, f) => {
  let A = f(3, 4); // create array with 3 rows and 4 columns
  A[1][2] = 6 // 2-nd row 3nd column set to 6
  console.log(`${t}[1][2]: ${A[1][2]}, full: ${JSON.stringify(A).replace(/null/g,'x')}`);
}

log2 = (t, f) => {
  let A = f(3, 4); // create array with 3 rows and 4 columns
  A[[1,2]] = 6 // 2-nd row 3nd column set to 6
  console.log(`${t}[1][2]: ${A[[1,2]]}, full: ${JSON.stringify(A).replace(/null/g,'x')}`);
}

log('A', A);
log('B', B);
log('C', C);
log('D', D);
log('E', E);
log('F', F);
log('G', G);
log('H', H);
log('I', I);
log('J', J);
log('K', K);
log('L', L);
log('M', M);
log2('N', N);
This is presentation of solutions - not benchmark

Test for solutions which fill (initialise) output array

We test speed of solutions for

  • small arrays (12 elements) - you can perform tests on your machine HERE
  • big arrays (1 million elements) arrays - you can perform tests on your machine HERE

function A(r, c, def) {
  var arr = [];
  for (var i = 0; i < r; i++) arr[i] = Array(c).fill(def);
  return arr;
}

function B(r, c, def) {
  var arr = new Array(r);
  for (var i = 0; i < arr.length; i++) arr[i] = new Array(c).fill(def);
  return arr;
}

function C(r, c, def) {
  var arr = Array(r);
  for (var i = 0; i < arr.length; i++) arr[i] = Array(c).fill(def);
  return arr;
}

function D(r, c, def) {
  // strange, but works
  var arr = [];
  for (var i = 0; i < r; i++) {
    arr.push([]);
    arr[i].push(Array(c));
  }
  for (var i = 0; i < r; i++) for (var j = 0; j < c; j++) arr[i][j]=def
  return arr;
}

function E(r, c, def) {
  let array = [[]];
  for (var x = 0; x < c; x++) {
    array[x] = [];
    for (var y = 0; y < r; y++) array[x][y] = def;
  }
  return array;
}

function F(r, c, def) {
  var makeArray = function(dims, arr) {
    if (dims[1] === undefined) {
      return Array(dims[0]).fill(def);
    }

    arr = Array(dims[0]);

    for (var i = 0; i < dims[0]; i++) {
      arr[i] = Array(dims[1]);
      arr[i] = makeArray(dims.slice(1), arr[i]);
    }

    return arr;
  }
  return makeArray([r, c]);
}

function G(r, c, def) {
  var a = [];
  while (a.push(Array(c).fill(def)) < r);
  return a;
}

function H(r,c, def) {
  function createArray(length) {
    var arr = new Array(length || 0),
        i = length;

    if (arguments.length > 1) {
        var args = Array.prototype.slice.call(arguments, 1);
        while(i--) arr[length-1 - i] = createArray.apply(this, args).fill(def);
    }

    return arr;
  }
  return createArray(r,c);
}

function I(r, c, def) {
  return [...Array(r)].map(x => Array(c).fill(def));
}

function J(r, c, def) {
  return Array(r).fill(0).map(() => Array(c).fill(def));
}

function K(r, c, def) {
  return Array.from(Array(r), () => Array(c).fill(def));
}

function L(r, c, def) {
  return Array.from({length: r}).map(e => Array(c).fill(def));
}

function M(r, c, def) {
  return Array.from({length: r}, () => Array.from({length: c}, () => def));
}

function N(r, c, def) {
  let arr={};
  for (var i = 0; i < r; i++) for (var j = 0; j < c; j++) arr[[i,j]]=def;
  return arr;
}



// -----------------------------------------------
// SHOW
// -----------------------------------------------

log = (t, f) => {
  let A = f(1000,1000,7); // create array with 1000 rows and 1000 columns, 
                          // each array cell initilised by 7
  A[800][900] = 5         // 800nd row and 901nd column set to 5
  console.log(`${t}[1][2]: ${A[1][2]}, ${t}[800][901]: ${A[800][900]}`);
}

log2 = (t, f) => {
  let A = f(1000,1000,7); // create array with 1000 rows and 1000 columns, 
                          // each array cell initilised by 7
  A[[800,900]] = 5            // 800nd row 900nd column set to 5
  console.log(`${t}[1][2]: ${A[[1,2]]}, ${t}[800][900]: ${A[[800,900]]}`);
}

log('A', A);
log('B', B);
log('C', C);
log('D', D);
log('E', E);
log('F', F);
log('G', G);
log('H', H);
log('I', I);
log('J', J);
log('K', K);
log('L', L);
log('M', M);
log2('N', N);
This is presentation of solutions - not benchmark

enter image description here

@ravishi 2020-01-25 01:23:06

I'm not a fan of the ES6 solutions using .fill(). Some may work but the extra hoops to avoid the copy-by-reference problems make them non-intuitive.

My suggested ES6 approach is to fully leverage the spread operator for both outer and inner arrays. It's easier to reason about IMO.

[...Array(3)].map(() => [...Array(4)])

If you need to set an initial value, then you chain on a .map() on the inner array creation:

[...Array(3)].map(() => [...Array(4)].map(() => 0))

Lastly, a type-safe TypeScript util function:

export const createMultiDimensionalArray = <T>(
  n: number,
  m: number,
  initialVal?: T,
): T[][] => {
  const matrix = [...Array(n)].map(() => [...Array(m)]);
  return initialVal === undefined
    ? matrix
    : matrix.map(r => r.map(() => initialVal));
};

Examples using it:

const a = createMultiDimensionalArray(1, 2);
a[1][2] = 3;     // Works

const b = createMultiDimensionalArray(2, 3, false);
b[1][2] = true;  // Works
b[1][2] = 3;     // Error: Type '3' is not assignable to type 'boolean'.

@my- 2017-07-01 20:00:35

For one liner lovers Array.from()

// creates 8x8 array filed with "0"    
const arr2d = Array.from({ length: 8 }, () => Array.from({ length: 8 }, () => "0"))

Another one (from comment by dmitry_romanov) use Array().fill()

// creates 8x8 array filed with "0"    
const arr2d = Array(8).fill(0).map(() => Array(8).fill("0"))

Using ES6+ spread operator ("inspired" by InspiredJW answer :) )

// same as above just a little shorter
const arr2d = [...Array(8)].map(() => Array(8).fill("0"))

@Jinsong Li 2017-11-21 14:38:23

we can remove 0 in the first fill() function: const arr2d = Array(8).fill().map(() => Array(8).fill("0"));

@jwchang 2019-12-09 22:04:17

ES6+, ES2015+ can do this in even simpler way


Creating 3 x 2 Array filled with true

[...Array(3)].map(item => Array(2).fill(true))

@my- 2020-01-24 21:06:00

I need to confess. I "adopted" your answer and added to mine, the one-liners collection.

@SridharKritha 2019-09-27 16:19:17

Row and Column sizes of an array known only at the run time then following method could be used for creating a dynamic 2d array.

var num = '123456';
var row = 3; // Known at run time
var col = 2; // Known at run time
var i = 0;

var array2D = [[]];
for(var r = 0; r < row; ++r)
{
    array2D[r] = [];
    for(var c = 0; c < col; ++c)
    {
        array2D[r][c] = num[i++];
    }
}
console.log(array2D); 
// [[ '1', '2' ], 
//  [ '3', '4' ], 
//  [ '5', '6' ]]

console.log(array2D[2][1]); // 6

@Brcn 2019-09-16 17:46:43

Creates n dimensional matrix array for Java Script, filling with initial default of value 0.

function arr (arg, def = 0){
      if (arg.length > 2){
        return Array(arg[0]).fill().map(()=>arr(arg.slice(1)));
      } else {
        return Array(arg[0]).fill().map(()=>Array(arg[1]).fill(def));
      }
    }

// Simple Usage of 4 dimensions
var s = arr([3,8,4,6])

// Use null default value with 2 dimensions
var k = arr([5,6] , null)

@Ballsacian1 2009-06-08 18:27:28

var items = [
  [1, 2],
  [3, 4],
  [5, 6]
];
console.log(items[0][0]); // 1
console.log(items[0][1]); // 2
console.log(items[1][0]); // 3
console.log(items[1][1]); // 4
console.log(items);

@Anderson Green 2013-04-06 16:49:38

It would be difficult to initialize a large multidimensional array this way. However, this function can be used to create an empty multidimensional, with the dimensions specified as parameters.

@evilReiko 2014-06-14 09:56:23

@AndersonGreen It's a good thing you mentioned a link for those interested in multi-D array solution, but the question and Ballsacian1's answer are about "2D" array, not "multi-D" array

@Dois 2015-05-28 08:11:27

You should go through the whole thing... e.g. alert(items[0][1]); // 2 etc.

@Michael Franzl 2015-12-30 17:55:27

@SashikaXP, this does not work for first indices other than 0.

@chris 2016-05-30 01:20:26

The question is how to declare a two dimensional array. Which is what I was looking for and found this and following answers which fail to discern the difference between declare and initialize. There's also declaration with known length or unbounded, neither of which is discussed.

@538ROMEO 2016-06-13 17:07:48

Do you know if we can still use functions like .lenght or .join('') for example in a multi-dimensionnal array like above or that array is actually considered as an object ?

@Luke T O'Brien 2016-09-03 21:11:05

I believe this is a jagged array (array of arrays) - Does JavaScript have a difference between jagged and multidimensional as some other languages do?

@Apaar Bhatnagar 2019-01-01 21:35:41

first create 1-D array of row size, then start filling this array using for loop. let matrix = new Array(rowSize); for(let i = 0; i < rows; i++){ matrix[i] = new Array(columnSize); }

@Juboraj Sarker 2019-07-20 11:29:49

 var items = [
      ["January 01", 42.5],
      ["February 01",  44.3],
      ["March 01",  28.7],
      ["April 01",  44.3],
      ["May 01",  22.9],
      ["June 01",  54.4],
      ["July 01",  69.3],
      ["August 01",  19.1],
      ["September 01",  82.5],
      ["October 01",  53.2],
      ["November 01",  75.9],
      ["December 01",  58.7]

    ];
  alert(items[1][0]); // February 01
  alert(items[5][1]); // 54.4

@antelove 2017-10-03 15:22:59

var playList = [
  ['I Did It My Way', 'Frank Sinatra'],
  ['Respect', 'Aretha Franklin'],
  ['Imagine', 'John Lennon'],
  ['Born to Run', 'Bruce Springsteen'],
  ['Louie Louie', 'The Kingsmen'],
  ['Maybellene', 'Chuck Berry']
];

function print(message) {
  document.write(message);
}

function printSongs( songs ) {
  var listHTML;
  listHTML = '<ol>';
  for ( var i = 0; i < songs.length; i += 1) {
    listHTML += '<li>' + songs[i][0] + ' by ' + songs[i][1] + '</li>';
  }
  listHTML += '</ol>';
  print(listHTML);
}

printSongs(playList);

@Error404 2019-06-08 20:04:20

Array.from({length: rows}).map(e => new Array(columns));

@zurfyx 2018-03-09 19:53:11

How to create an empty two dimensional array (one-line)

Array.from(Array(2), () => new Array(4))

2 and 4 being first and second dimensions respectively.

We are making use of Array.from, which can take an array-like param and an optional mapping for each of the elements.

Array.from(arrayLike[, mapFn[, thisArg]])

var arr = Array.from(Array(2), () => new Array(4));
arr[0][0] = 'foo';
console.info(arr);

The same trick can be used to Create a JavaScript array containing 1...N


Alternatively (but more inefficient 12% with n = 10,000)

Array(2).fill(null).map(() => Array(4))

The performance decrease comes with the fact that we have to have the first dimension values initialized to run .map. Remember that Array will not allocate the positions until you order it to through .fill or direct value assignment.

var arr = Array(2).fill(null).map(() => Array(4));
arr[0][0] = 'foo';
console.info(arr);


Follow up

Here's a method that appears correct, but has issues.

 Array(2).fill(Array(4)); // BAD! Rows are copied by reference

While it does return the apparently desired two dimensional array ([ [ <4 empty items> ], [ <4 empty items> ] ]), there a catch: first dimension arrays have been copied by reference. That means a arr[0][0] = 'foo' would actually change two rows instead of one.

var arr = Array(2).fill(Array(4));
arr[0][0] = 'foo';
console.info(arr);
console.info(arr[0][0], arr[1][0]);

@vsync 2018-08-29 09:11:01

I suggest this: Array.from({length:5}, () => [])

@Brady Dowling 2019-10-02 21:08:21

Subjective here but this answer (the first and second within it) seems like the best balance of succinct, fast, and modern.

@FaultyJuggler 2019-11-09 21:29:27

@zurfyx any idea, or does anyone know, why webstorm is complaining about this? It seems array.from keeps leaving values as undefined and then I can't work with the array created, even though the snippet runs fine here on stackoverflow

@Justin Ohms 2018-09-08 18:31:27

To create a non-sparse "2D" array (x,y) with all indices addressable and values set to null:

let 2Darray = new Array(x).fill(null).map(item =>(new Array(y).fill(null))) 

bonus "3D" Array (x,y,z)

let 3Darray = new Array(x).fill(null).map(item=>(new Array(y).fill(null)).map(item=>Array(z).fill(null)))

Variations and corrections on this have been mentioned in comments and at various points in response to this question but not as an actual answer so I am adding it here.

It should be noted that (similar to most other answers) this has O(x*y) time complexity so it probably not suitable for very large arrays.

@Stanislav Mayorov 2019-03-14 13:08:23

be careful because fill set the same value. if change null to `object it will be the same object in every column

@haykam 2019-05-20 22:22:42

@StanislavMayorov If you want to set each cell's value, just use the same trick: let 2Darray = new Array(x).fill(null).map(item =>(new Array(y).fill(null).map(cell =>(yourValueHere))))

@Sufian 2009-06-08 18:28:58

You simply make each item within the array an array.

var x = new Array(10);

for (var i = 0; i < x.length; i++) {
  x[i] = new Array(3);
}

console.log(x);

@Diego 2009-06-08 19:54:33

Can they use things like strings for their keys and values? myArray['Book']['item1'] ?

@Matthew Crumley 2009-06-08 20:05:45

@Diego, yes, but that's not what arrays are intended for. It's better to use an object when your keys are strings.

@Variadicism 2015-09-12 22:44:07

I like this example better than the accepted answer because this can be implemented for dynamically sized arrays, e.g. new Array(size) where size is a variable.

@Gargo 2016-09-15 18:51:04

doesn't work - error on assignment. How has this answer got 280 likes if it is useless?

@matasoy 2016-09-23 07:23:14

This is working, thanks. You can see the example Gargo jsfiddle.net/matasoy/oetw73sj

@Giox 2020-05-21 22:15:30

Doesn't work at all!! new Array?? in which language? running the snippet you get only undefined!

@zeah 2016-10-23 05:33:08

Below one, creates a 5x5 matrix and fill them with null

var md = [];
for(var i=0; i<5; i++) {
    md.push(new Array(5).fill(null));
}

console.log(md);

@Qiang 2016-11-15 06:33:36

This answer is wrong. It will create an array with same array filling in its slots. md[1][0] = 3 and all the rest of elements are updated too

@Francesco Dondi 2016-02-15 04:19:33

The sanest answer seems to be

var nrows = ~~(Math.random() * 10);
var ncols = ~~(Math.random() * 10);
console.log(`rows:${nrows}`);
console.log(`cols:${ncols}`);
var matrix = new Array(nrows).fill(0).map(row => new Array(ncols).fill(0));
console.log(matrix);


Note we can't directly fill with the rows since fill uses shallow copy constructor, therefore all rows would share the same memory...here is example which demonstrates how each row would be shared (taken from other answers):

// DON'T do this: each row in arr, is shared
var arr = Array(2).fill(Array(4));
arr[0][0] = 'foo'; // also modifies arr[1][0]
console.info(arr);

@dimiguel 2016-03-25 06:05:17

This should be at the very top. I did something similar using Array.apply(null, Array(nrows)) but this is much more elegant.

@dimiguel 2016-03-25 20:50:40

This regard my last comment... Internet Explorer and Opera don't have support for fill. This won't work on a majority of browsers.

@Conor O'Brien 2017-01-17 18:56:45

@dimgl Fill can be emulated in this instance with a constant map: Array(nrows).map(() => 0), or, Array(nrows).map(function(){ return 0; });

@Oli 2018-01-22 01:58:03

There is another solution, that does not force you to pre-define the size of the 2d array, and that is very concise.

var table = {}
table[[1,2]] = 3 // Notice the double [[ and ]]
console.log(table[[1,2]]) // -> 3

This works because, [1,2] is transformed into a string, that is used as a string key for the table object.

@Pimp Trizkit 2018-03-10 16:27:14

This answer alone makes me not want to mess with the junk that is "multi-dimensional" arrays in JavaScript, even tho I have a very elegant solution.This also illustrates that everyone else isn't actually making multidimensional arrays at all.Just like an "array" in JavaScript; this answer will completely "simulate" a pseudo-infinite sized, infinite dimension array of arbitrary sizes and contents.All the other recursion and loop based answers have a much lower upper limit to the size of the array structure they can create.And the creation speed will be a major issue for these larger structures.

@Pimp Trizkit 2018-03-10 17:11:46

Use this line instead to simulate pre-filling: var table = new Proxy({}, {get:(t,n)=>n in t ? t[n] : 42});

@Kamil Kiełczewski 2020-01-21 15:19:29

Nice, creative way to 'emulate' Array2D by object :)

@Alexander 2016-12-04 04:36:48

My approach is very similar to @Bineesh answer but with a more general approach.

You can declare the double array as follows:

var myDoubleArray = [[]];

And the storing and accessing the contents in the following manner:

var testArray1 = [9,8]
var testArray2 = [3,5,7,9,10]
var testArray3 = {"test":123}
var index = 0;

myDoubleArray[index++] = testArray1;
myDoubleArray[index++] = testArray2;
myDoubleArray[index++] = testArray3;

console.log(myDoubleArray[0],myDoubleArray[1][3], myDoubleArray[2]['test'],) 

This will print the expected output

[ 9, 8 ] 9 123

@Ebrahim Byagowi 2017-12-23 10:29:09

If all you want is a 4x4 matrix have a look at DOMMatrix, it is easy to use I can say,

let m = new DOMMatrix(); 
// m.m11, m.m12, m.m13, m.m14, ..., m.m41, m.m42, m.m43, m.m44

Initially brought for different reasons, it is not available on node.js and only limited to 4x4.

Also you can consider using an auto-vivification object instead arrays for JS, have a look at my answer here but brought here also for more convince:

var tree = () => new Proxy({}, { get: (target, name) => name in target ? target[name] : target[name] = tree() });

var t = tree();
t[0][2][3] = 4;
console.log(t[0][2][3]);

It uses new JS and acts not correctly when you iterate through it so be careful with it.

Also have a look at this if you need a flexible multi-dimension array generator.

@Nadir Laskar 2017-08-06 12:37:43

This is my implementation of Multi-Dimension Array.

In this approach, I am creating a single dimension array

I have added a prototype function multi to Array object, Which can be used to create any dimension Array.

I have also added a prototype function index to Array object, Which can be used to get index in linear Array from multi-dimension indexes.

Creating a Array

//Equivalent to arr[I][J][K]..[] in C
var arr = new Array().multi(I,J,K,..);

Accessing array value at any index

//Equivalent in C arr[i][j][k];
var vaue = arr[arr.index(i,j,k)];

SNIPPET

/*
   Storing array as single dimension 
   and access using Array.index(i,j,k,...)
*/


Array.prototype.multi = function(){
 this.multi_size = arguments;
 this.multi_len = 1
 for(key in arguments) this.multi_len *=  arguments[key];
 for(var i=0;i<this.multi_len;i++) this.push(0);
 return this;
}

Array.prototype.index = function(){
   var _size = this.multi_len;
   var temp = 1;
   var index = 0;
   for(key in arguments) {
      temp*=this.multi_size[key];
      index+=(arguments[key]*(_size/temp))
   }
   return index;
}

// Now you can use the multi dimension array
// A 3x3 2D Matrix

var arr2d = new Array().multi(3,3); // A 2D Array
arr2d[arr2d.index(1,1,1)]  = 5;
console.log(arr2d[arr2d.index(1,1,1)]);

// A 3x3x3 3D Matrix

var arr3d = new Array().multi(3,3,3); // a 3D Array
arr3d[arr3d.index(1,1,1)]  = 5;
console.log(arr3d[arr3d.index(1,1,1)]);

// A 4x3x3 4D Matrix
var arr4d = new Array().multi(4,3,3,3); // a 4D Array
arr4d[arr4d.index(4,0,0,1)]  = 5;
console.log(arr4d[arr4d.index(4,0,0,1)]);

@efong5 2017-05-19 16:27:32

This is mentioned in a few of the comments, but using Array.fill() will help construct a 2-d array:

function create2dArr(x,y) {
    var arr = [];
    for(var i = 0; i < y; i++) {
        arr.push(Array(x).fill(0));
    }
    return arr; 
}

this will result in an array of length x, y times in the returned array.

@geniuscarrier 2017-01-03 01:07:45

One liner to create a m*n 2 dimensional array filled with 0.

new Array(m).fill(new Array(n).fill(0));

@Pijusn 2017-03-07 19:07:04

Actually, this will create only two arrays. Second dimensions is going to be the same array in every index.

@dmitry_romanov 2017-04-15 04:28:14

Yes, I confirm the gotcha. Quick fix: a = Array(m).fill(0).map(() => Array(n).fill(0)) ? map will untie reference and create unique array per slot.

@Bineesh 2016-05-18 15:16:10

This is what i achieved :

var appVar = [[]];
appVar[0][4] = "bineesh";
appVar[0][5] = "kumar";
console.log(appVar[0][4] + appVar[0][5]);
console.log(appVar);

This spelled me bineeshkumar

@RaisinBranCrunch 2017-07-30 16:38:42

Notice how you can only access the 0 index of the parent array. This isn't as useful as something which allows you to set, for example, appVar[5][9] = 10; ... you would get 'Unable to set property "9" of undefined' with this.

@Gank 2018-05-20 13:50:21

But appVar[1][4] = "bineesh"; is wrong, how to solve it?

@Tim Hallyburton 2016-08-11 17:33:39

Use Array Comprehensions

In JavaScript 1.7 and higher you can use array comprehensions to create two dimensional arrays. You can also filter and/or manipulate the entries while filling the array and don't have to use loops.

var rows = [1, 2, 3];
var cols = ["a", "b", "c", "d"];

var grid = [ for (r of rows) [ for (c of cols) r+c ] ];

/* 
         grid = [
            ["1a","1b","1c","1d"],
            ["2a","2b","2c","2d"],
            ["3a","3b","3c","3d"]
         ]
*/

You can create any n x m array you want and fill it with a default value by calling

var default = 0;  // your 2d array will be filled with this value
var n_dim = 2;
var m_dim = 7; 

var arr = [ for (n of Array(n_dim)) [ for (m of Array(m_dim) default ]] 
/* 
         arr = [
            [0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0],
         ]
*/

More examples and documentation can be found here.

Please note that this is not a standard feature yet.

@Pimp Trizkit 2018-03-10 15:25:15

A quick google check here... yup... the for statement is still a loop...

@Kamil Kiełczewski 2020-01-21 14:56:01

It is not supported by any browser - HERE?

@dimiguel 2016-03-25 05:56:18

Here's a quick way I've found to make a two dimensional array.

function createArray(x, y) {
    return Array.apply(null, Array(x)).map(e => Array(y));
}

You can easily turn this function into an ES5 function as well.

function createArray(x, y) {
    return Array.apply(null, Array(x)).map(function(e) {
        return Array(y);
    });
}

Why this works: the new Array(n) constructor creates an object with a prototype of Array.prototype and then assigns the object's length, resulting in an unpopulated array. Due to its lack of actual members we can't run the Array.prototype.map function on it.

However, when you provide more than one argument to the constructor, such as when you do Array(1, 2, 3, 4), the constructor will use the arguments object to instantiate and populate an Array object correctly.

For this reason, we can use Array.apply(null, Array(x)), because the apply function will spread the arguments into the constructor. For clarification, doing Array.apply(null, Array(3)) is equivalent to doing Array(null, null, null).

Now that we've created an actual populated array, all we need to do is call map and create the second layer (y).

@mpiliszcz 2015-12-26 20:38:20

nodejs + lodash version:

var _ = require("lodash");
var result = _.chunk(['a', 'b', 'c', 'd', 'e', 'f'], 2);
console.log(result);
console.log(result[2][0]);

The output:

[ [ 'a', 'b' ], [ 'c', 'd' ], [ 'e', 'f' ] ]
e

@Abdennour TOUMI 2015-11-09 23:40:06

An awesome repository here .

  • api : masfufa.js

  • sample : masfufa.html

Two Examples will be enough to understand this library :

Example 1:

   /*     | 1 , 2 , 3 |
    * MX= | 4 , 5 , 6 |     Dimensions= 3 x 3
    *     | 7 , 8 , 9 |
    */ 


  jsdk.getAPI('my');
  var A=[1, 2, 3, 4, 5, 6, 7, 8, 9];
  var MX=myAPI.getInstance('masfufa',{data:A,dim:'3x3'});

then :

MX.get[0][0]  // -> 1 (first)
MX.get[2][2] //  ->9 (last)

Example 2:

   /*      | 1 , 9 , 3 , 4 |
    * MXB= | 4 , 5 , 6 , 2 |     Dimensions= 2 x 4
    *   
    */ 

  var B=[1 , 9 , 3 , 4 , 4 , 5 , 6 , 2];
  var MXB=myAPI.getInstance('masfufa',{data:B,dim:'2x4'});

then :

MXB.get[0][0]  // -> 1 (first)
MXB.get[1][3] //  -> 2 (last)
MXB.get[1][2] //  -> 6 (before last)

@Avishai Roi 2015-09-24 12:07:44

You can also create a function to create a 2D array like this:

var myTable = [];

function createArray(myLength) {
    myTable = new Array(myLength);
    var cols, rows;
    for (cols = 0; cols < myLength; cols++) {
        myTable[cols] = new Array(myLength);
    }
}

You can call it by using the following, which will give you a 10x10 2D array.

createArray(10);

You also can create a 3D array using this method.

@rickatech 2015-09-21 05:17:32

A simplified example:

var blocks = [];

blocks[0] = [];

blocks[0][0] = 7;

@Rick 2015-07-30 23:53:01

Javascript does not support two dimensional arrays, instead we store an array inside another array and fetch the data from that array depending on what position of that array you want to access. Remember array numeration starts at ZERO.

Code Example:

/* Two dimensional array that's 5 x 5 

       C0 C1 C2 C3 C4 
    R0[1][1][1][1][1] 
    R1[1][1][1][1][1] 
    R2[1][1][1][1][1] 
    R3[1][1][1][1][1] 
    R4[1][1][1][1][1] 
*/

var row0 = [1,1,1,1,1],
    row1 = [1,1,1,1,1],
    row2 = [1,1,1,1,1],
    row3 = [1,1,1,1,1],
    row4 = [1,1,1,1,1];

var table = [row0,row1,row2,row3,row4];
console.log(table[0][0]); // Get the first item in the array

Related Questions

Sponsored Content

61 Answered Questions

[SOLVED] How do I include a JavaScript file in another JavaScript file?

53 Answered Questions

86 Answered Questions

[SOLVED] How do JavaScript closures work?

42 Answered Questions

[SOLVED] How do I remove a property from a JavaScript object?

35 Answered Questions

[SOLVED] Create ArrayList from array

96 Answered Questions

[SOLVED] How can I remove a specific item from an array?

  • 2011-04-23 22:17:18
  • Walker
  • 6816296 View
  • 8401 Score
  • 96 Answer
  • Tags:   javascript arrays

51 Answered Questions

[SOLVED] How to create GUID / UUID?

  • 2008-09-19 20:01:00
  • Jason Cohen
  • 1855519 View
  • 4221 Score
  • 51 Answer
  • Tags:   javascript guid uuid

39 Answered Questions

[SOLVED] Loop through an array in JavaScript

3 Answered Questions

40 Answered Questions

[SOLVED] For-each over an array in JavaScript

Sponsored Content