Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Elements of Functional Programming in JS
Search
Adam Stankiewicz
May 27, 2014
Programming
2
150
Elements of Functional Programming in JS
Lightning talk from Meet.js Wrocław.
Adam Stankiewicz
May 27, 2014
Tweet
Share
More Decks by Adam Stankiewicz
See All by Adam Stankiewicz
LinemanJS
sheerun
0
110
Consuming and Packaging of Web Components
sheerun
4
410
Promises/A+
sheerun
5
400
Other Decks in Programming
See All in Programming
C++20 射影変換
faithandbrave
0
540
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
570
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
570
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
200
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
330
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
220
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
20
3.7k
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
240
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
380
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
300
Featured
See All Featured
Embracing the Ebb and Flow
colly
86
4.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Code Review Best Practice
trishagee
68
18k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
Testing 201, or: Great Expectations
jmmastey
42
7.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
A Tale of Four Properties
chriscoyier
160
23k
Transcript
Elements of Functional Programming in JavaScript
What is functional programming? No generally accepted definition, but: •
Style of building computer programs • Avoids state and mutable data • Functions as arguments and results
Benefits of functional programming • More concise, readable code •
Confident refactor, better reasoning • Better concurrency? • Performance (function inlining)
JS has some functional elements • First class functions •
Anonymous functions (lambdas) • ???
JS lacks many functional elements • Tail call optimization •
Pattern matching • Forced immutability (type system) • No standard methods for FP (IE <=8) ◦ Array#forEach, Array#map, Array#filter, etc...
Libraries for FP in JavaScript • Underscore • Lo-Dash •
Mout.js (for Node.js)
Short map syntax var characters = [ { 'id': 1,
'name': 'barney', 'age': 26 }, { 'id': 2, 'name': 'fred', 'age': 30 } ]; _.map(characters, function(c) { return c['name']; }) // ['barney', 'fred'] _.map(characters, 'name') // ['barney', 'fred']
Short filter syntax var characters = [ { 'id': 1,
'name': 'barney', 'age': 26 }, { 'id': 2, 'name': 'fred', 'age': 30 } ]; _.filter(characters, function(c) { return c.age == 30; }) // [{ 'id': 2, 'name': 'fred', 'age': 30 }] _.filter(characters, { age: 30 }) // [{ 'id': 2, 'name': 'fred', 'age': 30 }]
General pattern // function(e) { return e['foo']; } // 'foo'
_.sortBy(characters, 'name') // function(e) { return e['foo'] == bar; } // { 'foo': bar } _.every(characters, { 'name': 'barney' })
GroupBy var words = ['one', 'two', 'three'] _.groupBy(words, 'length'); //
{ '3': ['one', 'two'], '5': ['three'] }
IndexBy var users = [ { 'id': 100, 'name': 'Adam'
}, { 'id': 200, 'name': 'Ala' } ]; var indexedUsers = _.indexBy(users, 'id') indexedUsers[100] // { 'id': 100, 'name': 'Adam' } indexedUsers[200] // { 'id': 100, 'name': 'Ala' }
Find var users = [ { 'id': 100, 'name': 'Adam'
}, { 'id': 200, 'name': 'Ala' } ]; _.find(users, { 'id': 100 }); // { 'id': 100, 'name': 'Adam' }
max, min var characters = [ { 'name': 'barney', 'age':
26 }, { 'name': 'fred', 'age': 30 } ]; _.max(characters, 'age') // { 'name': 'fred', 'age': 30 } _.min(characters, 'age') // { 'name': 'barney', 'age': 26 }
reduce var numbers = [1, 2, 3]; _.reduce(numbers, function(sum, element)
{ return sum + element }); // 6
Composing functions var characters = [ { 'name': 'barney', 'age':
26 }, { 'name': 'fred', 'age': 30 }, // ... ]; var ages = _.map(characters, 'age'); // [26, 30] _.reduce(ages, function(a, b) { return a + b }); // [56]
Composing functions var characters = [ { 'name': 'barney', 'age':
26 }, { 'name': 'fred', 'age': 30 }, // ... ]; _(characters) .map('age') .reduce(function(a, b) { return a + b; });
Composing functions var characters = [ { 'name': 'barney', 'age':
26 }, { 'name': 'fred', 'age': 30 }, // ... ]; _(characters) .map('age') .reduce(function(a, b) { return a + b; });
Other features • Set operations (difference, union, intersection) • every,
some, reject, countBy, contains • clone, extend, defaults, merge, mapValues • delay, defer, memoize, once, throttle • now, random, uniqueId, template
Promises A+ • Pattern for running async code • Allows
for return in callbacks • Safely handles exceptions in callbacks • Allows for try/catch -like behavior • Chaining of callbacks, parallel execution promise.then(onSuccess, onFailure)
Promises A+ $http.get('/users/1').then(function(user) { return $http.get("/users/posts"); }).then(function(post) { return render(post);
}).catch(function(reason) { console.log(reason); });
Dzięki