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
140
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
94
Consuming and Packaging of Web Components
sheerun
4
410
Promises/A+
sheerun
5
390
Other Decks in Programming
See All in Programming
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
790
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
380
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
180
Rethinking UI building strategies @ SFI 2024
letelete
0
270
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
1
100
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
170
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
Elm Form Validation
bkuhlmann
0
510
Node.js v22 で変わること
yosuke_furukawa
PRO
9
3.4k
Tailwind CSSを本気でカスタマイズする方法
fsubal
13
5.3k
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
310
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
2
190
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
244
20k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Optimising Largest Contentful Paint
csswizardry
8
2.4k
Scaling GitHub
holman
457
140k
Become a Pro
speakerdeck
PRO
11
4.5k
Bash Introduction
62gerente
604
210k
Infographics Made Easy
chrislema
238
18k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
Rails Girls Zürich Keynote
gr2m
91
13k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
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