Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Clean Code in Javascript

Clean Code in Javascript

How to write clean code in Javascript

C918bcbfa8df32567636c2d125a34fa1?s=128

Sonny Lazuardi

January 15, 2017
Tweet

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
  16. None
  17. None
  18. None
  19. Composition Image by: Nina Geometrieva

  20. None
  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