Example of Functional Programming in Three Web Languages

FacebooktwitterlinkedinmailFacebooktwitterlinkedinmailby feather

Functional programming is all the rage in the Javascript community this year, and I’ve been doing a lot of it lately because I’ve been using Redux on my latest project at work. It occurred to me that web developers have had some of the building blocks of functional programming for over two decades. Here are examples of a functional approach, mapping an array to a new array, in just three languages popular in web development, ones that I’m familiar with.

  1. Perl
  2. PHP
  3. JavaScript

Perl has been used for web development basically since the beginning of the web, around 1994. PHP started as a web development tool in the late 1990s. JavaScript was built for client-side scripting around the same time, but really came into its own when Ajax became popular around 2005.

I mean for this to be a short post; so, I’m just going to show you the examples of array mapping I came up with in each language and their output.

Each example will take an array of computer-usable identifiers, with spaces represented by underscores like two_words. The example will create a new array of human-readable strings, suitable for output, like two words.

If you are interested in digging deeper, just search for the function names in each language and go from there. (I had to search to refresh my memory of the Perl and PHP syntax, so I know there is a wealth of information on this topic.)

Perl Perl Logo

Perl has a built-in function, map, which takes as arguments a code block and an array (or “list” as Perl likes to say). For each item in the array, the code block is called, with the value of Perl’s default variable, $_, set to that item. The code block can do whatever it wants to with the item, and return something that becomes a corresponding item in the new array.

The script: foo.pl

my @columns = ('card_type', 'full_name', 'transaction_date', 'transaction_amount', 'transaction_status');

print "@columns\n";

my @human_names = map { $_ =~ s/_/ /gr } @columns;

print "@human_names\n";

To run it from a computer with Perl installed,

perl foo.pl

The Perl script should output this,

card_type full_name transaction_date transaction_amount transaction_status
card type full name transaction date transaction amount transaction status

PHP PHP Logo

PHP has a built-in function, array_map, which takes as arguments a reference to a function and an array. For each item in the array, the function is called, with the argument of that function set to that current item. The function can do whatever it wants to with the argument, and return something that becomes a corresponding item in the new array.

The script: bar.php

<?php

function make_human_readable($item) {
  return preg_replace('/_/', ' ', $item);
}

$columns = ['card_type', 'full_name', 'transaction_date', 'transaction_amount', 'transaction_status'];

print_r($columns);

$human_names = array_map("make_human_readable", $columns);

print_r($human_names);

?>

To run it from a computer with PHP installed,

php bar.php

The PHP script should output this,

Array
(
    [0] => card_type
    [1] => full_name
    [2] => transaction_date
    [3] => transaction_amount
    [4] => transaction_status
)
Array
(
    [0] => card type
    [1] => full name
    [2] => transaction date
    [3] => transaction amount
    [4] => transaction status
)

JavaScript JavaScript Logo

JavaScript arrays are a special type of JavaScript object that includes a map method. You call that method on an array, and it takes a function as an argument. For each item in the array, the function is called, with the argument of that function set to that current item. The function can do whatever it wants to with the argument, and return something that becomes a corresponding item in the new array.

The script: baz.js

function makeHumanReadable(item) {
   return item.replace(/_/, ' ');
 }

 const columns = ['card_type', 'full_name', 'transaction_date', 'transaction_amount', 'transaction_status'];

 console.log(columns);

 const humanNames = columns.map(makeHumanReadable);

 console.log(humanNames);

To run it from a computer with a recent version of NodeJS installed,

node baz.js

The JavaScript file should output this,

[ 'card_type',
  'full_name',
  'transaction_date',
  'transaction_amount',
  'transaction_status' ]
[ 'card type',
  'full name',
  'transaction date',
  'transaction amount',
  'transaction status' ]

Conclusion

Aside from trivial differences in syntax, the examples in each language are remarkably similar. While you could make an argument that the internals of one or another of these languages are better suited to functional programming, they all allow you to program in a functional style.

Everything old is new again.


Also published on Medium.

Leave a Reply

Your email address will not be published. Required fields are marked *