People are bad at logic and at keeping state. “else” clauses are often used to implement complicated logic and require us to backtrack, a.k.a. to keep a lot of state.
I FJSCONF Argentina, buenos aires, nov 29th, 2014
View Slide
J O K E
if (eggs) {}
W E H AV E AP RO B L E MO B V I O U S LY
I F ?
E L S E ?
I N E N G L I S H B O O K SelseIf
I N C O M P U T E R P R O G R A M SelseIf
I N C O M P U T E R P R O G R A M SelseIf2.5 times more else!
W H Y ?
if (⩸⩸⩸⩸⩸1) { ⩸⩸⩸⩸ ⩸⩸⩸⩸ if (⩸⩸2) { ⩸⩸⩸⩸ } else { ⩸⩸⩸ ⩸⩸⩸⩸⩸⩸ ⩸⩸ if (⩸⩸⩸3) { ⩸⩸ } else { ⩸⩸ ⩸⩸⩸⩸⩸⩸ } } } else { ⩸⩸⩸ }
if (⩸⩸⩸⩸⩸1) { ⩸⩸⩸⩸ ⩸⩸⩸⩸ if (⩸⩸2) { ⩸⩸⩸⩸ } else { ⩸⩸⩸ ⩸⩸⩸⩸⩸⩸ ⩸⩸ if (⩸⩸⩸3) { ⩸⩸ } else { ⩸⩸ ⩸⩸⩸⩸⩸⩸ } } } else { ⩸⩸⩸ }1: true
if (⩸⩸⩸⩸⩸1) { ⩸⩸⩸⩸ ⩸⩸⩸⩸ if (⩸⩸2) { ⩸⩸⩸⩸ } else { ⩸⩸⩸ ⩸⩸⩸⩸⩸⩸ ⩸⩸ if (⩸⩸⩸3) { ⩸⩸ } else { ⩸⩸ ⩸⩸⩸⩸⩸⩸ } } } else { ⩸⩸⩸ }1: true1: true, 2: true
if (⩸⩸⩸⩸⩸1) { ⩸⩸⩸⩸ ⩸⩸⩸⩸ if (⩸⩸2) { ⩸⩸⩸⩸ } else { ⩸⩸⩸ ⩸⩸⩸⩸⩸⩸ ⩸⩸ if (⩸⩸⩸3) { ⩸⩸ } else { ⩸⩸ ⩸⩸⩸⩸⩸⩸ } } } else { ⩸⩸⩸ }1: true1: true, 2: true1: true, 2: false
if (⩸⩸⩸⩸⩸1) { ⩸⩸⩸⩸ ⩸⩸⩸⩸ if (⩸⩸2) { ⩸⩸⩸⩸ } else { ⩸⩸⩸ ⩸⩸⩸⩸⩸⩸ ⩸⩸ if (⩸⩸⩸3) { ⩸⩸ } else { ⩸⩸ ⩸⩸⩸⩸⩸⩸ } } } else { ⩸⩸⩸ }1: true1: true, 2: true1: true, 2: false1: true, 2: false, 3: true
if (⩸⩸⩸⩸⩸1) { ⩸⩸⩸⩸ ⩸⩸⩸⩸ if (⩸⩸2) { ⩸⩸⩸⩸ } else { ⩸⩸⩸ ⩸⩸⩸⩸⩸⩸ ⩸⩸ if (⩸⩸⩸3) { ⩸⩸ } else { ⩸⩸ ⩸⩸⩸⩸⩸⩸ } } } else { ⩸⩸⩸ }1: true1: true, 2: true1: true, 2: false1: true, 2: false, 3: true1: true, 2: false, 3: false
if (⩸⩸⩸⩸⩸1) { ⩸⩸⩸⩸ ⩸⩸⩸⩸ if (⩸⩸2) { ⩸⩸⩸⩸ } else { ⩸⩸⩸ ⩸⩸⩸⩸⩸⩸ ⩸⩸ if (⩸⩸⩸3) { ⩸⩸ } else { ⩸⩸ ⩸⩸⩸⩸⩸⩸ } } } else { ⩸⩸⩸ }1: true1: true, 2: true1: true, 2: false1: true, 2: false, 3: true1: true, 2: false, 3: false1: false, 2 & 3 don’t matter
if (⩸⩸⩸⩸⩸1) { ⩸⩸⩸⩸ ⩸⩸⩸⩸ if (⩸⩸2) { ⩸⩸⩸⩸ } else { ⩸⩸⩸ ⩸⩸⩸⩸⩸⩸ ⩸⩸ if (⩸⩸⩸3) { ⩸⩸ } else { ⩸⩸ ⩸⩸⩸⩸⩸⩸ } } } else { ⩸⩸⩸ }1: true1: true, 2: true1: true, 2: false1: true, 2: false, 3: true1: true, 2: false, 3: false1: false, 2 & 3 don’t matterWe have to context-switch
if (⩸⩸⩸⩸⩸1) { ⩸⩸⩸⩸ ⩸⩸⩸⩸ if (⩸⩸2) { ⩸⩸⩸⩸ ⩸⩸⩸⩸⩸⩸ ⩸⩸ if (⩸⩸⩸3) { ⩸⩸ if (⩸⩸⩸4) { ⩸⩸ ⩸⩸⩸⩸⩸⩸ } ⩸⩸ ⩸⩸⩸⩸⩸⩸⩸⩸ } } }
if (⩸⩸⩸⩸⩸1) { ⩸⩸⩸⩸ ⩸⩸⩸⩸ if (⩸⩸2) { ⩸⩸⩸⩸ ⩸⩸⩸⩸⩸⩸ ⩸⩸ if (⩸⩸⩸3) { ⩸⩸ if (⩸⩸⩸4) { ⩸⩸ ⩸⩸⩸⩸⩸⩸ } ⩸⩸ ⩸⩸⩸⩸⩸⩸⩸⩸ } } }1: true
if (⩸⩸⩸⩸⩸1) { ⩸⩸⩸⩸ ⩸⩸⩸⩸ if (⩸⩸2) { ⩸⩸⩸⩸ ⩸⩸⩸⩸⩸⩸ ⩸⩸ if (⩸⩸⩸3) { ⩸⩸ if (⩸⩸⩸4) { ⩸⩸ ⩸⩸⩸⩸⩸⩸ } ⩸⩸ ⩸⩸⩸⩸⩸⩸⩸⩸ } } }1: true1 & 2: TRUE
if (⩸⩸⩸⩸⩸1) { ⩸⩸⩸⩸ ⩸⩸⩸⩸ if (⩸⩸2) { ⩸⩸⩸⩸ ⩸⩸⩸⩸⩸⩸ ⩸⩸ if (⩸⩸⩸3) { ⩸⩸ if (⩸⩸⩸4) { ⩸⩸ ⩸⩸⩸⩸⩸⩸ } ⩸⩸ ⩸⩸⩸⩸⩸⩸⩸⩸ } } }1: true1 & 2: TRUE1 & 2 & 3: TRUE
if (⩸⩸⩸⩸⩸1) { ⩸⩸⩸⩸ ⩸⩸⩸⩸ if (⩸⩸2) { ⩸⩸⩸⩸ ⩸⩸⩸⩸⩸⩸ ⩸⩸ if (⩸⩸⩸3) { ⩸⩸ if (⩸⩸⩸4) { ⩸⩸ ⩸⩸⩸⩸⩸⩸ } ⩸⩸ ⩸⩸⩸⩸⩸⩸⩸⩸ } } }1: true1 & 2: TRUE1 & 2 & 3: TRUE1 & 2 & 3 & 4: true
if (⩸⩸⩸⩸⩸1) { ⩸⩸⩸⩸ ⩸⩸⩸⩸ if (⩸⩸2) { ⩸⩸⩸⩸ ⩸⩸⩸⩸⩸⩸ ⩸⩸ if (⩸⩸⩸3) { ⩸⩸ if (⩸⩸⩸4) { ⩸⩸ ⩸⩸⩸⩸⩸⩸ } ⩸⩸ ⩸⩸⩸⩸⩸⩸⩸⩸ } } }1: true1 & 2: TRUE1 & 2 & 3: TRUE1 & 2 & 3 & 4: trueNo switches, just adding :-)
C H A N G E I S B A D
B U I L D I N G I S G O O D
we use complex logic:• More when we talk to computers• less when we talk to people
P E O P L E A R E N OT G R E ATAT LO G I C
P E O P L E A R E N OT G R E ATAT F O L LO W I N G S TAT E
Pepole are graet at reizncinogg patetrns,but teirrlbe at foonwillg loigc.
FA C E SP E O P L E A R E G O O D AT
S O U N D SP E O P L E A R E G O O D AT
https://www.flickr.com/photos/fdecomite/446394032/in/photostream/
M O R E PAT T E R N S L E S S “ E L S E ”
N OT N E C E S S A R I LY“ D E S I G N PAT T E R N S "
0 . E M P H A S I Z E E S S E N T I A L C O D E
valid = validator(data) if (valid) { ⩸⩸⩸⩸⩸⩸ ⩸⩸⩸⩸⩸ ⩸⩸⩸ ⩸⩸⩸⩸⩸⩸ } else { return null; } ⩸⩸⩸⩸⩸⩸ return data;
valid = validator(data) if (valid) { ⩸⩸⩸⩸⩸⩸ ⩸⩸⩸⩸⩸ ⩸⩸⩸ ⩸⩸⩸⩸⩸⩸ } else { return null; } ⩸⩸⩸⩸⩸⩸ return data;essential code
valid = validator(data) if (!valid) { return null; } ⩸⩸⩸⩸⩸⩸ ⩸⩸⩸⩸⩸ ⩸⩸⩸ ⩸⩸⩸⩸⩸⩸ ⩸⩸⩸⩸⩸⩸ return data;essential code
1 . P O LYM O R P H I S M
G R E E K MY T H O LO GY ?
fieldAsHtml: function(field) { if ('text' === field.type) return ; else if ('number' === field.type) return ; else if ('textarea' === field.type) return else throw new IMissYou(type, field) }
fieldAsHtml: function(field) { if ('text' === field.type) return ; else if ('number' === field.type) return ; else if ('textarea' === field.type) return else throw new IMissYou(type, field) }fieldAsHtml: function(field) { renderer = renderers[field.type] || throw… return renderer(field) }
Design pattern:strategy™
refactoring: Replace Conditional withPolymorphism™
P E O P L E ❤️ PAT T E R N S
if ('text' === field.type) return ⩸⩸⩸⩸⩸; else if ('textarea' === field.type) return ⩸⩸⩸⩸⩸; else if ('number' === field.type) return ⩸⩸⩸⩸⩸; else if ('airplane on wheels' === field.type) return ⩸⩸⩸⩸⩸; else if ('scooter with squirrel' === field.type) return ⩸⩸⩸⩸⩸; else if ('name' === field.type && name.length > 5 return ⩸⩸⩸⩸⩸; else if ('name' === field.type && name.length < 5 return ⩸⩸⩸⩸⩸; else if ('textarea on JavaScript' === field.type) return ⩸⩸⩸⩸⩸; else if ('textarea raised with love' === field.type) return ⩸⩸⩸⩸⩸; else return ⩸⩸⩸⩸⩸;
if ('text' === field.type) return ⩸⩸⩸⩸⩸; else if ('textarea' === field.type) return ⩸⩸⩸⩸⩸; else if ('number' === field.type) return ⩸⩸⩸⩸⩸; else if ('airplane on wheels' === field.type) return ⩸⩸⩸⩸⩸; else if ('scooter with squirrel' === field.type) return ⩸⩸⩸⩸⩸; else if ('name' === field.type && name.length > 5) return ⩸⩸⩸⩸⩸; else if ('name' === field.type && name.length < 5) return ⩸⩸⩸⩸⩸; else if ('textarea on JavaScript' === field.type) return ⩸⩸⩸⩸⩸; else if ('textarea raised with love' === field.type) return ⩸⩸⩸⩸⩸; else return ⩸⩸⩸⩸⩸;
2 . P U T M O R E F O C U SO N A C T I O N
if (spring) { if (weekday) { school(); } elseif (saturday) { if (raining) tv(); else football(); } else { homework(); } } else if (winter) { hibernate(); }
if (spring) { if (weekday) { school(); } elseif (saturday) { if (raining) tv(); else football(); } else { homework(); } } else if (winter) { hibernate(); }if (spring && weekday) school(); if (spring && saturday && !raining) football(); if (spring && saturday && raining) tv(); if (spring && sunday) homework(); if (winter) hibernate();
3 . N O E S C A P E
E X T R A C T!
if (⩸⩸⩸⩸⩸1) { ⩸⩸⩸⩸ ⩸⩸⩸⩸ if (⩸⩸2) { ⩸⩸⩸⩸ } else { ⩸⩸⩸ ⩸⩸⩸⩸⩸⩸ ⩸⩸ if (⩸⩸⩸3) { ⩸⩸ } else { ⩸⩸ ⩸⩸⩸⩸⩸⩸ } } } else { ⩸⩸⩸ }if (⩸⩸⩸⩸⩸1) { ⦾(⩸, ⩸⩸⩸) } else { ⩸⩸⩸ } function ⦾(⩸, ⩸⩸⩸) { ⪍ ⪍ ⪍ ⪍ ⪍ ⪍ ⪍ ⪍ }
if (⩸⩸⩸⩸⩸1) { ⩸⩸⩸⩸ ⩸⩸⩸⩸ if (⩸⩸2) { ⩸⩸⩸⩸ } else { ⩸⩸⩸ ⩸⩸⩸⩸⩸⩸ ⩸⩸ if (⩸⩸⩸3) { ⩸⩸ } else { ⩸⩸ ⩸⩸⩸⩸⩸⩸ } } } else { ⩸⩸⩸ }var ⪍ = ⩸⩸⩸⩸⩸1; if (⪍) { ⦾(⩸, ⩸⩸⩸) } else { ⩸⩸⩸ }
I N D I R E C T I O N ! = A B S T R A C T I O N
P RO G R A M M I N G + U S A B I L I T Y = ❤️
P E O P L E > CO M P U T E R S
T H A N KS ! @ N I KO L AY B H T T P : // E X T R A P O L AT E . M E /
nb
jrsaruo
tonkotsuboy_com
hpgrahsl
schroneko
antonicg
clown0082
ogiwarat
slsops
iwatatomoya
devoc
uhooi
ivargrimstad
reverentgeek
philhawksworth
wjessup
zakiwarfel
holman
brianwarren
eileencodes
chrisshort
sachag
panda_program
addyosmani
scottboms