Does JavaScript Adopt Functional Programming?

@luftyoav

Yoav Luft

The Beginning

The Conflict

Resolution

?

Short Version

100 top projects

Analyzing the Code

=

JavaScript Becomes Functional Declarative

The End!

Introduction

Me!

Yoav Luft

Zen Garden

Web Dev - Games - Embedded

FLIP
HackExtend


Prototyp

Table of Contents

  • Why should we care about JavaScript?

  • What "adopting functional programming" even means?

  • The Quest for Data

  • What’s next?

Javscript Why?

The Past and Present of Javascript

Scheme and Self

Java

JavaScript Weird
  • Imperative

  • Functions are 1st class citizens

  • Universally typed

  • Prototypical Inheritance

var object =
  { name: "Object1",
    action: function() { },
    data: [1, 2, 3]
  }
JSON.stringify(object) ==
  "{\"name\":\"Object1\",\"data\":[1,2,3]}"
function Dog() {
  this.voice = "Woof!"
  this.makeSound = function() {
    return this.voice
  }
}
var dog = new Dog
var cat = {voice: "Prrrr",
           makeSound: dog.makeSound}
cat.makeSound() == "Prrrr"
olabums tweet safe

StackOverflow

stack overflow 2018 popular
SimilarTech

github survey

But why should we care?

JavaScript for Functional Programming

Javascript has:

  • anonymous functions

  • closures

  • uses continuation passing

  • structured modeling of async (almost monads!)

50%

Rapidly Evolving Standard

  • anonymous functions shorthand (2015)

  • destructuring assignments (2015)

  • generator functions (2015)

  • tail-call optimization (pending)

  • pipe-operator (pending)

  • partial application syntax (pending)

  • pattern matching (pending)

Part II: What does
"Adopting functional programming"
even mean?

blogs

Adopting     functional programming

Adopting

  1. Functional programming was not popular, or formally accepted in Javascript

  2. It is now becoming more popular, or being formally accepted

Functional Programming

How much is JavaScript functional programming

  1. Computation as the evaluation of mathematical functions

  2. Avoids changing-state and mutable-data

  3. Declarative programming paradigm

Criteria

Criterion 1:
Computation of Mathematical Functions

Mathematical

function append(array, x) {
  return array.concat(x)
}
var a1 = [1, 2]
var a2 = append(a1, 3)
// a1 == [1, 2]; a2 == [1, 2, 3]

Non-mathematical

var array = [1, 2]
function append(x) {
  array.push(x)
}
append(3) // undefined -> no return
          // array == [1, 2, 3]

Criterion 2:
Avoid changing state and mutable-data

Immutability

immutablejs

Criterion 3:
Declarative Programming Paradigm

a style of building the structure and elements of computer programs—that expresses the logic of a computation without describing its control flow.

— Wikipedia

[…​] without describing its control flow.

While loops

while (condition) {
  doAction()
}

do {
  action()
} while (condition)

For loops

for (var i = 0; i < size; i++) {
  use(i)
}
for (var property in object) {
  use(property)
}
for (var index of array) {
  use(index)
}

Branching

If-else
if (condition) {
  doSomething()
} else {
  doSomethingElse()
}
var a = condition ? val1 : val2
Switch statement
switch (response) {
  case "yes":
    return true
  case "no":
    return false
  default:
    return undefined
}

But Which?

Iteration functions

map, filter, forEach and reduce

ImperativeDeclarative
var result
for (var i of array) {
  result[i] = f(array[i])
}
var result = array.map(f)
var acc
for (var i of arr) {
  acc = f(acc, arr[i])
}
var accumulated =
  arr.reduce(f)

Helper Libraries for Functional Programming

underscore
lodash
ramda

Part III: The Quest for Data

Methods

Projects which are:

  1. Open source

  2. Have a lot of contributors

  3. Have been around for a while

angular.js three.js vue d3

Data Collection Process

data collection process

Data Collection Process 1

data collection process

Data Collection Process 2

data collection process

Data Collection Process 3

data collection process

Terminology

Project = A repository on Github

Sample = Data on patterns from a project’s snapshot

Sample Year = A sample from the specified year

Patterns: Imperative

  • for loop, for..in loops, for..of loops

for (var i = 0; i < size; i++) {...}
for (var i in object) {...}
for (var i of array) {...}
  • while and do-while loops

while (cond) {...}

Patterns: Declarative

  • forEach calls

  • map calls

  • filter calls

  • reduce calls

The Sample

Projects

num projects sample year

Projects by Age

created year cdf

Size of Projects

loc files per sample year

Results

Constructs in Samples

num constructs year

Constructs per LoC

percent constructs year

Constructs in Percentage

dist constructs year

Conclusions

More Declarative Iteration!

but not that much…​

Individual Projects

decl ratio per project sample

Individual Projects

decl ratio per project over time

What Kind of Projects Are Declarative?

Age as Estimator

declarative by age

Number of Forks

declarative by forks

Stargazers vs. Index

declarative by stars

Project Contributors

declarative by contributors

Conclusions

Supporting Libraries

helpers libs

What’s Next

What are your options?

Elm

Elm

ClojureScript

ClojureScript

PureScript

PureScript

Reason

Reason

WebAssembly

WebAssembly

As for me…​

  • Look at a larger sample

  • Examine more structures, e.g. assignments

  • Look at the use of higher-order functions

  • Examine results into more detail.

  • Examine changes of code over time

  • Look for projects migrating from Javascript to functional languages

Shameless Plug

@luftyoav

prototyp

Thank you!