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.
How do I declare a 2 dimensional array in JavaScript? (assuming it's possible)
How would I access its members? (myArray[0][1] or myArray[0,1]?)
let 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);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);Similar to activa's answer, here's a function to create an n-dimensional array:
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;
}
createArray(); // [] or new Array()
createArray(2); // new Array(2)
createArray(3, 2); // [new Array(2),
// new Array(2),
// new Array(2)]
Javascript only has 1-dimensional arrays, but you can build arrays of arrays, as others pointed out.
The following function can be used to construct a 2-d array of fixed dimensions:
function Create2DArray(rows) {
var arr = [];
for (var i=0;i<rows;i++) {
arr[i] = [];
}
return arr;
}
The number of columns is not really important, because it is not required to specify the size of an array before using it.
Then you can just call:
var arr = Create2DArray(100);
arr[50][2] = 5;
arr[70][5] = 7454;
// ...
The reason some say that it isn't possible is because a two dimensional array is really just an array of arrays. The other comments here provide perfectly valid methods of creating two dimensional arrays in JavaScript, but the purest point of view would be that you have a one dimensional array of objects, each of those objects would be a one dimensional array consisting of two elements.
So, that's the cause of the conflicting view points.
To create an 4x6 array, simply do this
const x = [...new Array(6)].map(elem => new Array(4))
It's usually a good practice to start with an empty array, rather than filling w random values. (You normally declare array as const x = [] in 1D, so better to start w empty in 2D.)
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
{}/arr[[i,j]] (N) is fastest for big and small arrays and it looks like it is good choice for big sparse arraysfor-[]/while (A,G) are fast and they are good choice for small arrays.for-[] (B,C) are fast and they are good choice for big arraysArray..map/from/fill (I,J,K,L,M) are quite slow for small arrays, and quite fast for big arraysfor-Array(n) (B,C) is much slower on safari than for-[] (A)for-[] (A) for big array is slow on all browsers
Conclusions for initialised 2d array
for/while (A,B,C,D,E,G) are fastest/quite fast for small arrays on all browsersfor (A,B,C,E) are fastest/quite fast for big arrays on all browsersArray..map/from/fill (I,J,K,L,M) are medium fast or slow for small arrays on all browsers{}/arr[[i,j]] (N) is slowest for small and big arrays on all browsers
Test for solutions which not fill (initialise) output array
We test speed of solutions for
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 benchmarkTest for solutions which fill (initialise) output array
We test speed of solutions for
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
Two dimensional arrays are created the same way single dimensional arrays are. And you access them like array[0][1].
var arr = [1, 2, [3, 4], 5];
alert (arr[2][1]); //alerts "4"
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.
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]); // 6Array(m).fill(v).map(() => Array(n).fill(v))
You can create a 2 Dimensional array m x n with initial value m and n can be any numbers v can be any value string, number, undefined.
One approach can be var a = [m][n]
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);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))
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);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]]) // -> 3This works because, [1,2] is transformed into a string, that is used as a string key for the table object.
The following example defines a two-dimensional array named activities:
let activities = [
['Work', 9],
['Eat', 1],
['Commute', 2],
['Play Game', 1],
['Sleep', 7]
];
In the activities array, the first dimension represents the activity and the second one shows the number of hours spent per day for each.
To show the activities array in the console, you use the console.table() method as follows:
console.table(activities);
The following illustrates the output:
┌─────────┬─────────────┬───┐ │ (index) │ 0 │ 1 │ ├─────────┼─────────────┼───┤ │ 0 │ 'Work' │ 9 │ │ 1 │ 'Eat' │ 1 │ │ 2 │ 'Commute' │ 2 │ │ 3 │ 'Play Game' │ 1 │ │ 4 │ 'Sleep' │ 7 │ └─────────┴─────────────┴───┘
Note that the (index) column is for the illustration that indicates the indices of the inner array.
To access an element of the multidimensional array, you first use square brackets to access an element of the outer array that returns an inner array; and then use another square bracket to access the element of the inner array.
The following example returns the second element of the first inner array in the activities array above:
console.log(activities[0][1]); // 9
Adding elements to the JavaScript multidimensional array
You can use the Array methods such as push() and splice() to manipulate elements of a multidimensional array.
For example, to add a new element at the end of the multidimensional array, you use the push() method as follows:
activities.push(['Study',2]);
┌─────────┬─────────────┬───┐ │ (index) │ 0 │ 1 │ ├─────────┼─────────────┼───┤ │ 0 │ 'Work' │ 9 │ │ 1 │ 'Eat' │ 1 │ │ 2 │ 'Commute' │ 2 │ │ 3 │ 'Play Game' │ 1 │ │ 4 │ 'Sleep' │ 7 │ │ 5 │ 'Study' │ 2 │ └─────────┴─────────────┴───┘
To insert an element in the middle of the array, you use the splice() method. The following inserts an element in the second position of the activities array:
activities.splice(1, 0, ['Programming', 2]);
┌─────────┬───────────────┬───┐ │ (index) │ 0 │ 1 │ ├─────────┼───────────────┼───┤ │ 0 │ 'Work' │ 9 │ │ 1 │ 'Programming' │ 2 │ │ 2 │ 'Eat' │ 1 │ │ 3 │ 'Commute' │ 2 │ │ 4 │ 'Play Game' │ 1 │ │ 5 │ 'Sleep' │ 7 │ │ 6 │ 'Study' │ 2 │ └─────────┴───────────────┴───┘
This example calculates the percentage of the hours spent on each activity and appends the percentage to the inner array.
activities.forEach(activity => {
let percentage = ((activity[1] / 24) * 100).toFixed();
activity[2] = percentage + '%';
});
┌─────────┬───────────────┬───┬───────┐ │ (index) │ 0 │ 1 │ 2 │ ├─────────┼───────────────┼───┼───────┤ │ 0 │ 'Work' │ 9 │ '38%' │ │ 1 │ 'Programming' │ 2 │ '8%' │ │ 2 │ 'Eat' │ 1 │ '4%' │ │ 3 │ 'Commute' │ 2 │ '8%' │ │ 4 │ 'Play Game' │ 1 │ '4%' │ │ 5 │ 'Sleep' │ 7 │ '29%' │ │ 6 │ 'Study' │ 2 │ '8%' │ └─────────┴───────────────┴───┴───────┘
Removing elements from the JavaScript multidimensional array
To remove an element from an array, you use the pop() or splice() method.
For example, the following statement removes the last element of the activities array:
activities.pop();
┌─────────┬───────────────┬───┬───────┐ │ (index) │ 0 │ 1 │ 2 │ ├─────────┼───────────────┼───┼───────┤ │ 0 │ 'Work' │ 9 │ '38%' │ │ 1 │ 'Programming' │ 2 │ '8%' │ │ 2 │ 'Eat' │ 1 │ '4%' │ │ 3 │ 'Commute' │ 2 │ '8%' │ │ 4 │ 'Play Game' │ 1 │ '4%' │ │ 5 │ 'Sleep' │ 7 │ '29%' │ └─────────┴───────────────┴───┴───────┘
Similarly, you can remove the elements from the inner array of the multidimensional array by using the pop() method. The following example removes the percentage element from the inner arrays of the activities array.
activities.forEach((activity) => {
activity.pop(2);
});
┌─────────┬───────────────┬───┐ │ (index) │ 0 │ 1 │ ├─────────┼───────────────┼───┤ │ 0 │ 'Work' │ 9 │ │ 1 │ 'Programming' │ 2 │ │ 2 │ 'Eat' │ 1 │ │ 3 │ 'Commute' │ 2 │ │ 4 │ 'Play Game' │ 1 │ │ 5 │ 'Sleep' │ 7 │ └─────────┴───────────────┴───┘
Iterating over elements of the JavaScript multidimensional array
To iterate a multidimensional array, you use a nested for loop as in the following example.
// loop the outer array
for (let i = 0; i < activities.length; i++) {
// get the size of the inner array
var innerArrayLength = activities[i].length;
// loop the inner array
for (let j = 0; j < innerArrayLength; j++) {
console.log('[' + i + ',' + j + '] = ' + activities[i][j]);
}
}
The first loop iterates over the elements of the outer array and the nested loop iterates over elements of the inner array.
The following shows the output of the script in the console:
[0,0] = Work [0,1] = 9 [1,0] = Eat [1,1] = 1 [2,0] = Commute [2,1] = 2 [3,0] = Play Game [3,1] = 1 [4,0] = Sleep [4,1] = 7 [5,0] = Study [5,1] = 2
Or you can use the forEach() method twice:
activities.forEach((activity) => {
activity.forEach((data) => {
console.log(data);
});
});
Work 9 Eat 1 Commute 2 Play Game 1 Sleep 7 Study 2
use the global object Array and fill items with arrays:
let arr = new Array(5).fill([]);
or if the 2d array of known length:
let arr = new Array(5).fill(new Array(2));
You could allocate an array of rows, where each row is an array of the same length. Or you could allocate a one-dimensional array with rows*columns elements and define methods to map row/column coordinates to element indices.
Whichever implementation you pick, if you wrap it in an object you can define the accessor methods in a prototype to make the API easy to use.
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'.
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
If you are after 2D array for google charts, the best way to do it is
var finalData = [];
[["key",value], ["2013-8-5", 13.5], ["2013-7-29",19.7]...]
referring to Not a valid 2d array google chart
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)
My solution won't be the best one, But just giving my solutions to create user-defined multidimensional array.
This function accepting rows and columns,
function createArray(row,column) {
let arr = [];
for(var i=0; i<row; i++){
arr[i] = [Math.floor(Math.random() * (10))];
for(var j=0;j<column;j++){
arr[i][j]= [Math.floor(Math.random() * (20))];
}
}
return arr;
}
var arrVal = createArray(4, 5);
console.log(arrVal);
This constructs arrays of any dimension.
function makeArrayChildren(parent, firstDimension, ...dimensions) {
for (let i = 0; i < parent.length; i++) {
parent[i] = new Array(firstDimension);
if (dimensions.length != 0) {
makeArrayChildren(parent[i], ...dimensions);
}
}
}
function makeArray(firstDimension, ...dimensions) {
if (firstDimension == undefined) {
throw Exception("Too few dimensions");
}
let topArray = new Array(firstDimension);
if (dimensions.length != 0) makeArrayChildren(topArray, ...dimensions);
return topArray;
}
Here's another two functions I wanted to make, which I can use as a sanity check: a for each that executes on all the lowest level items in a multi dimensional array and a fill method.
Array.prototype.dimensionalFill = function (value) {
for (let i = 0; i < this.length; i++) {
const elem = this[i];
if (elem instanceof Array) {
elem.dimensionalFill(value);
} else {
this[i] = value;
}
}
};
/*Unlike forEach, this also loops over undefined values. */
Array.prototype.dimensionalForEach = function (callableFunc, thisArg) {
if (thisArg != undefined) {
return this.dimensionalForEach(callableFunc.bind(thisArg));
}
for (let i = 0; i < this.length; i++) {
const elem = this[i];
if (elem instanceof Array) {
elem.dimensionalForEach(callableFunc);
} else {
callableFunc(elem, i, this);
}
}
};
And here's a nice little sanity check that uses all the features. So at the very least, it can't be completely wrong.
let arr = makeArray(10, 10, 5, 4);
arr.dimensionalFill(2);
let sum = 0;
arr.dimensionalForEach((elem) => {
sum += elem;
});
console.log(`sum: ${sum} === ${10 * 10 * 5 * 4 * 2}`);
It bears mentioning that at this point, it would've been a far better practice to create an altogether new structure, but this was fun.