Last active
May 17, 2023 00:56
-
-
Save branneman/f06bd451f74e5bc1725db23be682d4fe to your computer and use it in GitHub Desktop.
JavaScript: Lenses (Functional Programming)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// FP Lenses | |
const lens = get => set => ({ get, set }); | |
const view = lens => obj => lens.get(obj); | |
const set = lens => val => obj => lens.set(val)(obj); | |
const over = lens => fn => obj => set(lens)(fn(view(lens)(obj)))(obj); | |
const lensProp = key => lens(prop(key))(assoc(key)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Generic FP utils | |
const compose = (...fns) => fns.reduce((f, g) => (...args) => f(g(...args))); | |
const map = fn => list => list.map(fn); | |
const filter = fn => list => list.filter(fn); | |
const lt = left => right => left < right; | |
const add = left => right => left + right; | |
const upper = str => str.toUpperCase(); | |
const prop = key => obj => obj[key]; | |
const assoc = key => val => obj => Object.assign({}, obj, {[key]: val}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Example usage: Object | |
*/ | |
const amountLens = lens(prop('amount'))(assoc('amount')); | |
over(amountLens)(add(5))({ x: 1, amount: 10 }); | |
//=> { x: 1, amount: 15 } | |
/** | |
* Example usage: Array | |
*/ | |
const assocArray = idx => val => arr => { | |
const clone = arr.slice(); | |
clone[idx] = val; | |
return clone; | |
} | |
const headLens = lens(prop(0))(assocArray(0)); | |
over(headLens)(upper)(['first', 'second']); | |
//=> [ 'FIRST', 'second' ] | |
/** | |
* Example usage: Chaining | |
*/ | |
const moneyLens = lensProp('money'); | |
const data = [{ money: 42 }, { money: 1024 }, { money: 1337 }]; | |
compose( | |
map(over(moneyLens)(add('€ '))), | |
filter(compose(lt(100), view(moneyLens))) | |
)(data); | |
//=> [ { money: '€ 1024' }, { money: '€ 1337' } ] | |
/** | |
* Example usage: Composition | |
*/ | |
const article = { title: 'FP ftw!', comments: [{ t: 'boo!' }, { t: 'yay!' }] }; | |
over(lensProp('comments'))(map(over(lensProp('t'))(upper)))(article); | |
//=> { title: 'FP ftw!', comments: [{ t: 'BOO!' }, { t: 'YAY!' }]} |
one minor piece of feedback i have - the compose
function here has the behavior of the pipe
function. the difference is that compose
executes functions from left to right (using reduceRight
), while pipe
executes from right to left.
your implementation isn't breaking any sort of law, i just thought i would mention it 🙂
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
awesome gist! my program runs within a specialized execution context built to mitigate supply chain attacks. this often leads me to the task of rolling my own function implementation, which currently relates to lens logic, but thanks to you I've been spared 🙂 @branneman