Funky array lesson?

I don’t understand what you’re trying to teach students in Unit 5 Lesson 13 number 15. The results from the insertItem function are bizarre in code studio. Real programs wouldn’t (and shouldn’t) do some of the things you’re demonstrating. Most of the items to be uncommented would generate errors in real Javascript (except you’d have to use .push(), .splice() etc instead of your insertItem() function). Teaching array indexing is challenging, it seems to me that you’re making it more confusing by allowing certain erroneous actions (adding an item at index[1000] to a 3 element array, for example. Am I missing something? Thanks, JR

insertItem() is an abstraction for the methods you mention. It is a single function that does what might be hard to explain using the actual methods.

In Javascript Arrays are not what a traditional (Fortran, C) array looks like. They are represented as Objects. They inherit from Array.prototype giving them a few methods pertinent to Arrays. As Objects they have key value pairs with the keys being string representations of numbers.

The consequences of that are that you can indeed add an item at 1000 to a 3 element array. You can even add an item at -1. That is how Javascript arrays work. I think the crux of your question is should we flaunt these differences in this class? I cannot answer that. I could argue for both sides.

The actual problem I see here is that App Lab is broken relative to how a sparse array is processed by functions like console.log(). I have already sent a bug report to App Lab support for it. Basically the output from console.log(myArray) we get from App Lab is:
ERROR: Line: 3: TypeError: Cannot read property 'isPrimitive' of undefined
What we should get is:
[ 10, 20, 30, <997 empty items>, 40 ]
As I said this has been reported as an error.

Because the contents of a sparse array (array with holes) is not enumerable in App Lab you may have to do something like this to see the entire contents:

for(var n in myArray) {
  console.log(n + ":" + myArray[n]);
}

So if Unit 5 lesson 13 puzzle 15 was this:

var myArray = [10, 20, 30];

/* Uncomment each of the following commands one at a time and 
run the program. Examine the output to see what
the results of each command are. Recomment commands
once you've used them so that you're only
seeing the results of a single command. */

insertItem(myArray,-1,0);

insertItem(myArray,1000,40);

myArray[-1] = 0;

myArray[100] = 50;

myArray[3] = 40;

for(var n in myArray) {
  console.log(n + ":" + myArray[n]);
}

The output to console would look like this:

"0:10"
"1:20"
"2:0"
"3:40"
"4:40"
"100:50"
"-1:0"
>

As you can see Javascript Arrays do not behave like arrays in other languages.

I just got a response back from support@code.org. They want me to post the problem here. I will post it in a separate thread. Unit 5 Lesson 13 puzzle 15 behavior of console.log

Thanks for the reply. I get that your insertItem() function calls JS functions like splice() and push(). And I hear you about JS and arrays. I don’t particularly like how JS and arrays works. It’s not a feature (to me) that this following code will not cause indexing errors:

var myArray = [10, 20, 30];
myArray.splice(-1, 0, 60);
myArray.splice(1000, 0, 80);

It doesn’t feel like good coding practice. I guess my real point is that I’d rather we be strict in teaching students how to work with arrays, and not have to try to explain why, in a 3 element array, I can get away with this:

insertItem(myArray,1000,40);

It just makes it harder to explain to students who are new to coding how to work with arrays.

In any case, thanks! JR

image001.jpg

I could get behind a change to the abstractions appendItem(list, item), insertItem(list, index, item) and removeItem(list, index) such that they enforce array bounds and throw errors that make sense. They would need to add assignItem(list, index, item) to complete the set.

Start a post to suggest it. My experience is that change requests must come from a moderator after a discussion here.