Why do array keys change when iterating through them for the same type?

Question

const expected_keys: String[] = [
    "q",
    "w",
    "e",
    "r",
    "t",
    "y"
];

export function lint(data: any): object {

    var working_keys: String[] = [];
    var linted_data: any = {};

    for (let key in data) {
        console.log(key);                    // Print 1
        if (expected_keys.includes(key)) {
            working_keys.push(key);
        }
    }

    console.log(working_keys);               // Print 2

    for (let key in working_keys) {
        console.log(key);                    // Print 3
        linted_data[working_keys[key]] = data[working_keys[key]];
    }

    return linted_data;
}

On the first print, it looks like the following:

q
w
e
r
t
y

On the second print, it is also qwerty. However, for the third print, i get indexes 0-5 instead of qwerty. Why is this? Both of these arrays have the same type of String[]. Does it have something to do with push()?

Take data to be the following:

{
    "q": "info",
    "w": "info",
    "e": "info",
    "r": "info",
    "t": "info",
    "y": "info",
}

And how come I get the following error but the typescript still compiles and runs as expected?

Type 'String' cannot be used as an index type.

46             linted_data[working_keys[key]] = data[working_keys[key]];

With regard to the last question, the correct type in TS is string, not String. On mobile so I can't address the main question. — jhpratt
– jhpratt, Commented Jan 13, 2019 at 1:23
What exactly is data? You have it typed as any and haven't included it so this doesn't constitute a minimal reproducible example. But it's obvious that data is some object type, and not an array. And working_keys is an array. The keys of an array are numeric. So you're iterating the keys of different things and they are different; not sure why you expect them to be the same. — jcalz
– jcalz, Commented Jan 13, 2019 at 1:29

Esteban · Accepted Answer · 2019-01-13 01:45:05Z

3

The for...in syntax loops through the properties of an object.

Your third time through is iterating over an array's properties, which are actually the indices of the items in the array.

If you want the value of key to be an item of the array, you should use for...of syntax, or working_keys.forEach instead.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

answered Jan 13, 2019 at 1:45

Esteban

2,5232 gold badges19 silver badges19 bronze badges

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

Comments

Maciej Kwas · Accepted Answer · 2019-01-13 01:49:00Z

3

First of all: if you access the Array iterator like working_keys the better approach would be to use for .. of loop

Second thing: Try to define the object property with defineProperty constructor like so:

Object.defineProperty(linted_data, key, { value: data });

At last: There might be a problem with typescript type setting under the hood I suppose so you are using String object as a key instead of a pure, basic literal string, perhaps simple casting might solve the problem:

linted_data[working_keys[key].toString()] = data[working_keys[key]];

answered Jan 13, 2019 at 1:49

Maciej Kwas

6,5473 gold badges34 silver badges55 bronze badges

Comments

ShaneCoder · Accepted Answer · 2019-01-13 01:46:11Z

1

Print 1 is logging the keys of an object. Print 2 is logging a string[]. Print 3 is logging keys of a string[] (0-5).

If you want Print 3 to log the values of the string array, use for (let key of working_keys). The important difference is the of instead of in.

From the typescript docs:

for..of vs. for..in statements Both for..of and for..in statements iterate over lists; the values iterated on are different though, for..in returns a list of keys on the object being iterated, whereas for..of returns a list of values of the numeric properties of the object being iterated.

answered Jan 13, 2019 at 1:46

ShaneCoder

7814 silver badges11 bronze badges

Collectives™ on Stack Overflow

Why do array keys change when iterating through them for the same type?

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