{"id":296,"date":"2016-01-11T11:04:00","date_gmt":"2016-01-11T11:04:00","guid":{"rendered":"http:\/\/www.thespidercloud.com\/?p=132"},"modified":"2018-05-29T05:52:47","modified_gmt":"2018-05-29T05:52:47","slug":"study-of-a-function-titlecase","status":"publish","type":"post","link":"https:\/\/frowningbear.com\/codebase\/2016\/01\/11\/study-of-a-function-titlecase\/","title":{"rendered":"Study of a Function – titleCase()"},"content":{"rendered":"

Lets try and do a detailed analysis\/deconstruction of a function titleCase()<\/code> 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.<\/p>\n


\n[javascript wraplines=”true”]
\n\/\/ the original code
\nvar testString ="tedwood excellent bear";<\/p>\n

function titleCase(str) {
\n var strArray = str.split(" ");
\n var i;
\n for (i = 0; i &lt; strArray.length; i++){
\n strArray[i] = capitalise(strArray[i]);
\n }
\n return(strArray);
\n}<\/p>\n

function capitalise(str) {
\n var result = [];
\n result[0] = str.charAt(0).toUpperCase();
\n result[1] = str.substring(1);
\n return(result.join(""));
\n}<\/p>\n

console.log(titleCase(testString)); \/\/ Tedwood Excellent Bear
\n[\/javascript]<\/p>\n

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.<\/p>\n

[javascript]\/\/ deconstructed with no functions, just sequential code
\nvar testString ="tedwood excellent bear";
\nvar strArray = testString.split(" ");
\nvar i;
\nfor (i = 0; i &lt; strArray.length; i++){
\n var currentWord = strArray[i];
\n var result = [];
\n result[0] = currentWord.charAt(0).toUpperCase();
\n result[1] = currentWord.substring(1);
\n strArray[i] = result.join("");
\n}
\nconsole.log(strArray); \/\/ Tedwood Excellent Bear
\n[\/javascript]
\nNow lets modify it slightly by putting that code into one function only.
\n[javascript]\/*
\nThis is a shortened version of
\nthe original code rewritten to
\nuse only one function
\n*\/<\/p>\n

var testString ="tedwood excellent bear";<\/p>\n

function titleCase(str) {
\n var strArray = str.split(" ");
\n var i;
\n for (i = 0; i &lt; strArray.length; i++){
\n var currentWord = strArray[i];
\n\tvar result = [];
\n result[0] = currentWord.charAt(0).toUpperCase();
\n\tresult[1] = currentWord.substring(1);
\n strArray[i] = result.join("");
\n }
\n return(strArray);
\n} <\/p>\n

console.log(titleCase(testString)); \/\/ Tedwood Excellent Bear
\n[\/javascript]
\nLets try a bit of Switcheroo! A minor variation of the previous. Only the last statements have been changed. Can you see the difference?
\n[javascript]
\nvar testString ="tedwood excellent bear";<\/p>\n

function titleCase(str) {
\n var strArray = str.split(" ");
\n var i;
\n for (i = 0; i &lt; strArray.length; i++){
\n var currentWord = strArray[i];
\n\tvar result = [];
\n result[0] = currentWord.charAt(0).toUpperCase();
\n\tresult[1] = currentWord.substring(1);
\n strArray[i] = result.join("");
\n }
\n console.log(strArray);
\n}<\/p>\n

titleCase(testString); \/\/ Tedwood Excellent Bear
\n[\/javascript]
\nFinally here is the original code supplemented with extensive logs to help visualise what’s going on more clearly.<\/p>\n

[javascript]
\n\/\/ the final version, the original code with all the logs for clarity
\nvar testString ="tedwood excellent bear";<\/p>\n

function titleCase(str) {
\n var strArray = str.split(" ");
\n console.log("String converted to array:");
\n console.log(strArray);
\n console.log(" ");
\n var i;
\n for (i = 0; i &lt; strArray.length; i++){
\n console.log("i is now: " + i);
\n console.log("Current array item is: " + strArray[i]);
\n console.log("Now send to capitalise function…");
\n strArray[i] = capitalise(strArray[i]);
\n console.log(" Updated array is: ");
\n console.log(strArray);
\n if(i &lt; strArray.length – 1) {
\n console.log(" Loop over next item in array…");
\n }
\n console.log(" ");
\n }
\n console.log("Final output is: ");
\n return(strArray);
\n}<\/p>\n

function capitalise(str) {
\n var result = [];
\n result[0] = str.charAt(0).toUpperCase();
\n console.log(" Capitalised first letter is: " + result[0]);
\n result[1] = str.substring(1);
\n console.log(" Rest of the word is: " + result[1]);
\n console.log(" Joined result is: " + result.join(""));
\n console.log(" Put capitalised result back into first array…");
\n return(result.join(""));
\n}<\/p>\n

console.log(titleCase(testString)); <\/p>\n

\/* Running the code in Firebug produces this result<\/p>\n

String converted to array:
\n["tedwood", "excellent", "bear"]<\/p>\n

i is now: 0
\nCurrent array item is: tedwood
\nNow send to capitalise function…
\n Capitalised first letter is: T
\n Rest of the word is: edwood
\n Joined result is: Tedwood
\n Put capitalised result back into first array…
\n Updated array is:
\n["Tedwood", "excellent", "bear"]
\n Loop over next item in array…<\/p>\n

i is now: 1
\nCurrent array item is: excellent
\nNow send to capitalise function…
\n Capitalised first letter is: E
\n Rest of the word is: xcellent
\n Joined result is: Excellent
\n Put capitalised result back into first array…
\n Updated array is:
\n["Tedwood", "Excellent", "bear"]
\n Loop over next item in array…<\/p>\n

i is now: 2
\nCurrent array item is: bear
\nNow send to capitalise function…
\n Capitalised first letter is: B
\n Rest of the word is: ear
\n Joined result is: Bear
\n Put capitalised result back into first array…
\n Updated array is:
\n["Tedwood", "Excellent", "Bear"]<\/p>\n

Final output is:
\n["Tedwood", "Excellent", "Bear"]<\/p>\n

*\/<\/p>\n

[\/javascript]<\/p>\n","protected":false},"excerpt":{"rendered":"

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.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-296","post","type-post","status-publish","format-standard","hentry","category-javascript"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/posts\/296","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/comments?post=296"}],"version-history":[{"count":4,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/posts\/296\/revisions"}],"predecessor-version":[{"id":1209,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/posts\/296\/revisions\/1209"}],"wp:attachment":[{"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/media?parent=296"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/categories?post=296"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/tags?post=296"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}