Functional programming in JavaScript

FUNCTIONAL PROGRAMMING IN JAVASCRIPT Or, “How lambdas can change your life”

Some basic questions  What is functional programming and how does it differ from imperative programming?  What is JavaScript?  What is functional programming in JavaScript, and how can it help me?

Two Models of Computation  Lambda calculus: Emil Post, 1936  Turing Machine: Alan Turing, 1936-1937  Proved equivalent in computational power by Turing in 1937

Turing Machine  Infinite tape  Head moves over tape, can read symbol, change symbol, go left, or go right  Modifying state in a particular order, according to instructions  “Mechanized symbol evaluation based on assignment and time ordered evaluation”

Imperative Languages  Assignment sequences  Same name can be associated with several values  Fixed evaluation orders  New values can be associated with the same name through command repetition

A classic imperative loop function fib(n) { var a = 0, b = 1, f = 1; for (var i = 2; i <= n; i++) { f = a + b; a = b; b = f; } return f; };

Order is important var x = 1, y = 2, buffer; buffer = x; x = y; y = buffer; // x = 2, y = 1 var x = 1, y = 2, buffer; x = y; buffer = x; y = buffer; // x = 2, y = 2

Lambda Calculus  Roots in mathematical logic and proof theory  Turing machines = Kleene’s recursive function theory = lambda calculus = generalised von Neumann machines  Attempt to describe computation in terms of computable functions

Functional Languages  Based on structured function calls: a(b(c(3)))  So what? You can nest functional calls in C!  But in pure functional languages, this is the only way to transform values: a name is only ever associated with one value  Functions as first-class citizens  No assignment = no side effects  Can be executed in different orders but give the same result

Recursion instead of looping function fib(n) { if (n <= 2) { return 1; } return fib(n-1) + fib(n-2); }

Functions as first-class citizens var arr = [42, function() { return 42; }]; var obj = {key: 42, func: function() { return 42; }} var x = function() { return 42; }; var y = function() { return function() { return 42} }; 42 + (function() { return 42; })() //=> 84 function weirdAdd(n, f) { return n + f() } weirdAdd(42, function() { return 42 }); //=> 84

JavaScript  Developed by Brendan Eich at Mozilla  Scheme in the browser  “Lisp in C’s clothing”  Supports many programming paradigms:  Classical object-oriented  Prototype-based  Imperative  Functional

Functional JavaScript  Functions as first-class citizens  Anonymous functions  Native methods:  .map()  .reduce()  .forEach()  Event-based programming (DOM API, XmlHttpRequest)  Closures

.map() var numbers = [1, 4, 9]; var roots = numbers.map(Math.sqrt); console.log(roots); var doubledRoots = roots.map( function(n) { return n * 2; } ); console.log(doubledRoots);

.map() imperative alternative var numbers = [1, 4, 9]; var roots = []; for (var i=0; i<numbers.length; i++) { roots.push(Math.sqrt(numbers[i])); } console.log(roots); var doubledRoots = []; for (var i=0; i<roots.length; i++) { doubledRoots.push(roots[i] * 2); } console.log(doubledRoots);

.reduce() [0, 1, 2, 3, 4].reduce( function(previousValue, currentValue, index, array) { return previousValue + currentValue; } );

Event callbacks document.addEventListener('click', function() { console.log('You clicked somewhere!'); }); var clicked = function() { console.log('You clicked somewhere!’) }; document.addEventListener('click', clicked);

Closures function makeFunc() { var name = "Mozilla"; function displayName() { console.log(name); } return displayName; } var myFunc = makeFunc(); myFunc();

Self-executing functions var counter = (function(){ var n = 0; return function() { console.log('Times run: ‘+(++n)); } })();

99 Bottles of Beer: imperative var lyrics = []; for (var bottles = 99; bottles > 0; bottles--) { lyrics.push(bottles + ' bottles of beer on the wall'); lyrics.push(bottles + ' bottles of beer'); lyrics.push('Take on down, pass it around'); if (bottles > 1) { lyrics.push((bottles - 1) + ' bottles of beer on the wall.'); } else { lyrics.push('No more bottles of beer on the wall!'); } }

99 bottles of beer: functional function lyricSegment(n) { return _.chain([]) .push(n + ' bottles of beer on the wall') .push(n + ' bottles of beer') .push('Take one down, pass it around') .tap(function(lyrics) { if (n > 1) { lyrics.push((n - 1) + ' bottles of beer on the wall'); } else { lyrics.push('No more bottles of beer on the wall'); } }) .value(); }

99 bottles of beer: functional function song(start, end, lyricGen) { return _.reduce(_.range(start, end, -1), function(acc, n) { return acc.concat(lyricGen(n)); }, []); }

10 green bottles! function greenBottles(n) { return _.chain([]) .push(n + ' green bottles sitting on the wall') .push(n + ' green bottles hanging on the wall') .push('And if 1 green bottle should accidentally fall') .tap(function(lyrics) { if (n > 1) { lyrics.push('There'll be '+ (n - 1) + ' green bottles hanging on the wall'); } else { lyrics.push('There'll be no more bottles hanging on the wall'); } }) .value(); }

Conclusions  JavaScript brought functional programming into the mainstream  Its functional features are indispensable for event-driven programming and for general elegance  Just a glimpse of what “pure” functional languages provide (immutability, purity, algebraic data types)  But enough to make JavaScript a powerful and flexible language  Explore underscore.js!

Functional programming in JavaScript

More Related Content

What's hot

Similar to Functional programming in JavaScript

Recently uploaded

Functional programming in JavaScript

Editor's Notes