Question

75

How does JavaScript's for...in loop work with multi-dimensional arrays?

rated 0 times [ 77] [ 2] / answers: 1 / hits: 40334 / 13 Years ago, wed, march 16, 2011, 12:00:00

I was playing a bit with JavaScript and found out (at least for me) strange behaviour when dealing with multi-dimensional arrays via a for...in loop. So I have this piece of code:

<script type="text/javascript">

  var arr = [['a', 'b'], ['c','d']];



  var first='';



  for (var singleArray in arr) {

    first += ' ' + singleArray[0] + ' ' + singleArray[1];

  }



  var second = '';

  for (var i=0;i<arr.length; i++) {

    second += ' ' + arr[i][0] + ' ' + arr[i][1];

  }



  console.log('First: ', first);

  console.log('Second: ', second);

</script>

The output is:

First: 0 undefined 1 undefined

Second: a b c d

I would expect the first and second will be the same. Can you please explain me what I am missing?

Note: please do not advise to iterate over the array via jQuery or somehow else. I don't have coding troubles, I am just curious about this particular situation.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mireyag

Add To Favorites

Follow

Total Points: 73

Total Questions: 107

Total Answers: 85

Location: Ukraine

Member since Sun, Dec 13, 2020

3 Years ago

mireyag questions

1 Discord.js V13 sending message attachments

Sun, Aug 15, 21, 00:00, 3 Years ago

1 How to clear react-select values on button click without adding it to options?

Thu, Feb 18, 21, 00:00, 3 Years ago

1 React Js : no such file or directory, open Package.json

Wed, Dec 16, 20, 00:00, 3 Years ago

1 How to import util module in Node.js?

Tue, Sep 1, 20, 00:00, 4 Years ago

1 React Select Creatable no options instead of create

Sun, Jul 5, 20, 00:00, 4 Years ago

View All

answered 13 Years ago tye · Accepted Answer

There were some good point from Erick Mickelsen pointed out but so sum it up.

for (... in ...) loop iterates over object properties

array IS an object in Javascript so you may iterate over an array with it. But it will be slower and it is generaly not recommended (see why is that)

The fact that it iterates over properties rather than values means, that it returns indexes rather than array values (this may be handy when you have associative arrays)

The example in the question may be solved with for (... in ...) loop

as follows:

var third = '';

for (var arrayIndex in arr) {

  third += ' ' + arr[arrayIndex][0] + ' ' + arr[arrayIndex][1];

}

In the associative array example the for (... in ...) loop will be handy:

var person = [];

person[id] = 1;

person[born] = 2009;

person[favourite_meal] = chicken; 



var fourth = '';

for (var arrayIndex in person) {

  fourth += ' ' + person[arrayIndex];

}