Skip to content
Advertisement

What is the appropriate use for the .replace method within this context/ within a .map method?

I’m trying to loop through an array of strings and for each element(string) in that array, change the character after the “_” underscore character to a “*” character. Strings are immutable so, pushing this all to a new array.

The chain performs as expected when directly targeting the underscore for replacement:

const t1 = ['underscore_case', 'first_name', 'some_variable', 'calculate_age', 'delayed_departure']
const t2 = t1.map(e => e.replace(e[e.indexOf('_')], '*'))
// Output: ['underscore*case', 'first*name', 'some*variable', 'calculate*age', 'delayed*departure']

But the moment the actual intended function is pursued, that of modifying the character following the underscore- the output becomes almost frenzied, with “*” appearing at random intervals throughout each string. In both the following attempt:

const t1 = ['underscore_case', 'first_name', 'some_variable', 'calculate_age', 'delayed_departure']
const t2 = t1.map(e => e.replace(e[e.indexOf('_')+1], '*'))
// Output: ['unders*ore_case', 'first_*ame', 'some_*ariable', 'c*lculate_age', '*elayed_departure']

As well as, after some desperation, manually entering in an index like so:

const t1 = ['underscore_case', 'first_name', 'some_variable', 'calculate_age', 'delayed_departure']
const t2 = t1.map(e => e.replace(e[5], '*'))
// Output: ['under*core_case', 'first*name', 'some_*ariable', 'ca*culate_age', 'd*layed_departure']

Experimentation has shown that for some reason the unexpected behavior, notably in the last two elements- only tends to arise when the manually specified index value exceeds or is equal to 5 for some reason?

Why is this happening?

After a few hours of trying various loop approaches and breaking each operation down outside of chaining, I keep returning to the same result when using the replace method, wherever that occurs- and have had to use a workaround involving the slice method and template literals.

Advertisement

Answer

The character that follows the underscore may occur earlier in the string as well, and when that is the case the replace call will find that occurrence and replace it.

So for instance, with “calculate_age”, e[indexOf("_")+1] will evaluate to “a” (of “age”), but replace will find an “a” in the beginning of the string, and replace that one with an asterisk.

Instead, use a regular expression for this:

const t1 = ['underscore_case', 'first_name', 'some_variable', 'calculate_age', 'delayed_departure'];
const t2 = t1.map(e => e.replace(/_./g, '_*'));

console.log(t2);

The dot in the regular expression is a wildcard. So whatever it is (except newline), it will get replaced (together with the underscore) with “_*”.

As to what you wrote:

Strings are immutable so, pushing this all to a new array.

Yes strings are immutable, but arrays are mutable, so you could have decided to replace all strings in that array with the replacements. Then you mutate the array, not the strings.

Having said that, it is fine (and good functional programming) to create a new array.

Advertisement