the usage of 'map' method modifying inside contents, javascript

Question

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-algorithm-scripting/title-case-a-sentence

Hi,

I'm practicing a basic algorithm from Freecodecamp.com.

The instruction is below.

Return the provided string with the first letter of each word capitalized. Make sure the rest of the word is in lower case.

For the purpose of this exercise, you should also capitalize connecting words like "the" and "of".

And this is my code.

    const titleCase = str => {
      let result = str.split(' ');
      result = result.map(t => {
        t = t.toLowerCase();
        t[0] = t[0].toUpperCase();
        return t;
      });
      return result.join(' ');
    };
    
    console.log(titleCase("I'm a little tea pot"));

Result i'm a little tea pot

This is what I thought.

Extract a whole string into pieces by whitespace.

Make it lowercase.

Make only first letter uppercase.

return the result.

However, a problem is line:5 doesn't affect the result. The first letter doesn't change. Am I missing something, right? It seems I misunderstand some concepts about map method. Could you give some advice to fix that?

Thanks in advance.

From the [MDN String documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) - _"When using bracket notation for character access, attempting to delete or assign a value to these properties will not succeed. The properties involved are neither writable nor configurable."_ — fubar, Mar 31 '20 at 02:21
Please see https://ericlippert.com/2014/03/05/how-to-debug-small-programs/ — ruakh, Mar 31 '20 at 02:25
Strings in JavaScript are immutable, but you can create new strings. — Ja͢ck, Mar 31 '20 at 02:39
https://stackoverflow.com/questions/1026069/how-do-i-make-the-first-letter-of-a-string-uppercase-in-javascript — epascarello, Mar 31 '20 at 02:48

score 1 · Answer 1 · answered Mar 31 '20 at 02:26

The reason your code doesn't work as you would think is documented in the MDN String documentation.

When using bracket notation for character access, attempting to delete or assign a value to these properties will not succeed. The properties involved are neither writable nor configurable.

The alternative approach is to concatentate the first character after being converted to uppercase with the remaining string (excluding first character).

const titleCase = str => {
  return str.toLowerCase()
    .split(' ')
    .map(w => `${w[0].toUpperCase()}${w.substring(1)}`)
    .join(' ');
};

console.log(titleCase("I'm a little tea pot"));

kulicuu · Answer 2 · 2020-03-31T02:38:37.580

Looks like the assignment on strings doesn't work like that in Javascript, too bad, it's intuitively correct.

So, use a string splice, which doesn't exist, so split the string into an array of characters with str.split(''), and use array splice.

The splice modifies the input array in place, so you don't need to re-assign it.

const str = "hello";
var rayy = str.split(''); // ['h', 'e', 'l', 'l', 'o']
rayy.splice(0, 1, rayy[0].toUpperCase()); // returns ['h], but rayy is now modified in place to ['H', 'e', 'l', 'l', 'o']
const str2 = rayy.join('');  // "Hello"

Your usage of map is adept and apt.

score 0 · Answer 3 · answered Mar 31 '20 at 16:38

very elegantly looks with methods chaining - split+map+join
and patterns of string `${var1}${var2}` - in left back quote " ` "
var1 - item[0].toUpperCase() - first symbol toUpperCase
var2 - item.substring(1) - killing first symbol
.toLowerCase() - other symbols toLowerCase

const titleCase = (str) => str.split(' ')
  .map(item => (`${item[0].toUpperCase()}${item.substring(1).toLowerCase()}`))
  .join(' ')

console.log(titleCase("I'm a litTLE tea pot"));

the usage of 'map' method modifying inside contents, javascript

3 Answers3