JavaScript Unexpected Behaviour iterating arrays inside arrays

Question

I'm trying to build a key/value relationship for an ajax based web app. I've decided to use a pure array-based approach as iterating arrays is faster than objs (or so I'm told).

The base of the idea looks like this:

var keyVals = [
    [ "key1", ["value1"] ],
    [ "key2", ["value2"] ],
];

However when I iterate the array to delete/set or change a key, the event doesn't run as expected:

For example:

console.log(keyVals);

function delKeyPair(key) {
    for (var i = 0; i < keyVals.length; i++) {
        if (keyVals[i][0] && keyVals[i][0] === key) {
            Array.prototype.splice.call(keyVals, i, 1);
            return true
        }
    }
    return false
};

delKeyPair("key1");
console.log(keyVals);

When I first console.log() the array - it shows that "key1 has already been deleted, before the function is called.

here is a fiddle, not quite sure what's going on. Any help is much appreciated. http://jsfiddle.net/3pfj8927/

It does not happen with document.write(), it looks like the first console.log is passed by value, causing the first log message to change when the variable is changed — Ferrybig
– Ferrybig, Commented Feb 18, 2015 at 12:04

Manwal · Accepted Answer · 2015-02-18 12:04:42Z

1

key1 has not already been deleted before calling function:

try console.log(keyVals.length);

DEMO

Output:

Length before deleting: 2
Length after deleting: 1

answered Feb 18, 2015 at 12:04

Manwal

23.9k15 gold badges65 silver badges95 bronze badges

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

Comments

Scimonster · Accepted Answer · 2015-02-18 12:05:31Z

0

The console runs asynchronously. It also keeps a reference to your object.

Your code is running just fine.

When you look at the object in the console, it shows you the current way it looks, not how it was at the time of the log.

If you replace console.log(keyVals); with console.log(keyVals.slice());, you should see the proper objects, because we copy them as-is.

answered Feb 18, 2015 at 12:05

Scimonster

33.4k10 gold badges79 silver badges92 bronze badges

Comments

Simon · Accepted Answer · 2015-02-18 12:06:29Z

0

The key1 has not been deleted. Note you're working on a reference of the given array. If you inspect the Array it will be loaded by the reference. Because you're changing the reference in the delKeyPair function it seems that there never was a key1.

If you copy the array on delete you'll see everything works like expected.

answered Feb 18, 2015 at 12:06

Simon

2301 silver badge6 bronze badges

Collectives™ on Stack Overflow

JavaScript Unexpected Behaviour iterating arrays inside arrays

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related