Enhanced for loop in 2D Array - JavaScript

Question

I created the following 2D array in Javascript

// Create basic linear array
var ImgArray = new Array(4);

// Do the 2D array for each or the linear array slots
for (i=0; i < 4 ; i++) {
    ImgArray[i] = new Array(4)
}

Now i want to iterate through it using 2 ' enhanced for loops'. But am stuck on how to use the loop as there is only ImgArray stated a such. For example;

// Load the images
for(var i in ImgArray) { 
    for( ??? ) {           // How would i do this? What do i state as an array?
          ///...
    }
    document.write("<br>");
}

Any advise well appreciated

document.write is OK, "enhanced for loops" (for...in array) is not. — Free Consulting, Dec 11 '10 at 23:46
@Pointy: There's nothing wrong with `document.write`, used appropriately. — Tim Down, Dec 11 '10 at 23:56
If you use `var a = new Array(4)`, remember that it will create an array of length 4 but that it does not contain any elements, `a[1]` will return `undefined`, but `a.length` will return 4. — Felix Kling, Dec 12 '10 at 00:03
@Tim Down, @Carlos - `document.write()` is one of those things that does what it does, and it's not inherently "bad", but it's a way of doing things that really calls for a new approach. The better way to do things is via DOM manipulation after the document has loaded. @Tim the key there is **used appropriately**. — Pointy, Dec 12 '10 at 05:03

T.J. Crowder · Accepted Answer · 2012-07-05T20:17:24.420

Assuming the array you've created, the loop looks like this:

var i, j, entry, ImgArray;

// Create the array
ImgArray = new Array(4);
for (i=0; i < 4 ; i++) {
    ImgArray[i] = new Array(4);
}

// Loop through both dimensions
for (i = 0; i < ImgArray.length; ++i) {
    entry = ImgArray[i];
    for (j = 0; j < entry.length; ++j) {
        // Do something with entry[j]
    }
}

This is because there are no two-dimensional arrays in JavaScript. (In fact, even arrays aren't really arrays, but let's not go there.) There are "arrays", and an array entry can be another array, but one array entry might be longer or shorter than others. So you retrieve that array and loop through its length, which may be different than others in the same "dimension".

Note that I didn't use for..in above. Don't use for..in to loop through arrays unless you really know what you're doing; details here. (If you do really know what you're doing and take adequate precautions, it's fine, but your quoted code isn't taking the necessary precautions.) for..in does not iterate the indexes of an array, it enumerates the property names of an object.

Off-topic #1: In JavaScript, the convention (which you're free to ignore) is to only use initial caps (ImgArray) for constructor functions.

Off-topic #2: You might look at using array literals ([entry, entry, entry]) rather than new Array(...), but it depends on what you're doing.

Off-topic #3: It's a very bad idea to rely on semicolon insertion (as with your ImgArray[i] = new Array(4) line). Make sure to put in the semicolons where they're needed, or you'll find that you can't minify your scripts properly and/or that you'll fight odd bugs that waste your time. :-)

+1, also on-topic #1: don't use `for ... in` to iterate over arrays. (your code says that, but I thought I'd just add it in words) — casablanca, Dec 11 '10 at 23:49
@casablanca: LOL I just saw that he was using that and was adding it as you commented. :-) It's fine if you understand what you're doing and handle it properly, but most people *don't* understand what they're doing and *don't* handle it property, so... — T.J. Crowder, Dec 11 '10 at 23:50
@Carlos: You can do `imgArray[1][3]`. `imgArray[1]` returns an array and `imgArray[1][3]` accesses the fourth element of this array. — Felix Kling, Dec 12 '10 at 00:14
@Felix: Yes, you can, good point. Although the question was about looping, and I wouldn't do that in a loop as it's wasteful to repeatedly look up the array (`imgArray[1]`) when traversing its contents (that's why I have the `entry` variable above). Still, though, no reason you can't do that when you're not looping. — T.J. Crowder, Dec 12 '10 at 05:27

score 3 · Answer 2 · answered Dec 11 '10 at 23:26

That's not an "enhanced for loop". You should not be iterating through Array instances that way anyway, at least not when you're treating them semantically as integer-indexed arrays.

Use your original

for (var i = 0; i < 4; ++i)

approach (and don't forget var). Also don't bother with

var ImgArray = new Array(4);

Just write

var ImgArray = [];

score 0 · Answer 3 · answered Mar 25 '13 at 21:33

0

you just have to do a for loop for both as such

for (var i in array){
   for(var j in array[i]){//do stuff here}
}

answered Mar 25 '13 at 21:33

scrblnrd3

7,228
9
33
64

please use `hasOwnProperty` with this, for caution – vsync Nov 18 '13 at 14:56

Enhanced for loop in 2D Array - JavaScript

3 Answers3

Linked