Declare an empty two-dimensional array in Javascript?
I want to create a two dimensional array in Javascript where I’m going to store coordinates (x,y). I don’t know yet how many pairs of coordinates I will have because they will be dynamically generated by user input. Example of pre-defined 2d array:
I guess I can use the PUSH method to add a new record at the end of the array. How do I declare an empty two dimensional array so that when I use my first Arr.push() it will be added to the index 0, and every next record written by push will take the next index? This is probably very easy to do, I’m just a newbie with JS, and I would appreciate if someone could write a short working code snippet that I could examine. Thanks
Have you tried var Arr = new Array(new Array()); ? And yes, push and pop add or remove elements from the end of the array, while shift and unshift remove or add elements to the beginning of the array.
This sounds like two different questions. First you want the arbitrary sized array. Then you’re sortof asking a different question that involves the push method. (Also, if you want to answer your own question, I think it’s best to do that in the answer section.) This is a top ranked question in Google for creating a multi-dimensional array in JavaScript, and I know Google doesn’t dictate content here, but I’d say it’s a fundamentally important question with a wide range of wacky answers.
23 Answers 23
You can just declare a regular array like so:
Then when you have a pair of values to add to the array, all you need to do is:
And yes, the first time you call arry.push , the pair of values will be placed at index 0.
> var arry = []; undefined > arry.push([1,2]); 1 > arry [ [ 1, 2 ] ] > arry.push([2,3]); 2 > arry [ [ 1, 2 ], [ 2, 3 ] ] Of course, since javascript is dynamically typed, there will be no type checker enforcing that the array remains 2 dimensional. You will have to make sure to only add pairs of coordinates and not do the following:
> arry.push(100); 3 > arry [ [ 1, 2 ], [ 2, 3 ], 100 ] this seems like an elegant solution, so I got X and Y coordinates, and I insert them like so: arry.push([x,y]); — but how do I get back later, for example the x coordinate on index 0?
If you want to initialize along with the creation, you can use fill and map.
const matrix = new Array(5).fill(0).map(() => new Array(4).fill(0)); 5 is the number of rows and 4 is the number of columns.
This works well in declarative contexts too, e.g. pre-allocation of a 2d array as an object member. Perhaps not something that one would design from scratch, but useful for tasks like porting from other languages.
Please also note that here map(() => <>) is used to create a standalone row and it’s necessary. The way of new Array(5).fill(new Array(4).fill(0)) is a very dangerous move. Since all the rows are filled with references to ONE array, if you update arr[0][0] the value of arr[1][0] will be changed too. This may raise very serious and dark issues when you use this array as a cache table.
@Kaihua I am new to JavaScript but used the print format code supplied by Kamil Kiełczewski below and there is no problem with Abhinav’s solution. If any element is modified, there are no changes to any other elements. I suppose that your comment is an analog of shallow copies in Python, but that is not the case here.
@RamazanChasygov The code may look counterintuitive at first glance, but it does behave exactly like it should. When you call Array(5).fill(new Array(4)) , this will happen: new Array(4) will be called exactly once, and this newly created array (with length 4) will then be passed to the fill function. Though there’s only a single object created in memory, and this single object will be used to fill all the array elements, i.e. all the array elements point to the same location in memory.
Matrix m with size 3 rows and 5 columns (remove .fill(0) to not init by zero)
let Array2D = (r,c) => [. Array(r)].map(_=>Array(c).fill(0)); let m = Array2D(3,5); m[1][0] = 2; // second row, first column m[2][4] = 8; // last row, last column // print formated array console.log(JSON.stringify(m) .replace(/(\[\[)(.*)(\]\])/g,'[\n [$2]\n]').replace(/],/g,'],\n ') );Well I copied your code and it threw errors when I tried to access values randomly in the array. However, one tiny modification and it worked: Array
And since you sent me in the right direction and I like your style . upvote . though not sure why you code as-is didn’t quite work for me. Ignoring the typescript casting, the only modfication is ‘fill’ instead of ‘map’
Regarding the fill method, take into account that => «If the first parameter is an object, each slot in the array will reference that object.» Therefore if you do this [. Array(r)].map(x=>Array(c).fill(< x: . y: . >)) you will have the same object per row in your matrix
@AkshayVijayJain because map will not work as we expected on empty array — but answer to this question in details goes beyond the OP question. Ask separate question or find it on SO.
If you want to be able access the matrix like so:
I find it the most convenient to init it in a loop.
var matrix = [], cols = 3; //init the grid matrix for ( var i = 0; i
returns undefined and not the error «Uncaught TypeError: Cannot set property ‘0’ of undefined».
You can nest one array within another using the shorthand syntax:
You can try something like this:-
const arr = new Array(5).fill().map(_ => new Array(5).fill(0)) // ✅ You may ask why did I use map instead of:
const badArr = new Array(5).fill(new Array(5).fill(0)) // ❌ The problem with the example above is that it adds references to the array that was passed into the fill method:
While this one works fine:
An empty array is defined by omitting values, like so:
You can fill an array with arrays using a function:
var arr = []; var rows = 11; var columns = 12; fill2DimensionsArray(arr, rows, columns); function fill2DimensionsArray(arr, rows, columns) < for (var i = 0; i < rows; i++) < arr.push([0]) for (var j = 0; j < columns; j++) < arr[i][j] = 0; >> >Array(11) 0:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] 1:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] 2:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] 3:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] 4:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] 5:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] 6:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] 7:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] 8:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] 9:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] 10:(12)[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]let m = 3 // rows let n = 3 // columns let array2D = Array(m).fill().map(entry => Array(n))This implementation creates a unique subarray for each entry. So setting array2D[0][1] = 'm' does not set each entry's [1] index to 'm'
I know this is an old thread but I'd like to suggest using an array of objects rather than an array of arrays . I think it make the code simpler to understand and update.
// Use meaningful variable names like 'points', // anything better than a bad pirate joke, 'arr'! var points = []; // Create an object literal, then add it to the array var point = ; points.push(point); // Create and add the object to the array in 1 line points.push(); // Create the object from local variables var x = 10; var y = 8; points.push(); // Ask the user for a point too var response = prompt("Please enter a coordinate point. Example: 3,8"); var coords = response.split(",").map(Number); points.push(); // Show the results var canvas = document.getElementById('graph'); var painter = canvas.getContext("2d"); var width = canvas.width, height = canvas.height; var scale = 10, radius = 3.5, deg0 = 0, deg360 = 2 * Math.PI; painter.beginPath(); for (var point of points) < var x = point.x * scale + scale; var y = height - point.y * scale - scale; painter.moveTo(x + radius, y); painter.arc(x, y, radius, deg0, deg360); painter.fillText(`$, $`, x + radius + 1, y + radius + 1); > painter.stroke();