{"id":939,"date":"2011-08-10T22:33:26","date_gmt":"2011-08-11T02:33:26","guid":{"rendered":"http:\/\/yuguangzhang.com\/blog\/?p=939"},"modified":"2011-08-10T22:33:26","modified_gmt":"2011-08-11T02:33:26","slug":"functional-javascript-programming-using-underscore","status":"publish","type":"post","link":"http:\/\/yuguangzhang.com\/blog\/functional-javascript-programming-using-underscore\/","title":{"rendered":"Functional Javascript Programming using Underscore"},"content":{"rendered":"

The Scenario<\/strong><\/p>\n

Suppose a javascript function is needed to parse text and execute another function for certain lines of text. Each line of the text is ended with a line break. If there is a keyword ‘get’, then the word following it needs to be checked if it is in the list of files on the server, and get it, using a GET request. So ‘get this’ would get the file ‘this’ from the server.<\/p>\n

Object Oriented Approach<\/strong><\/p>\n

First, I tried doing this using the traditional way, with array indexes of letters.<\/p>\n

[cc lang=”javascript”]
\nif(input.value.split(‘ ‘).indexOf(‘get’)==-1) return;
\nvar lines = input.value.split(‘\\n’);
\n…
\n[\/cc]<\/p>\n

I stopped right there the next line is supposed to be a for each loop. That satisfied the requirements for using a functional library called underscore.js.<\/p>\n

Mixed Approach <\/strong><\/p>\n

Not my favorite one, as it makes the painting look like a collage, and I think it made an error in the code harder to spot. See if you can spot it:<\/p>\n

[cc lang=”javascript”]
\n_(input.value.split(‘ ‘)).chain()
\n\t.select(function (line) {
\n\t\tvar words = line.split(‘ ‘);
\n\t\treturn words.length > 1 && words[0] == ‘get’ && _.include(files, words[1]);
\n\t})
\n\t.each(function (line) {
\n\t\texecuteGet(line);
\n\t});
\n[\/cc]
\nAha! The space should actually be newline.<\/p>\n

Functional Approach <\/strong>
\nThis time, I had to modify the code to use a single word from the word array, the last one.
\nThe main line that violated the functional approach was
\n[cc lang=”javascript”]
\nvar words = line.split(‘ ‘);
\n[\/cc]
\nalong with the array accesses, which should be replaced with first and rest. It turns out there is a purely functional way:
\n[cc lang=”javascript”]
\n_(input.value.split(‘\\n’)).chain()
\n\t.map(function (line) {
\n\t\treturn line.replace(\/get\\s*\/, ”);
\n\t})
\n\t.select(function (module) {
\n\t\treturn module in files;
\n\t})
\n\t.each(function (module) {
\n\t\t$.get(files[module]);
\n\t})
\n[\/cc]
\nThe custom executeGet function has been replaced by jQuery’s $.get.<\/p>\n

Conclusions<\/strong>
\nWhich approach is better? Using the OO approach, a local index variable would be needed to be created for the for loop, along with other locals, which adds irrelevant lines to the code. On the other hand, each line on its own makes sense. However, functional code cannot be understood except as a whole, because there are no variables. Statelessness has its own beauty in programming.<\/a> It’s similar to running a quantum computer, not caring how bits disappear or time warp, but only for the result of the computation.<\/p>\n","protected":false},"excerpt":{"rendered":"

The Scenario Suppose a javascript function is needed to parse text and execute another function for certain lines of text. Each line of the text is ended with a line break. If there is a keyword ‘get’, then the word following it needs to be checked if it is in the list of files on […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[23],"tags":[141,133,142],"class_list":["post-939","post","type-post","status-publish","format-standard","hentry","category-programming","tag-functional-programming","tag-javascript","tag-object-oriented-programming"],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/yuguangzhang.com\/blog\/wp-json\/wp\/v2\/posts\/939","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/yuguangzhang.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/yuguangzhang.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/yuguangzhang.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/yuguangzhang.com\/blog\/wp-json\/wp\/v2\/comments?post=939"}],"version-history":[{"count":0,"href":"http:\/\/yuguangzhang.com\/blog\/wp-json\/wp\/v2\/posts\/939\/revisions"}],"wp:attachment":[{"href":"http:\/\/yuguangzhang.com\/blog\/wp-json\/wp\/v2\/media?parent=939"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/yuguangzhang.com\/blog\/wp-json\/wp\/v2\/categories?post=939"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/yuguangzhang.com\/blog\/wp-json\/wp\/v2\/tags?post=939"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}