Skip to content

Files

Latest commit

 

History

History
 
 

chapter-03

Chapter 3 : Functional Programming with JavaScript

React, Flux, and Redux all fit within the functional JavaScript paradigm. Understanding the basic concepts of functional programming will make you better at structuring React applications.

Samples

Introduction

What it means to be Functional

  1. Functions as Variables (demo, code, bin)
  2. Arrow Functions (demo, code, bin)
  3. Object Methods (demo, code, bin)
  4. Functions within Arrays (demo, code, bin)
  5. Functions as Arguments (demo, code, bin)
  6. Returned Functions (demo, code, bin)
  7. ES6 Enhancements (demo, code, bin)

Imperative vs. Declarative

  1. Imperative (demo, code, bin)
  2. Declarative (demo, code, bin)

Populate the US

  1. Populate the US (demo, code, bin)

Immutability

  1. Mutations (demo, code, bin)
  2. Object.assign() (demo, code, bin)
  3. Spread Operator with Objects (demo, code, bin)
  4. Array.push() (demo, code, bin)
  5. Array.concat() (demo, code, bin)
  6. Spread Operator with Arrays (demo, code, bin)

Pure Functions

  1. Impure Function (demo, code, bin)
  2. Object Mutation (demo, code, bin)
  3. Pure Function (demo, code, bin)
  4. Side Effects (demo, code, bin)
  5. React Component (demo, code, bin)

Transforming Data

  1. Joining Array Items (demo, code, bin)
  2. Filtering Arrays (demo, code, bin)
  3. Filtering Array Function (demo, code, bin)
  4. Mapping Arrays (demo, code, bin)
  5. Creating Objects with .map() (demo, code, bin)
  6. Updating Array of Objects (demo, code, bin)
  7. Editing Arrays of Objects (demo, code, bin)
  8. Object.keys() (demo, code, bin)
  9. Reducing Arrays (demo, code, bin)
  10. Array.reduce() Shorter Syntax (demo, code, bin)
  11. Colors Hash (demo, code, bin)
  12. distinctColors() (demo, code, bin)

Higher Order Functions

  1. invokeIf (demo, code, bin)
  2. userLogs (demo, code, bin)

Recursion

  1. Countdown (demo, code, bin)
  2. Countdown with setTimeout (demo, code, bin)
  3. deepPick() (demo, code, bin)

Composition

  1. Clock Template with .replace() (demo, code, bin)
  2. Clock with Composition (demo, code, bin)
  3. Click with Compose Function (demo, code, bin)
  4. Imperative Clock (demo, code)
  5. Declarative Clock (demo, code)