Question

Does javascript use immutable or mutable strings? Do I need a “string builder”?

Answer 1

They are immutable. You cannot change a character within a string with something like var myString = "abbdef"; myString[2] = 'c'. The string manipulation methods such as trim, slice return new strings.

In the same way, if you have two references to the same string, modifying one doesn’t affect the other

let a = b = "hello";
a = a + " world";
// b is not affected

Myth Debunking – String concatenation is NOT slow

I’ve always heard what Ash mentioned in his answer (that using Array.join is faster for concatenation) so I wanted to test out the different methods of concatenating strings and abstracting the fastest way into a StringBuilder. I wrote some tests to see if this is true (it isn’t!).

This was what I believed would be the fastest way, avoiding push and using an array to store the strings to then join them in the end.

class StringBuilderArrayIndex {
  array = [];
  index = 0;
  append(str) {
    this.array[this.index++] = str 
  }
  toString() {
    return this.array.join('')
  }
}

Some benchmarks

• Read the test cases in the snippet below
• Run the snippet
• Press the benchmark button to run the tests and see results

I’ve created two types of tests

• Using Array indexing to avoid Array.push, then using Array.join
• Straight string concatenation

For each of those tests, I looped appending a constant value and a random string;

<script benchmark>

  // Number of times to loop through, appending random chars
  const APPEND_COUNT = 1000;
  const STR = 'Hot diggity dizzle';
  
  function generateRandomString() {
    const characters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    const length = Math.floor(Math.random() * 10) + 1; // Random length between 1 and 10
    let result = '';

    for (let i = 0; i < length; i++) {
      const randomIndex = Math.floor(Math.random() * characters.length);
      result += characters.charAt(randomIndex);
    }
    return result;
  }

  const randomStrings = Array.from({length: APPEND_COUNT}, generateRandomString);
  
  class StringBuilderStringAppend {
    str = '';

    append(str) {
      this.str += str;
    }

    toString() {
      return this.str;
    }
  }
  
  class StringBuilderArrayIndex {
    array = [];
    index = 0;

    append(str) {
      this.array[this.index] = str;
      this.index++;
    }

    toString() {
      return this.array.join('');
    }
  }

  // @group Same string 'Hot diggity dizzle'

  // @benchmark array push & join 
  {
    const sb = new StringBuilderArrayIndex();

    for (let i = 0; i < APPEND_COUNT; i++) {
      sb.append(STR)
    }
    sb.toString();
  }

  // @benchmark string concatenation
  {
    const sb = new StringBuilderStringAppend();

    for (let i = 0; i < APPEND_COUNT; i++) {
      sb.append(STR)
    }
    sb.toString();
  }

  // @group Random strings

  // @benchmark array push & join
  {
    const sb = new StringBuilderArrayIndex();

    for (let i = 0; i < APPEND_COUNT; i++) {
      sb.append(randomStrings[i])
    }
    sb.toString();
  }

  // @benchmark string concatenation
  {
    const sb = new StringBuilderStringAppend();

    for (let i = 0; i < APPEND_COUNT; i++) {
      sb.append(randomStrings[i])
    }
    sb.toString();
  }
  
  
</script>
<script src="https://cdn.jsdelivr.net/gh/silentmantra/benchmark/loader.js"></script>

Findings

Nowadays, all evergreen browsers handle string concatenation better, at least twice as fast.

i-12600k (added by Alexander Nenashev)

Chrome/117

--------------------------------------------------------------------
Same string 'Hot diggity dizzle'
    string concatenation   1.0x  |  x100000  224  232  254  266  275
    array push & join      3.2x  |  x100000  722  753  757  762  763
Random strings
    string concatenation   1.0x  |  x100000  261  268  270  273  279
    array push & join      5.4x  |   x10000  142  147  148  155  166
--------------------------------------------------------------------
https://github.com/silentmantra/benchmark

Firefox/118

--------------------------------------------------------------------
Same string 'Hot diggity dizzle'
    string concatenation   1.0x  |  x100000  304  335  353  358  370
    array push & join      9.5x  |   x10000  289  300  301  306  309
Random strings
    string concatenation   1.0x  |  x100000  334  337  345  349  377
    array push & join      5.1x  |   x10000  169  176  176  176  180
--------------------------------------------------------------------
https://github.com/silentmantra/benchmark

Results below on a 2.4 GHz 8-Core i9 Mac on Oct 2023

Chrome

--------------------------------------------------------------------
Same string 'Hot diggity dizzle'
    string concatenation   1.0x  |  x100000  574  592  594  607  613
    array push & join      2.7x  |   x10000  156  157  159  164  165
Random strings
    string concatenation   1.0x  |  x100000  657  663  669  675  680
    array push & join      4.3x  |   x10000  283  285  295  298  311
--------------------------------------------------------------------
https://github.com/silentmantra/benchmark

Firefox

--------------------------------------------------------------------
Same string 'Hot diggity dizzle'
    string concatenation   1.0x  |  x100000  546  648  659  663  677
    array push & join      5.8x  |   x10000  314  320  326  331  335
Random strings
    string concatenation   1.0x  |  x100000  647  739  764  765  804
    array push & join      2.9x  |   x10000  187  188  199  219  231
--------------------------------------------------------------------
https://github.com/silentmantra/benchmark

Brave

--------------------------------------------------------------------
Same string 'Hot diggity dizzle'
    string concatenation   1.0x  |  x100000  566  571  572  579  600
    array push & join      2.5x  |   x10000  144  145  159  162  166
Random strings
    string concatenation   1.0x  |  x100000  649  658  659  663  669
    array push & join      4.4x  |   x10000  285  285  290  292  300
--------------------------------------------------------------------
https://github.com/silentmantra/benchmark `

Safari

--------------------------------------------------------------------
Same string 'Hot diggity dizzle'
    string concatenation   1.0x  |  x10000   76   77   77   79   82
    array push & join      2.2x  |  x10000  168  168  174  178  186
Random strings
    string concatenation   1.0x  |  x100000  878  884  889  892  903
    array push & join      2.3x  |   x10000  199  200  202  202  204
--------------------------------------------------------------------
https://github.com/silentmantra/benchmark `

Opera

--------------------------------------------------------------------
Same string 'Hot diggity dizzle'
    string concatenation   1.0x  |  x100000  577  579  581  584  608
    array push & join      2.7x  |   x10000  157  162  165  166  171
Random strings
    string concatenation   1.0x  |  x100000  688  694  740  750  781
    array push & join      4.2x  |   x10000  291  315  316  317  379
--------------------------------------------------------------------
https://github.com/silentmantra/benchmark