Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Immutable data structures for functional JavaSc...

Immutable data structures for functional JavaScript

Presented at O'Reilly Fluent 2017: https://conferences.oreilly.com/fluent/fl-ca/public/schedule/detail/58872

Functional programming has been gaining popularity in the JavaScript community, and for good reason: rejecting side-effects and mutability (in-place changes to data) helps avoid a lot of headaches.

But even if you refuse to mutate objects, you’ll still need to deal with transformations to data. In a purely immutable world, this means you have to create a whole new object each time something changes, which can slow things down and eat up memory, making functional programming seem inefficient.

That’s where immutable data structures come in to save the day—and time and space. Also called persistent data structures, they help you efficiently make new “modified” versions of immutable objects by reusing parts of the old object that you don’t need to change. By making immutability efficient, such data structures are fantastic for functional programming and play a central role in functional languages such as Clojure.

Anjana Vakil explains how the concept of structural sharing makes efficient immutable data structures possible and demonstrates how they work under the hood. Anjana also offers an overview of two libraries—Mori and Immutable.js—that let you easily take advantage of these remarkable data structures in your JavaScript code. You’ll leave armed with a deeper understanding of how immutable data structures work and the practical knowledge to leverage them in your own functional JavaScript projects.

Anjana Sofia Vakil

June 21, 2017
Tweet

More Decks by Anjana Sofia Vakil

Other Decks in Programming

Transcript

  1. functional programming pure functions • input → output • side

    effects • data in, data out mutable state
  2. Nobody sits like this rock sits. You rock, rock. The

    rock just sits, and is. You show us how to just sit here, and that's what we need. - I ❤ Huckabees (2004) rocks rock!
  3. zoo 1 0 3 2 5 4 7 6 Who

    put a in my zoo?!?
  4. new zoo 1 0 3 2 5 4 7 6

    Great! My zoo just sits, and is!
  5. new zoo 1 0 3 2 5 4 7 6

    ...but my code runs like &
  6. persistent data structures! old versions stay put... ... new versions

    created efficiently! masters of time & space!
  7. 1 0 3 2 5 4 7 6 zoo 1

    0 new path copying!
  8. 1 0 3 2 5 4 7 6 zoo 1

    0 new Structural sharing! path copying!
  9. 1 0 3 2 5 4 7 6 zoo 1

    0 new Structural sharing! path copying! AWESOME! I can reuse most of the data!
  10. ape ant bat bee a b a e n p

    t e e t an ba be ap a b
  11. ape ant bat bee a b a e n p

    t e e t an ba be ap a b
  12. ape ant bat bee a b a e n p

    t e e t an ba be ap a b
  13. ape ant bat bee a b a e n p

    t e e t an ba be ap a b
  14. 001 000 011 010 101 100 111 110 zoo 0

    1 0 1 0 1 (1) (0) (3) (2) (5) (4) (7) (6)
  15. 001 000 011 010 101 100 111 110 zoo 0

    1 0 1 0 1 (1) (0) (3) (2) (5) (4) (7) (6) zoo[5]
  16. 001 000 011 010 101 100 111 110 zoo 0

    1 0 1 0 1 (1) (0) (3) (2) (5) (4) (7) (6) zoo[5] zoo[0b101]
  17. 001 000 011 010 101 100 111 110 zoo 0

    1 0 1 0 1 (1) (0) (3) (2) (5) (4) (7) (6) zoo[5] zoo[0b101] zoo→1→0→1
  18. 001 000 011 010 101 100 111 110 zoo 0

    1 0 1 0 1 (1) (0) (3) (2) (5) (4) (7) (6) zoo[5] zoo[0b101] zoo→1→0→1
  19. 001 000 011 010 101 100 111 110 zoo 0

    1 0 1 1 (1) (0) (3) (2) (5) (4) (7) (6) zoo[5] zoo[0b101] zoo→1→0→1 0
  20. 001 000 011 010 101 100 111 110 zoo 0

    1 0 1 1 (1) (0) (3) (2) (5) (4) (7) (6) zoo[5] zoo[0b101] zoo→1→0→1 0
  21. fewer branches - deep trees + small nodes + shallow

    trees - large nodes more branches vs.
  22. immutable array lookup: O(1) update: O(n) lookup: O(log 32 n)

    update: O(log 32 n) Bitmapped vector trie vs.
  23. 001 000 011 010 101 100 111 110 zoo 0

    1 0 1 1 zoo[hash("g")] zoo[0b101] zoo→1→0→1 0 "k" "m" "b" "l" "g" "f" "w" "t"
  24. 001 000 011 010 101 100 111 110 zoo 0

    1 0 1 1 0 "k" "m" "b" "l" "g" "f" "w" "t" Awesome! I can use whatever s I want! zoo[hash("g")] zoo[0b101] zoo→1→0→1
  25. var Imjs = require("immutable"); var a = Imjs.List.of(1,2); // List

    [1, 2] var a2 = a.push(3); // List [1, 2, 3] a.size; // 2 a2.get(2); // 3
  26. var o = Imjs.Map({"a": 1,"b": 2}); // Map {"a": 1,

    "b": 2} var o2 = o.set("a", 3); // Map {"a": 3, "b": 2} o.get("a"); // 1 o2.get("a"); // 3
  27. var mori = require("mori"); var a = mori.vector(1,2); // [1

    2] var a2 = mori.conj(a, 3); // [1 2 3] mori.count(a); // 2 mori.get(a2, 2); // 3
  28. var o = mori.hashMap("a", 1, "b", 2); // {"a" 1

    "b" 2} var o2 = mori.assoc(o, "a", 3); // {"a" 3 "b" 2} mori.get(o, "a"); // 1 mori.get(o2, "a"); // 3
  29. immutable.js MORI vs. × JavaScript all the way × Object-oriented

    API × Smaller facebook.github.io/immutable-js swannodette.github.io/mori × ClojureScript under the hood × Functional API × Faster
  30. J.N. L'orange, Understanding Clojure’s Persistent Vectors, Blog series hypirion.com/musings/understanding-persistent-vector-pt-1 P.

    Bagwell, Ideal hash trees, 2001 lampwww.epfl.ch/papers/idealhashtrees.pdf R. Hickey, Persistent data structures and managed references, QCon 2009 infoq.com/presentations/Value-Identity-State-Rich-Hickey D. Spiewak, Extreme Cleverness: Functional Data Structures in Scala, Strange Loop 2011 infoq.com/presentations/Functional-Data-Structures-in-Scala M. Thatte, What Lies Beneath: A Deep Dive Into Clojure's Data Structures, EuroClojure 2015 youtu.be/7BFF50BHPPo D. Nolen, Immutability, interactivity & Javascript, FutureJS 2014 youtu.be/mS264h8KGwk L. Byron, Immutable Data & React, React.js Conf 2015 youtu.be/I7IdS-PbEgI References & more