Title case a sentence function

Question

I am new to programming. I have written a solution in two different ways, but would like to know what is considered a better solution, and why.

Additionally, in terms of performance, why would one be considered better?

Solution 1:

function titleCase(str) {
  str = str.toLowerCase();
  str = str.split("");
  str[0] = str[0].toUpperCase();
  for(i = 1; i<str.length; i++){
    if(str[i+1] == " "){
      str[i+2] = str[i+2].toUpperCase();
    }
  }
  str = str.join("");
  return str;
}

Solution 2:

function titleCase(str) {
  str = str.toLowerCase();
  str = str.split(" ");
  str = str.map(function(val){
    val = val.charAt(0).toUpperCase() + val.slice(1);
    return val;
  });
  str = str.join(" ");
  return str;
}

Answer 1

Given the two solutions, I think the second is stylistically a better way to do things in javascript for the reason that solution 1 is using the for loop which is not using the power of javascript as a functional programming language. An alternative modification of solution 2 would be make everything one statement and never change the value of str but instead return the value:

function titleCase(str) {
    return str.toLowerCase()
      .split(" ")
      .map(function(v){return v.charAt(0).toUpperCase() + v.slice(1)})
      .join(" ");
}

This modification means that the function will not mutate any variables. As for performance, the first solution runs slightly faster on my system using nodejs.

function time_it (fn, arg, n) {
    var time = Date.now()
    for(var i = 0; i < n; ++i) {
        fn(arg);
    }
    return Date.now() - time;
}

SENTANCE = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis augue consequat, ullamcorper ipsum in, scelerisque tortor. Nulla justo dolor, ultrices ac varius a, fringilla et nisi. Vestibulum tristique euismod turpis, sed fermentum nibh rutrum tempus. Fusce a metus tincidunt, convallis lectus sed, suscipit ipsum. Duis sagittis et dolor id dapibus. Morbi quam urna, tristique non bibendum sit amet, viverra eget magna. Duis felis nisi, sodales eu ante et, vulputate pellentesque sem. Integer luctus lacus blandit, euismod dui vel, ultrices nibh. Suspendisse potenti. Phasellus bibendum, quam sit amet vehicula dapibus, nunc augue blandit sapien, nec bibendum purus elit at turpis."

console.log("titleCase_1 (ms): " + time_it(titleCase_1,SENTANCE,100000))
console.log("titleCase_2 (ms): " + time_it(titleCase_2,SENTANCE,100000))
console.log("titleCase_3 (ms): " + time_it(titleCase_3,SENTANCE,100000))

The results

titleCase_1 (ms): 2688
titleCase_2 (ms): 4391
titleCase_3 (ms): 4364

This has to do with the line

val.charAt(0).toUpperCase() + val.slice(1);

and the fact that solution 1 doesn't make copies of the str in the loop like map does.

An argument in favor of the second solution is that its performance could be much better. Likely what is happening is the map function is running serially but in many functional languages the map function can or is parallelized automatically.

Answer 2

A regular expression is really all you need:

/(^| +)([a-zA-Z])/g

Then use the String#replace method and pass in a function:

function toTitleCase(s) {
    return s.toLowerCase().replace(toTitleCase.WORD_PATTERN, function(match, $1, $2) {
        return $1 + $2.toUpperCase();
    });
}

toTitleCase.WORD_PATTERN = /(^| +)([a-zA-Z])/g;

If you really feel like it, jsperf.com can give you a good idea what the performance is.

Answer 3

Version 2 may avoid all those reassignements by just chaining the methods:

return str.toLower.split(" ").map....;

This way you can read the function as a series of transormations, and the noisy repetition of str has gone away.

Answer 4

In addition to the other answers, your first version is incorrect. You offset the array index twice:

• you loop from 1 to length
• you work with index i+1

This will incorrectly work for "a sentence like this" because "sentence" will not get capitalized.

Let's fix it like

for(i = 1; i<str.length; i++){
    if(str[i] == " "){
        str[i+1] = str[i+1].toUpperCase();
    }
}

However, this is still not entirely correct. What if the last character in the string is a space? You then try to call toUpperCase() on an undefined element, which will crash.

I would always recommend version 2 (or preferably some of the alternatives posted in other answers) because they more clearly show what you are doing and thereby prevent mistakes in edge cases.