Demystifying the JavaScript Array

      In Udacity' Object-Oriented JavaScript course Marcus Phillips describes the parameter this as being "the most widely misunderstood aspect of the language". I would say that Javascript's Array would be a close second. If you would like a few examples of JavaScript Arrays not behaving as expected please take a look at this really well thought out blog written by another developer.

      I believe that this misunderstanding starts when we first learn about arrays in JavaScript. The first thing that is drilled into out minds is that JavaScript Arrays are not actual arrays but JavaScript Objects with array properties. And if you look at the MDN article on Predefined Core Objects you would see that it starts by stating:

"JavaScript does not have an explicit array data type. However, you can use the predefined Array object and its methods to work with arrays in your applications. The Array object has methods for manipulating arrays in various ways, such as joining, reversing, and sorting them. It has a property for determining the array length and other properties for use with regular expressions."

      If you were just glancing at the page you would read that first sentence and go "oh, that's right. JavaScript doesn't have actual array data types that's what I expected" and you would skim the rest of the information. But by doing this would be missing a very important point in that sentence which would keep you from fully appreciated the rest of the paragraph. So let's take a look at it again "JavaScript does not have an explicit array data type". The fact that it's not explicit does not mean that JavaScript does not actually work with actual array data types. So now read the rest of the paragraph one more time to see if you notice anything different now. A JavaScript Array object works as a wrapper around native array data type, and by doing so it provides you with several methods that you can use in order to manipulate that array, since it doesn't allow you to do so directly. So if you were going to take a look at an Array object under the hood it would look something like this:

    var Array = {
      internalArray: [],
      length: function(){'does work on internalArray'},
      join: function(){'does work on internalArray'},
      sort: function(){'does work on internalArray'}
      etc..
    }

      The "internalArray" in this case would be an actual dataType array and the rest of the items in the Array object would be properties of that object with the default ones such as length, join, sort, etc... doing work on the internal array. This bring us to another common misconception about arrays: using a for loop in order to iterate through an array should be discouraged because you are not guaranteed to get the elements of the array in the correct order. Although the use of the for loop should be discouraged, this is not the reason. When you are using a for loop, although you might get the elements of the Object Array out of order the elements inside the data type, the array will actually be returned to you in the correct order. If you read the past sentence carefully you probably already noticed why you should use a for loop when looping through an array and the reason for that is that you are not guaranteed to only get the elements inside your data type array, but also the elements inside the Object Array. Now Googles V8 engine seems to do a pretty good job at not returning any of the original Array Object elements such as the ".length, .sort , etc.." properties, but any other elements that you add to the Array Object will be returned in a for loop. An example of this is:

var newArray = [0,1,2,3,4];
newArray['hello'] = 56;
newArray.length // 5
for (var key in newArray){
  console.log(key) //0,1,2,3,4,5,hello
}

      So to summarize, the most important point to get out of this is that JavaScript actually does have an array data type; it is just hidden inside JavaScript's Array Object and you can only access it through the those Object's methods, but you can still expect that internal array data type to behave like it would in any other C language, the only thing that changes is the way that you interact with it. Now that you have a better understanding of the JavaScript Array head back to Jack's blog post, and see if what's happening makes more sense to you now.

On Thu, Feb 26, 2015 at 2:26 PM, Paulo Diniz pdiniz13@gmail.com wrote:
      In Udacity' Object-Oriented JavaScript course Marcus Phillips describes the parameter this as being "the most widely missunderstood aspect of the language". I would say that JavaScripts Array's would be a close second. If you would like a few examples JavaScript Arrays not behaving as expected please take a look at this really well thought out blog written by another developer.

      I believe that this missunderstanding starts when we first learn about arrays in JavaScript. The first thing that is drilled into out minds is that JavaScript Arrays are not actual arrays but JavaScript Objects with array properties. And if you look at the MDN article on Predefined Core Objects you would see that it starts by stating:

"JavaScript does not have an explicit array data type. However, you can use the predefined Array object and its methods to work with arrays in your applications. The Array object has methods for manipulating arrays in various ways, such as joining, reversing, and sorting them. It has a property for determining the array length and other properties for use with regular expressions."

      If you were just glancing at the page you would read that first sentence and go oh that's right JavaScript doesn't have actual array data types that's what I expected and you would skim the rest of the information. But by doing this would be missing a very important point in that sentence which would keep you from fully appreciated the rest of the paragraph. So let's take a look at it again "JavaScript does not have an explicit array data type". The fact that its not explicit does not mean that JavaScript does not actually work with actual array data types. So now read the rest of the paragraph one more time to see if you notice anything different now. A JavaScript Array object works as a wrapper around native array data type, and by doing so it provides you with several methods that you can use in order to manipulate that array, since it doesn't allow you to do so directly. So if you were going to take a look at an Array object under the hood it would look something like this:

    var Array = {
      internalArray: [],
      length: function(){'does work on internalArray'},
      join: function(){'does work on internalArray'},
      sort: function(){'does work on internalArray'}
      etc..
    }

      The "internalArray" in this case would be an actual dataType array and the rest of the items in the Array obeject would be properties of that object with the default ones such as length, join, sort, etc... doing work on the internalArray. This bring us to another common misconception about arrays which is that using a for loop in order to iterate through an array should be discouraged because you are not guaranteed to get the elements of the array in the correct order. Although the use of the for loop should be discouraged this is not the reason. When you are using a for loop although you might get the elements of the Object Array out of order the elements inside the data type array will actually be returned to you in the correct order. If you read the past sentence carefully you probably already noticed why you should you a for loop when looping through an array and the reason for that is that you are not guaranteed to only get the elements inside your data type array, but also the elements inside the Object Array. Now Googles V8 engine seems to do a pretty good job at not returning any of the original Array Object elements such as the ".length, .sort , etc.." properties but any other elements that you add to the Array Object will be returned in a for loop. An example of this is:

var newArray = [0,1,2,3,4];
newArray['hello'] = 56;
newArray.length // 5
for (var key in newArray){
  console.log(key) //0,1,2,3,4,5,hello
}

      So to summarize, the most important point to get out of this is that JavaScript actually does have an array data type it is just hidden inside JavaScript's Array Object and you can only access it trhough the those Object's methods, but you can still expect that internal array data type to behave like it would in any other c language, the only thing that changes is the way that you interact with it. Not that you have a better understanding of the JavaScript Array head back to Jack's blog post, and see if what's happening makes more sense to you now.

Paulo Diniz