CLEAN CODE
in Javascript
JLP Talks
Image by: Nina Geometrieva
Slide 2
Slide 2 text
@sonnylazuardi
Hi!, I’m
Frontend Engineer @ Sale Stock
Pretty active in React Native
Slide 3
Slide 3 text
CLEAN CODE Book
Slide 4
Slide 4 text
Why Javascript?
Image by: Nina Geometrieva
Slide 5
Slide 5 text
Variables
Image by: Nina Geometrieva
Slide 6
Slide 6 text
Variables
• Use the same vocabulary for the same type of variable
• Use explanatory variables
• Avoid Mental Mapping
• Use searchable names
• Don't add unneeded context
• Use meaningful and pronounceable variable names
• Use default arguments instead of short circuiting or conditionals
Slide 7
Slide 7 text
Use the same vocabulary for
the same type of variable Use explanatory variables
Avoid Mental Mapping
✅
❎
✅
❎
❎ ✅
Slide 8
Slide 8 text
Functions
Image by: Nina Geometrieva
Slide 9
Slide 9 text
Functions
• Favor functional programming over imperative programming
• Avoid Side Effects
• Don't write to global functions
• Function arguments (2 or fewer ideally)
• Functions should do one thing
• Function names should say what they do
• Functions should only be one level of abstraction
• Remove duplicate code
• Set default objects with Object.assign
• Don't use flags as function parameters
Slide 10
Slide 10 text
Imperative Programming vs
Functional Programming
• Functional programming is declarative:
application state flows through pure functions
• Imperative: object oriented programming,
where application state is usually shared and
colocated with methods in objects.
Slide 11
Slide 11 text
Imperative Programming vs
Functional Programming
• Imperative programs describe the specific steps
used to achieve the desired results — the flow
control: How to do things.
• Declarative programs abstract the flow control
process, and instead spend lines of code
describing the data flow: What to do.
The how gets abstracted away.
Slide 12
Slide 12 text
Functional
Programming
Image by: Nina Geometrieva
Slide 13
Slide 13 text
What is Functional Programming?
The process of building software by
composing pure functions,
avoiding shared state, mutable
data, and side-effects.
• Eric Elliot on Medium
Slide 14
Slide 14 text
Pure Function
• Given the same inputs, always returns
the same output
• Has no side-effects
f(x) = x + 1
f(1) = 2
g(x) = x + 2
g(f(1)) = 4
f(props) = rendered view
Slide 15
Slide 15 text
No Shared State,
Immutable, & No
Side Effects
Image by: Nina Geometrieva