javascript - Value assigned to primitive will be lost

Question

If I have an array of objects, and loop through them assigning a value to an attribute for each one, WebStorm warns me:

Values assigned to primitive will be lost

However, when testing in the console, I do not "lose" any values.

This only happens when the loop is inside of a function.

An example of this error below:

let people = [
    {
        name: 'Foo',
        age: 21,
        surname: 'FooBar'
    },

    {
        name: 'Bar',
        age: 51,
        surname: 'FooBar'
    }
];

Without function wrapper:

people.forEach(function (person) {
    person.surname = 'Baz'; // No error. Works in console.
});

With function wrapper:

function changeSurname(people) {
    people.forEach(function (person) {
        person.surname = 'Baz'; // Error warning me that value assigned to primitive will be lost.
    });
}

changeSurname(people);

Both of these produce the same output in the console (the surname is changed to 'baz').

I assume this has something to do with the object reference and what person points to, but I am not sure exactly what.

Why do I see this error?

What potential bug is WebStorm trying to save me from?

Answer 1

There's nothing improper in your code, WebStorm's type inference is getting a bit confused (this aspect of JavaScript is particularly confusing).

Its linter sees a string and assumes you will try something like this:

var primitive = "september";
primitive.vowels = 3;

primitive.vowels;
// => undefined

Which would lead to a 'lost' value.

The fact that it only catches this 'error' inside of a function seems like an outright bug that should be reported.

To further understand this weird part of JavaScript, I recommend Angus Croll's excellent in-depth article here.