Clean Code in Javascript

How to write clean code in Javascript

Transcript

1. CLEAN CODE in Javascript JLP Talks Image by: Nina Geometrieva
2. @sonnylazuardi Hi!, I’m Frontend Engineer @ Sale Stock Pretty active in React Native
3. CLEAN CODE Book
4. Why Javascript? Image by: Nina Geometrieva
5. Variables Image by: Nina Geometrieva
6. 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
7. Use the same vocabulary for the same type of variable Use explanatory variables Avoid Mental Mapping ✅ ❎ ✅ ❎ ❎ ✅
8. Functions Image by: Nina Geometrieva
9. 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
10. 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.
11. 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.
12. Functional Programming Image by: Nina Geometrieva
13. 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
14. 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
15. No Shared State, Immutable, & No Side Effects Image by: Nina Geometrieva
19. Composition Image by: Nina Geometrieva
21. @sonnylazuardi Thanks https:/ /medium.com/humans-create-software/composition-over- inheritance-cb6f88070205#.hho6utphg https:/ /medium.com/javascript-scene/master-the-javascript- interview-what-is-functional-programming- 7f218c68b3a0#.1puuww9ko