How to set/update the value of a String object in JavaScript

Question

I have an object with some properties which are String objects:

var obj = {
    foo: new String("bar")
};

I am using String objects because I am needing to store additional sub-properties on the object while still being able to get the string value:

obj.foo.baz = "baz";
"" + obj.foo; //-> "bar";

I feel dumb for asking, but how can I update the value of a String object? Seems like some Array splice magic might need to be applied.

EDIT: Just to be clear, I understand string primitives in JS and immutability therein. This is an object I'm talking about. Here is the test that needs to pass:

assert.equal("" + obj.foo, "foo"); //-> true
assert.equal(obj.foo.baz, "baz"); //-> true

extend(obj, { foo: "foooooo" });
assert.equal("" + obj.foo, "foooooo"); //-> true
assert.equal(obj.foo.baz, "baz"); //-> true

Answer 1

You can't. Strings are immutable, regardless of how you "construct" them (literal or object).

What you should be doing is simply use an actual object to hold your values and your string.

At the most basic level this would be:

var obj = {
  foo: "bar"
};

// later...
obj.baz = "baz";
"" + obj.foo; //-> "bar";

You can also consider using a monadic type as an "amplifier" / decorator, but that seems way overkill for this use case.

---

As a side note, adding properties and "random" functions to a string object is not a good OOP choice. These are strictly not relevant to the value that is the string, and only make sense to a higher level object, which is where they should reside.

Answer 2

You'd need to create a new String object and extend any new properties and values to that String object. I've provided a simple example below. That said, this example can be modified to suit your purposes (you'd create a custom extend or setter function).

Example of a property setter function

var createNewString = function (oldStringObj, string) {
  var _new = new String(string);

  var keys = Object.keys(oldStringObj);  // returns only custom properties (not part of prototype)
  for (var i=0,n=keys.length; i<n; i++){
    var key = keys[i];

    if (Number.isInteger(+key)) {
       continue;                         // skip property if it's a numbered key
    }
    _new[key] = oldStringObj[key];       // simple assignment (not a deep copy) -- room for improvement
  }
  return _new;
};

Original object

var obj = {
    foo: new String("bar")
};
obj.foo.baz = "baz"; // new property

Update the object

obj.foo = createNewString( obj.foo, 'foot' );
//obj.foo=='foot' and obj.foo.baz=='baz'

Answer 3

I suggest that you use a custom type for this, instead of the default String type. The ES6 spec defines that the underlying value for a String object is stored in its "[[StringData]] internal slot". The only place this slot is assigned is via the new String constructor, so it is implicitly immutable. You can create a new type which has the same string-like behaviours that you require, while being mutable.

class MutableString {
  constructor(value) {
    this.value = value;
  }

  toString() {
    return this.value;
  }
}

var obj = {
  foo: new MutableString('bar')
};
obj.foo.baz = "baz";


console.assert("" + obj.foo == "bar");
console.assert(obj.foo + "" == "bar");
console.assert(obj.foo.baz == "baz");
console.assert(Object.keys({[obj.foo]: 1})[0] == "bar");

obj.foo.value = "foooooo";
console.assert("" + obj.foo == "foooooo");
console.assert(obj.foo + "" == "foooooo");
console.assert(obj.foo.baz == "baz");
console.assert(Object.keys({[obj.foo]: 1})[0] == "foooooo");

Because this isn't really a string it won't support any string methods, so it may not be suitable for your use. But it's more flexible and a little clearer, so I suggest considering it if possible.

It may be necessary to define a valueOf() method like toString() to handle some other cases, but I haven't verified.