Unidentified values appearing in my javascript array

Question

I'm creating a small game and I have a peace of code that collects the pressed keys during an interval of time.

var pressedKeys = [];

setTimeout(function() {
     for(var i = 0; i < pressedKeys.length; i++)
     alert("Time is up you have inputed " + pressedKeys[i] + " length " + pressedKeys.length);
}, 3000);

$(document).keydown(function(evt) {
    var key = evt.keyCode;
if (pressedKeys.length < 1) {
    pressedKeys[0] = key;
} else {
    pressedKeys[pressedKeys.length + 1] = key;
}
});

I'm new to javascript and I can't understand why I have unidentified values in the array. The funny thing to me is if I do the loop with a foreach I do not get the unidentified values.

Can some one please explain this to me. I would be very thankful.

user1106925 · Accepted Answer · 2012-02-17 20:38:04Z

3

This...

pressedKeys[pressedKeys.length + 1] = key;

should be this...

pressedKeys[pressedKeys.length] = key;

Since Array indices are zero-based, the current last item in the Array will be its length - 1, which means the next item to fill will be the one at its .length.

You can actually get rid of the if statement...

$(document).keydown(function(evt) {
    pressedKeys[pressedKeys.length] = evt.keyCode;
});

It starts off with a .length of 0, so the first entry will be at index 0, which makes the .length equal to 1, so the next entry will be at index 1, and so on...

answered Feb 17, 2012 at 20:38

user1106925

Sign up to request clarification or add additional context in comments.

8 Comments

gen_Eric Over a year ago

pressedKeys.push(key) would be even better.

user1106925 Over a year ago

@Rocket: It's an option, but how is it better?

gen_Eric Over a year ago

Why get the length property, and then add to the array at that position when you can just say "add to the end"?

user1106925 Over a year ago

@Rocket: Because by getting the .length property, and adding to the array at that position, it is saying "add to the end". :)

user1106925 Over a year ago

@Rocket: .push() has a negative psychological impact on me, like someone is trying to push me into doing something. Whereas .length makes me feel as though someone is going to great lengths on my behalf. This is how I make most of my coding decisions. :D

|

Rob W · Accepted Answer · 2012-02-17 20:39:07Z

2

Because of this:

} else {
    pressedKeys[pressedKeys.length + 1] = key;
}

The length property returns the length of an array. Arrays are zero-based, so when you refer to the lengthth index, you're referring to an non-existent element.
When you add an element at position length + 1, you're creating a gap between the last existing and new element.

This happens:

var pressedKeys = [];
var length = pressedKeys.length; // Equal to zero, 0
pressedKeys[length + 1] = key;   // Inserts key at position 0 + 1 = 1
// result: pressedKeys = [undefined, key]

To solve the issue, don't add +1, or use the push method:

pressedKeys.push(key);

answered Feb 17, 2012 at 20:39

Rob W

351k87 gold badges811 silver badges683 bronze badges

Comments

gen_Eric · Accepted Answer · 2012-02-17 20:51:32Z

0

pressedKeys[pressedKeys.length + 1] = key;

This will actually skip elements. Arrays are zero-indexed.

Let's say you have 3 elements in the array, they will be:

pressedKeys[0]
pressedKeys[1]
pressedKeys[2]

When that line is ran pressedKeys.length will be 3, thus inserting the value into pressedKeys[4]. This will make pressedKeys[3] undefined.

The line should be pressedKeys[pressedKeys.length] = key, or better yet, don't use the length, just push onto the array.

$(document).keydown(function(evt) {
    var key = evt.keyCode;
    pressedKeys.push(key); // this will add to the end of the array,
                           // no need to calculate the position
});

edited Feb 17, 2012 at 20:51

answered Feb 17, 2012 at 20:40

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

Collectives™ on Stack Overflow

Unidentified values appearing in my javascript array

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related