Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Functional Javascript
snowmantw@gmail.com
2012/5/24 JS Group
http://goo.gl/5WCjI
snowmantw
: Vimer
/ Linux User
λ Haskell learner
G self-studier
JS developer
MS student -> Dept. of Computer Science, NCCU...
Functional Javascript
What ?
JavaScript's C-like syntax, including curly braces
and the clunky for statement, makes it appear
to be an ordinary procedu...
JavaScript's C-like syntax, including curly braces
and the clunky for statement, makes it appear
to be an ordinary procedu...
So, Javascript is a
Functional
Programming
Language
function id( a )
{
return a;
}
function curried( a )
{
return function ( b ) {
return a + b;
}
}
First-Class Function
Curry
function compose( gn )
{
return function ( fn ) {
return function( a ) {
return gn( fn ( a ) ) ;
}
}
} High-Order Function
curried( a )
curried( a ) ( b )
curried( a ) ( c )
curried( b ) ( c )
curried( a ) :: a function
curried( b ) :: another fn
Curry can make a
new function
without definition
curried( a )
curried( a ) ( b )
curried( a ) ( c )
curried( b ) ( c )
curried( a )
curried( a ) ( b )
curried( a ) ( c )
curried( b ) ( c )
new_fn1 = curried( 1 )
new_fn2 = curried( 2 )
new_fn...
curried( a )
curried( a ) ( b )
High-Order Function
take one or more fn as an input
OR output a function ( like Curry )
curried( a )
curried( a ) ( b )
compose( curried( a ) )
compose( curried( a ) ) ( curried( b ) )
compose( curried( a ) ) (...
curried( a )
curried( a ) ( b )
compose( curried( 3 ) ) ( curried( 4 ) )
compose( curried( 3 ) ) ( curried( 4 ) ) ( 5 )
Ge...
Now We Have…
First-Class
Function
Now We Have…
That’s all; It’s so sad
Now We Have…
High-Order
Function
- Pure Function
- Immutable Variable
- Encapsulated Impure Features
- ( More ) High Order Function
- Lazy Evaluation
- Fun...
Why they
matter ?
Immutable Variable
mut = 1 ;
function victim( ) {
return 10 / mut ;
}
$.get ( ‘/change/mut’ , function(data) {
mut = 0;
});
Immutable Variable
function bad_fn ( arr )
{
var mut = 0;
for( ; mut != arr.length ; mut ++ )
{
arr[ mut ] += mut;
}
retur...
Pure Function
Side-Effect Free
Impure Function
OOPs… It may cause serious problems
gn(3) = 3
gn(3) = 3
gn(3) = 3
gn(3) = 3
gn(3) = 3
gn(3) = 4
Impure Function
i_m_an_innocent_fn
:: ( ) -> Int
function i_m_an_innocent_fn()
{
launch_nuclear_missles();
return 3;
}
Nee...
Pure X Impure
var innocent_var =
3 * 4 + pow ( 2, 4 ) -
i_m_an_innocent_fn() +
floor ( 10 * varA ) …
… It’s just a numeric...
( I lied )
We ( the laugnage ! )
shouldn’t allow pure
functions to mix with
impure functions.
A Real World Case ( 2 x 4 hr )
render : function(nst) {
var t = this, s = t.settings, id = t.id, sl = tinymce.ScriptLoader...
Encapsulated Impure
Features
Pure Functions need to be ‘wrapped’
Encapsulated Impure
Features
Encapsulated Impure
Features
This is why type system matters
Encapsulated Impure
Features
‘return’ can “lift” one pure fn‘s result
Encapsulated Impure
Features
make pure ‘digitToInt’ impure
Encapsulated Impure
Features
It is the Monad version ‘。’
。
Encapsulated Impure
Features
Encapsulated Impure
Features
(>>=) ‘bind’ can glue another Action
( functions return Monadic value)
No pure function can
get and use values
from Monad,
unless we wrap it and
make it impure, too.
Monad also make “Statements”
in functional way
main =
printStrLn “This is a interactive program !” >>
printStrLn “----” >>...
Monad also make “Statements”
in functional way
function main( ) {
console.log( “ This is a interactive program ! ” ) ;
con...
Why Bother ?
We can assume that
there are no impure
functions leaking to
the pure world
And pure functions
still can be reusable
components
in our program
Just need to be wrapped first
It’s important because…
In most cases we
just need
Modular Programming,
not Object-Oriented
Programming
And the concepts of
pureness and
composition
just fit the need
Welcome to The World of Composition
Function composition ( pure ) ‘。’
: make larger and pure function
Monad bind ( impure ...
BTW: Composite "Pattern" is Nothing
fa a = b ; fb b = c ; fc = fb . fa
class functorA {
<Tb> public Tb exec( Ta a ) {
retu...
BTW: Composite "Pattern" is Nothing
fa a = b ; fb b = c ; fc = fb . fa
class FunctorCompose
{ public Functor compose( fa, ...
Sounds good, but…
“It’s not Javascript !”
The Problem:
How can we program
more functionally in the
Javascript world ?
Concepts
id; map; foldl; getChar; putStrLn; (+) ....
map (+1) ; getChar >>= putChar ; f . g
prog = map putStrLn >> getChar >>=
return . digitToInt >>=
x-> return (!!) x str_xs >>=
putStrLn
Libraries
Keep your functions pure ( Dot )
function fn( x ){
return x;
}
$IO.impure = function( x ){
return x + read_from_server ( )...
Underscore.js ( Line )
_.reduce ( [ 1,2,3 ], function(m,n){ return m+n; },0)
`map` and other high order functions
_.map ( ...
Functional Javascript ( Line )
' x -> y -> x+y '.lambda()(2);
More functional features than Underscore.js
' y x -> x+2*y '...
jQuery ( Plane )
var pure_val =
$( DOM ) . manipulateDOM ( )
. pureCB ( function ( ) { ... } )
. it_has_unwrapper_fns () ;...
Javascript Arrowlet ( Plane )
http://www.cs.umd.edu/projects/PL/arrowlets/api-arrowlets.xhtml
Redefine the "Process"
Javascript Arrowlet ( Plane )
targetA
.next(EventA("click"))
.next(start2)
.next(EventA("click"))
.next(cancel2)
.next(Rep...
Flapjax ( Plane )
<p>
The time is {! timerB(100) !}.
</p>
Functional Reactive Programming
Need supported compilers
http://...
Languages
CoffeeScript ( Language )
function curried ( a ) {
return function ( b ){
return a + b;
} }
f a b = a + b
f = a->b-> a + b
Why syntax matters
a >>=
b >>=
c >>=
d >>=
e
a >>=
( b >>=
c >>=
d >>=
e )
a >>=
( b >>=
( c >>=
d >>=
e ))
a >>=
( b >>=
...
Why syntax matters
a >>=
b >>=
c >>=
d >>=
e ......
a >>=
( b >>=
( c >>=
( d >>=
e ...... ))))))))))))))))))))
Parenthesi...
Why syntax matters
First-Class Function + Monad
$( R.id.ButtonToClick ). click ( function(event){
$( R.id.TextViewToShow )...
But CoffeeScript is just a little language…
- Pure Function
- Immutable Variable
- Encapsulated Impure Features
- ( More )...
Personal Project: FunTang language
https://github.com/snowmantw/FunTang
Personal Project: FunTang language
CoffeeScript
Functional Features
+
Personal Project: FunTang language
Will focus on
- Compile into CoffeeScript
- Immutable Variable
- Pure Function
- Integr...
Thanks for
Your Attention
Things about Functional JavaScript
Things about Functional JavaScript
Upcoming SlideShare
Loading in …5
×

Things about Functional JavaScript

181 views

Published on

This is the slide for what I shared in JS Group meetup, 2014, Taiwan. It covers what JavaScript could do for making the program more "functional", the benefits, price and the limitation.

  • Be the first to comment

  • Be the first to like this

Things about Functional JavaScript

  1. 1. Functional Javascript snowmantw@gmail.com 2012/5/24 JS Group
  2. 2. http://goo.gl/5WCjI
  3. 3. snowmantw : Vimer / Linux User λ Haskell learner G self-studier JS developer MS student -> Dept. of Computer Science, NCCU C C++ PHP JS Haskell Java
  4. 4. Functional Javascript
  5. 5. What ?
  6. 6. JavaScript's C-like syntax, including curly braces and the clunky for statement, makes it appear to be an ordinary procedural language. This is misleading because JavaScript has more in common with functional languages like Lisp or Scheme than with C or Java. It has arrays instead of lists and objects instead of property lists. Functions are first class. It has closures. You get lambdas without having to balance all those parens. “JavaScript: The World's Most Misunderstood Programming Language” by Douglas Crockford
  7. 7. JavaScript's C-like syntax, including curly braces and the clunky for statement, makes it appear to be an ordinary procedural language. This is misleading because JavaScript has more in common with functional languages like Lisp or Scheme than with C or Java. It has arrays instead of lists and objects instead of property lists. Functions are first class. It has closures. You get lambdas without having to balance all those parens. “JavaScript: The World's Most Misunderstood Programming Language” by Douglas Crockford
  8. 8. So, Javascript is a Functional Programming Language
  9. 9. function id( a ) { return a; } function curried( a ) { return function ( b ) { return a + b; } } First-Class Function Curry
  10. 10. function compose( gn ) { return function ( fn ) { return function( a ) { return gn( fn ( a ) ) ; } } } High-Order Function
  11. 11. curried( a ) curried( a ) ( b ) curried( a ) ( c ) curried( b ) ( c ) curried( a ) :: a function curried( b ) :: another fn
  12. 12. Curry can make a new function without definition curried( a ) curried( a ) ( b ) curried( a ) ( c ) curried( b ) ( c )
  13. 13. curried( a ) curried( a ) ( b ) curried( a ) ( c ) curried( b ) ( c ) new_fn1 = curried( 1 ) new_fn2 = curried( 2 ) new_fn1 ( 1 ) == 1 + 1 new_fn2 ( 1 ) == 2 + 1 We “defined” two functions without definition !
  14. 14. curried( a ) curried( a ) ( b ) High-Order Function take one or more fn as an input OR output a function ( like Curry )
  15. 15. curried( a ) curried( a ) ( b ) compose( curried( a ) ) compose( curried( a ) ) ( curried( b ) ) compose( curried( a ) ) ( curried( b ) ) ( a ) Yet another high-order function A normal function A value
  16. 16. curried( a ) curried( a ) ( b ) compose( curried( 3 ) ) ( curried( 4 ) ) compose( curried( 3 ) ) ( curried( 4 ) ) ( 5 ) Generate value when all conditions are satisfied
  17. 17. Now We Have… First-Class Function
  18. 18. Now We Have…
  19. 19. That’s all; It’s so sad Now We Have… High-Order Function
  20. 20. - Pure Function - Immutable Variable - Encapsulated Impure Features - ( More ) High Order Function - Lazy Evaluation - Functional Data Structure - Type System Javascript lacks
  21. 21. Why they matter ?
  22. 22. Immutable Variable mut = 1 ; function victim( ) { return 10 / mut ; } $.get ( ‘/change/mut’ , function(data) { mut = 0; });
  23. 23. Immutable Variable function bad_fn ( arr ) { var mut = 0; for( ; mut != arr.length ; mut ++ ) { arr[ mut ] += mut; } return mut; }
  24. 24. Pure Function Side-Effect Free
  25. 25. Impure Function OOPs… It may cause serious problems gn(3) = 3 gn(3) = 3 gn(3) = 3 gn(3) = 3 gn(3) = 3 gn(3) = 4
  26. 26. Impure Function i_m_an_innocent_fn :: ( ) -> Int function i_m_an_innocent_fn() { launch_nuclear_missles(); return 3; } Need to be Encapsulated
  27. 27. Pure X Impure var innocent_var = 3 * 4 + pow ( 2, 4 ) - i_m_an_innocent_fn() + floor ( 10 * varA ) … … It’s just a numerical expression
  28. 28. ( I lied )
  29. 29. We ( the laugnage ! ) shouldn’t allow pure functions to mix with impure functions.
  30. 30. A Real World Case ( 2 x 4 hr ) render : function(nst) { var t = this, s = t.settings, id = t.id, sl = tinymce.ScriptLoader; // Page is not loaded yet, wait for it // DEBUG : No, we don't need 'tinymce style' check here...... // Because we use bigpipe tech, this condition statement // will always keep failed. // // snowmantw @ 2012-04-25 18:00:41+08:00 // // if (!Event.domLoaded) { // Event.add(window, 'ready', function() { // t.render(); // }); // return; // }
  31. 31. Encapsulated Impure Features Pure Functions need to be ‘wrapped’
  32. 32. Encapsulated Impure Features
  33. 33. Encapsulated Impure Features This is why type system matters
  34. 34. Encapsulated Impure Features ‘return’ can “lift” one pure fn‘s result
  35. 35. Encapsulated Impure Features make pure ‘digitToInt’ impure
  36. 36. Encapsulated Impure Features It is the Monad version ‘。’ 。
  37. 37. Encapsulated Impure Features
  38. 38. Encapsulated Impure Features (>>=) ‘bind’ can glue another Action ( functions return Monadic value)
  39. 39. No pure function can get and use values from Monad, unless we wrap it and make it impure, too.
  40. 40. Monad also make “Statements” in functional way main = printStrLn “This is a interactive program !” >> printStrLn “----” >> printStrLn “Input Something: ” >> readline >>= maybe_str -> case maybe_str of Nothing -> return () Just line -> printStrLn “Input from user: ” >> printStrLn line
  41. 41. Monad also make “Statements” in functional way function main( ) { console.log( “ This is a interactive program ! ” ) ; console.log( “ ---- “ ) ; var input = readline( ) ; if ( “” == input ) { return ; } console.log( “Input from user: ” ) ; console.log( input ) ; }
  42. 42. Why Bother ?
  43. 43. We can assume that there are no impure functions leaking to the pure world
  44. 44. And pure functions still can be reusable components in our program Just need to be wrapped first
  45. 45. It’s important because… In most cases we just need Modular Programming, not Object-Oriented Programming
  46. 46. And the concepts of pureness and composition just fit the need
  47. 47. Welcome to The World of Composition Function composition ( pure ) ‘。’ : make larger and pure function Monad bind ( impure ) ‘ >>=’ : make useful and larger COMPUTATION Arrow compose ( purer than Monad ) ‘>>>’ : make useful and larger COMPUTATION You can build your whole program with composition
  48. 48. BTW: Composite "Pattern" is Nothing fa a = b ; fb b = c ; fc = fb . fa class functorA { <Tb> public Tb exec( Ta a ) { return Tb b; } } class functorB{ <Tc> public Tc exec( Tb b ) { return Tc c; } }
  49. 49. BTW: Composite "Pattern" is Nothing fa a = b ; fb b = c ; fc = fb . fa class FunctorCompose { public Functor compose( fa, fb ) { //....... } } // Use in some method (new FunctorCompose()).compose(fa ,fb)
  50. 50. Sounds good, but… “It’s not Javascript !”
  51. 51. The Problem: How can we program more functionally in the Javascript world ?
  52. 52. Concepts
  53. 53. id; map; foldl; getChar; putStrLn; (+) .... map (+1) ; getChar >>= putChar ; f . g
  54. 54. prog = map putStrLn >> getChar >>= return . digitToInt >>= x-> return (!!) x str_xs >>= putStrLn
  55. 55. Libraries
  56. 56. Keep your functions pure ( Dot ) function fn( x ){ return x; } $IO.impure = function( x ){ return x + read_from_server ( ); } All we can use is the '$' and '_' Impure functions should be restricted in some contexts
  57. 57. Underscore.js ( Line ) _.reduce ( [ 1,2,3 ], function(m,n){ return m+n; },0) `map` and other high order functions _.map ( [ 1,2,3 ], function(n){ return n+1; } ) http://underscorejs.org/
  58. 58. Functional Javascript ( Line ) ' x -> y -> x+y '.lambda()(2); More functional features than Underscore.js ' y x -> x+2*y '.lambda()(2, 3); http://osteele.com/sources/javascript/functional/
  59. 59. jQuery ( Plane ) var pure_val = $( DOM ) . manipulateDOM ( ) . pureCB ( function ( ) { ... } ) . it_has_unwrapper_fns () ; "jQuery is Monad“: http://goo.gl/cFErM http://importantshock.wordpress.com/2009/01/18/jquery-is-a-monad/ http://jquery.com// It's ( almost ) a " DOM Monad "
  60. 60. Javascript Arrowlet ( Plane ) http://www.cs.umd.edu/projects/PL/arrowlets/api-arrowlets.xhtml Redefine the "Process"
  61. 61. Javascript Arrowlet ( Plane ) targetA .next(EventA("click")) .next(start2) .next(EventA("click")) .next(cancel2) .next(Repeat).repeat().run(); http://www.cs.umd.edu/projects/PL/arrowlets/api-arrowlets.xhtml Fully event-driven programming Redefine the "Process"
  62. 62. Flapjax ( Plane ) <p> The time is {! timerB(100) !}. </p> Functional Reactive Programming Need supported compilers http://www.flapjax-lang.org/
  63. 63. Languages
  64. 64. CoffeeScript ( Language ) function curried ( a ) { return function ( b ){ return a + b; } } f a b = a + b f = a->b-> a + b
  65. 65. Why syntax matters a >>= b >>= c >>= d >>= e a >>= ( b >>= c >>= d >>= e ) a >>= ( b >>= ( c >>= d >>= e )) a >>= ( b >>= ( c >>= ( d >>= e )))
  66. 66. Why syntax matters a >>= b >>= c >>= d >>= e ...... a >>= ( b >>= ( c >>= ( d >>= e ...... )))))))))))))))))))) Parenthesis Hell
  67. 67. Why syntax matters First-Class Function + Monad $( R.id.ButtonToClick ). click ( function(event){ $( R.id.TextViewToShow ).text( ( new SimpleDataFormat( “h:mm:ss a” ) ).format( new Date() ) ; ); } );
  68. 68. But CoffeeScript is just a little language… - Pure Function - Immutable Variable - Encapsulated Impure Features - ( More ) High Order Function - Lazy Evaluation - Functional Data Structure - Type System
  69. 69. Personal Project: FunTang language https://github.com/snowmantw/FunTang
  70. 70. Personal Project: FunTang language CoffeeScript Functional Features +
  71. 71. Personal Project: FunTang language Will focus on - Compile into CoffeeScript - Immutable Variable - Pure Function - Integrated Arrow - Fully Event-Driven Process In early stage
  72. 72. Thanks for Your Attention

×