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
160
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
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
540
Deep Dive into Kotlin Flow
jmatsu
1
370
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.5k
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
540
速いWebフレームワークを作る
yusukebe
5
1.7k
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.5k
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
私の後悔をAWS DMSで解決した話
hiramax
4
210
アセットのコンパイルについて
ojun9
0
130
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
3.2k
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
850
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
GraphQLとの向き合い方2022年版
quramy
49
14k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Producing Creativity
orderedlist
PRO
347
40k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
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