CODEWITHSUNDEEP
javascriptstringdynamiccomposition
Garmien
Garmien

Reputation: 175

Dynamic composition of strings

Is it possible to somehow compose a string dynamically? I've read a bit about pass-by-value and pass-by-reference, and thus I'm creating all the strings as objects.

Example:

var foo = {str: 'foo'};
var bar = {str: foo.str + 'bar'};
var baz = {str: bar.str + 'baz'};
foo.str = 'fuu';
console.log(baz.str); //expected 'fuubarbaz', got 'foobarbaz

Thanks in advance!

Upvotes: 0

Views: 75

Answers (3)

yunzen
yunzen

Reputation: 33439

Based on puddi's answer I came up with this:

console.clear()
var foo = {
  // _str is the storage of str
  _str: 'foo',
  // getter of str, always called when accessing str in a read context
  get str() {return this._str}, 
  // setter of str, always called when accessing str in a write context
  set str(str) {this._str = str}
};
// read context, so get str() of foo is called
console.log(foo.str) // "foo"

var bar = {
  // define getter function of bar, calls getter function of foo
  get str() {return foo.str + 'bar'}
};
// read context, so get str() of bar is called
console.log(bar.str) // "foobar"

var baz = {
  // define getter function of baz, calls getter function of baz
  get str() {return bar.str + 'baz'}
};
// read context, so get str() of baz is called
console.log(baz.str) // "foobarbaz"

// write context, so set str(str) of foo is called.  foo._str is now 'fuu', was 'foo'
foo.str = 'fuu';

// read context, getter of baz is called which calls getter of bar which calls getter of foo which returns _str which has the value of 'fuu'
console.log(baz.str); // "fuubarbaz"

Alternatively you can user Object.defineProperty:

console.clear();

var foo = Object.defineProperty({}, 'str', {
  enumerable: true,
  get: () => this._property_str, 
  set: (str) => this._property_str = str
});

var bar = Object.defineProperty({}, 'str', {
  enumerable: true,
  get: () => foo.str + 'bar', 
});

var baz = Object.defineProperty({}, 'str', {
  enumerable: true,
  get: () => bar.str + 'baz', 
});



foo.str = 'foo'
console.log(foo.str) // "foo"
console.log(bar.str) // "foobar"
console.log(baz.str) // "foobarbaz"
foo.str = 'fuu';
console.log(baz.str); // "fuubarbaz"

Upvotes: 0

Washington Guedes
Washington Guedes

Reputation: 4365

It doesn't work like this, the concatenation foo.str + was executed only once, the plus sign is not a function that is called multiple times.

One way to do what you want is create an object with 3 strings and a method!:

const obj = {
    a: 'foo',
    b: 'bar',
    c: 'baz',
    show: function() {
        return this.a + this.b + this.c;
    }
};

console.log(obj.show());
obj.a = 'fuu';

console.log(obj.show());

Upvotes: 0

puddi
puddi

Reputation: 811

Nah, when you define things statically like that, they're going to use the variable when it was called. You could do something like this with getters though:

let foo = {str: 'foo'};
let bar = {get str() { return foo.str + 'bar'; }};
let baz = {get str() { return bar.str + 'baz'; }};
foo.str = 'fuu';
console.log(baz.str); // properly outputs `fuubarbaz`

The reason why this works is the magic of getters; instead of defining the property statically, you're defining a function that gets called when trying to access the property. This way it can "react" to any downstream changes, because it's always dynamically generated.

Upvotes: 2

Related Questions