Why can't I set properties of an array element (a string) in JavaScript?

Question

var array = ['a', 'b', 'c'];
array[0].property = 'value';

alert(array[0].property);   
alert(array[0].property = 'value');
alert(array[0].property);   

The result? undefined, 'value', then undefined

Why isn't this code working as expected?

Answer 1

The Array is irrelevant - you're trying to set a property on a primitive:

A data that is not an object and does not have any methods. JavaScript has 5 primitive datatypes: string, number, boolean, null, undefined. With the exception of null and undefined, all primitives values have object equivalents which wrap around the primitive values, e.g. a String object wraps around a string primitive. All primitives are immutable.

If you absolutely must use a property to carry this additional information around in a string, an alternative would be to use the object equivalent:

>>> var array = [new String('a'), new String('b'), new String('c')];
>>> array[0].property
undefined
>>> array[0].property = 'value'
"value"
>>> array[0].property
"value"

A potential gotcha to look out for if you do this and later need to detect that the value is a string:

>>> var a = ['s', new String('s')];
>>> a.map(function(s) { return typeof s; });
["string", "object"]
>>> a.map(function(s) { return s instanceof String });
[false, true]
>>> a.map(function(s) { return Object.prototype.toString.call(s) == '[object String]' });
[true, true]

Answer 2

Your array elements are string literals. JavaScript makes it seem like string literals are objects and have properties, but what's actually happening when you do array[0].property is that JavaScript is creating a temporary object for your string and assigning the property to that.

That's why the middle alert works correctly and the others don't. If you declared your array like:

var array = [new String('a'), new String('b'), new String('c')];

all three would work.