Chapter 3 : Functional Programming with JavaScript

Many techniques in React follow 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 (run it)

2. Arrow Functions (run it)

3. Object Methods (run it)

4. Functions within Arrays (run it)

5. Functions as Arguments (run it)

6. Returned Functions (run it)

7. ES6 Enhancements (run it)

Imperative vs. Declarative

1. Imperative (run it)

2. Declarative (run it)

Immutability

1. Mutations (run it)

2. Object.assign() (run it)

3. Spread Operator with Objects (run it)

4. Array.push() (run it)

5. Array.concat() (run it)

6. Spread Operator with Arrays (run it)

Pure Functions

1. Impure Function (run it)

2. Object Mutation (run it)

3. Pure Function (run it)

4. Side Effects (run it)

5. React Component (run it)

Transforming Data

1. Joining Array Items (run it)

2. Filtering Arrays (run it)

3. Filtering Array Function (run it)

4. Mapping Arrays (run it)

5. Creating Objects with .map() (run it)

6. Updating Array of Objects (run it)

7. Editing Arrays of Objects (run it)

8. Object.keys() (run it)

9. Reducing Arrays (run it)

10. Array.reduce() Shorter Syntax (run it)

11. Colors Hash (run it)

12. distinctColors() (run it)

Higher Order Functions

1. invokeIf (run it)

2. userLogs (run it)

Recursion

1. Countdown (run it)

2. Countdown with setTimeout (run it)

3. deepPick() (run it)

Composition

1. Clock Template with .replace() (run it)

2. Clock with Composition (run it)

3. Click with Compose Function (run it)