Check out a free preview of the full The Good Parts of JavaScript and the Web course
The "Arrays" Lesson is part of the full, The Good Parts of JavaScript and the Web course featured in this preview video. Here's what you'd learn in this lesson:
In JavaScript, the Array type inherits from the Object type. Indexes are converted to strings and used as names for retrieving values. Doug spends some time comparing arrays and objects, discussing array methods, and gives a few examples where the array API produces unexpected results.
Transcript from the "Arrays" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Douglas Crockford: Array is one of the fundamental data structures. It's a contiguous series of span of memory divided into equal sized slots where each slot is indexed by a number, very fast, very efficient. JavaScript doesn't have anything like that. Instead what JavaScript does is while the first version of JavaScript forgot to put arrays in, and people figured out that well, we can just use an object, right.
[00:00:28]
We can use the bracket notation, we can pass numbers, the numbers get turned into strings and it all kind of works like an array sort of and that's still what we do. So there is now an array data type. It inherits from object and the indices are converted into strings and used to retrieve and store values.
[00:00:48]
The good news is, that is extremely efficient for sparse arrays. Unfortunately, we don't do sparse array stuff, we're almost exclusively doing dense array stuff and it's very inefficient for that. One other advantage it provides is that there is no need to provide a length or type when creating an array.
[00:01:06]
We can just say empty angle brackets. That's a new array and then you can add as much stuff as you want to it. You don't have to worry about out of bounds errors because it's not really an array, it's a hash table. So every value is in balance.
[00:01:23]
>> Douglas Crockford: Arrays, unlike objects, have a special length property, and that property is always one larger than the highest integer subscript, which is not necessarily the same as number of elements in the array. So we can make an array with an object literal or with an array literal. Using the bracket notation, we can have multiple expressions in there separated by commas, each of those will provide a value to an element.
[00:01:58]
We can append to an array by assigning to it's current length which is really weird looking, but it works. So in this case, myList.length is 3, so we'll assign to it, and the length will now be turned into 3 plus 1, 4.
>> Douglas Crockford: Arrays come with a more interesting set of methods than objects have.
[00:02:22]
Objects have very little useful stuff coming from object.prototype. This stuff is all stored in array.prototype, much more useful set. We'll look at a couple of these. For example, there's sort method, where we can take an array of numbers and we can sort it. So anybody see what's going on here?
[00:02:45]
>> Speaker 2: [INAUDIBLE]
>> Douglas Crockford: But it's sorting on the strings. So it takes each number, converts it into a string, takes the other one, converts it into a string, compares them and it does that in log times. It's awful. So fortunately, sort can take a function argument which receives pairs of values and it returns minus 1, 0 or 1 based on their relative magnitudes.
[00:03:18]
So you can override this terrible behaviour, but It's stupid by default. You can delete an element from an array, but it doesn't do what you expect. So usually, you want to use the splice method to close up a hole. So let me demonstrate that. So here we've got an array containing four elements and I want to delete element number one.
[00:03:40]
That'll leave a hole in it which is identified as the undefined value. If you try to retrieve a value from an array and it doesn't have that element, it returns the undefined value. So if you want to get rid of that, use a splice method. You say go to element one, delete one element.
[00:04:00]
Then you'll get in an array that's more like what you were expecting. The way it does that is it deletes element one, it retrieves element two, deletes element two, re inserts it as element one. It goes to element three, reads it, deletes it, re inserts it as element two.
[00:04:15]
It's not fast.
>> Speaker 3: Whoa.
>> Douglas Crockford: [LAUGH] There's a look of horror in the crowd. Okay, so because objects and arrays are made out of the same stuff in this language, it turns out that you can use just one of them most of the time which is a really bad idea because sometimes it matters.
[00:04:39]
And because it sometimes matters, I recommend, use the right one. Use objects when the names are arbitrary strings, use arrays when the names are sequential integers. Don't be confused by the term Associative Array. In JavaScript, the Associative Array is called the object.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops