Lets try and do a detailed analysis/deconstruction of a function titleCase() which takes a string and capitalises the first letter of every word. It uses arrays and some string methods and demonstrates usage of the return keyword and the practice of passing one function as an argument to another.
[javascript wraplines=”true”]
// the original code
var testString ="tedwood excellent bear";
function titleCase(str) {
var strArray = str.split(" ");
var i;
for (i = 0; i < strArray.length; i++){
strArray[i] = capitalise(strArray[i]);
}
return(strArray);
}
function capitalise(str) {
var result = [];
result[0] = str.charAt(0).toUpperCase();
result[1] = str.substring(1);
return(result.join(""));
}
console.log(titleCase(testString)); // Tedwood Excellent Bear
[/javascript]
The code uses 2 functions defined by the author but for the sake of demonstration and comparison we can rewrite that code to not need any self-defined functions.
[javascript]// deconstructed with no functions, just sequential code
var testString ="tedwood excellent bear";
var strArray = testString.split(" ");
var i;
for (i = 0; i < strArray.length; i++){
var currentWord = strArray[i];
var result = [];
result[0] = currentWord.charAt(0).toUpperCase();
result[1] = currentWord.substring(1);
strArray[i] = result.join("");
}
console.log(strArray); // Tedwood Excellent Bear
[/javascript]
Now lets modify it slightly by putting that code into one function only.
[javascript]/*
This is a shortened version of
the original code rewritten to
use only one function
*/
var testString ="tedwood excellent bear";
function titleCase(str) {
var strArray = str.split(" ");
var i;
for (i = 0; i < strArray.length; i++){
var currentWord = strArray[i];
var result = [];
result[0] = currentWord.charAt(0).toUpperCase();
result[1] = currentWord.substring(1);
strArray[i] = result.join("");
}
return(strArray);
}
console.log(titleCase(testString)); // Tedwood Excellent Bear
[/javascript]
Lets try a bit of Switcheroo! A minor variation of the previous. Only the last statements have been changed. Can you see the difference?
[javascript]
var testString ="tedwood excellent bear";
function titleCase(str) {
var strArray = str.split(" ");
var i;
for (i = 0; i < strArray.length; i++){
var currentWord = strArray[i];
var result = [];
result[0] = currentWord.charAt(0).toUpperCase();
result[1] = currentWord.substring(1);
strArray[i] = result.join("");
}
console.log(strArray);
}
titleCase(testString); // Tedwood Excellent Bear
[/javascript]
Finally here is the original code supplemented with extensive logs to help visualise what’s going on more clearly.
[javascript]
// the final version, the original code with all the logs for clarity
var testString ="tedwood excellent bear";
function titleCase(str) {
var strArray = str.split(" ");
console.log("String converted to array:");
console.log(strArray);
console.log(" ");
var i;
for (i = 0; i < strArray.length; i++){
console.log("i is now: " + i);
console.log("Current array item is: " + strArray[i]);
console.log("Now send to capitalise function…");
strArray[i] = capitalise(strArray[i]);
console.log(" Updated array is: ");
console.log(strArray);
if(i < strArray.length – 1) {
console.log(" Loop over next item in array…");
}
console.log(" ");
}
console.log("Final output is: ");
return(strArray);
}
function capitalise(str) {
var result = [];
result[0] = str.charAt(0).toUpperCase();
console.log(" Capitalised first letter is: " + result[0]);
result[1] = str.substring(1);
console.log(" Rest of the word is: " + result[1]);
console.log(" Joined result is: " + result.join(""));
console.log(" Put capitalised result back into first array…");
return(result.join(""));
}
console.log(titleCase(testString));
/* Running the code in Firebug produces this result
String converted to array:
["tedwood", "excellent", "bear"]
i is now: 0
Current array item is: tedwood
Now send to capitalise function…
Capitalised first letter is: T
Rest of the word is: edwood
Joined result is: Tedwood
Put capitalised result back into first array…
Updated array is:
["Tedwood", "excellent", "bear"]
Loop over next item in array…
i is now: 1
Current array item is: excellent
Now send to capitalise function…
Capitalised first letter is: E
Rest of the word is: xcellent
Joined result is: Excellent
Put capitalised result back into first array…
Updated array is:
["Tedwood", "Excellent", "bear"]
Loop over next item in array…
i is now: 2
Current array item is: bear
Now send to capitalise function…
Capitalised first letter is: B
Rest of the word is: ear
Joined result is: Bear
Put capitalised result back into first array…
Updated array is:
["Tedwood", "Excellent", "Bear"]
Final output is:
["Tedwood", "Excellent", "Bear"]
*/
[/javascript]