> For the complete documentation index, see [llms.txt](https://bryan-guner.gitbook.io/my-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bryan-guner.gitbook.io/my-docs/redux/repos/learning-react/chapter-03.md).

# 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](https://jsbin.com/hopomod/1/edit?js,console))
2. Arrow Functions ([run it](https://jsbin.com/hopomod/3/edit?js,console))
3. Object Methods ([run it](https://jsbin.com/lamujat/edit?js,console))
4. Functions within Arrays ([run it](https://jsbin.com/qoparag/edit?js,console))
5. Functions as Arguments ([run it](https://jsbin.com/hopomod/5/edit?js,console))
6. Returned Functions ([run it](https://jsbin.com/boyihum/1/edit?js,console))
7. ES6 Enhancements ([run it](https://jsbin.com/boyihum/2/edit?js,console))

#### Imperative vs. Declarative

1. Imperative ([run it](https://jsbin.com/cuqapu/1/edit?js,console))
2. Declarative ([run it](http://jsbin.com/cuqapu/2/edit?js,console))

### Immutability

1. Mutations ([run it](http://jsbin.com/kemimi/1/edit?js,console))
2. Object.assign() ([run it](http://jsbin.com/kemimi/2/edit?js,console))
3. Spread Operator with Objects ([run it](http://jsbin.com/kemimi/3/edit?js,console))
4. Array.push() ([run it](http://jsbin.com/kemimi/4/edit?js,console))
5. Array.concat() ([run it](http://jsbin.com/kemimi/5/edit?js,console))
6. Spread Operator with Arrays ([run it](http://jsbin.com/kemimi/6/edit?js,console))

### Pure Functions

1. Impure Function ([run it](http://jsbin.com/kosogo/1/edit?js,console))
2. Object Mutation ([run it](http://jsbin.com/kosogo/2/edit?js,console))
3. Pure Function ([run it](http://jsbin.com/kosogo/3/edit?js,console))
4. Side Effects ([run it](http://jsbin.com/kosogo/4/edit?js,console))
5. React Component ([run it](http://jsbin.com/kosogo/5/edit?js,console))

### Transforming Data

1. Joining Array Items ([run it](http://jsbin.com/qehige/1/edit?js,console))
2. Filtering Arrays ([run it](http://jsbin.com/qehige/2/edit?js,console))
3. Filtering Array Function ([run it](http://jsbin.com/qehige/3/edit?js,console))
4. Mapping Arrays ([run it](http://jsbin.com/qehige/4/edit?js,console))
5. Creating Objects with .map() ([run it](http://jsbin.com/qehige/5/edit?js,console))
6. Updating Array of Objects ([run it](http://jsbin.com/qehige/6/edit?js,console))
7. Editing Arrays of Objects ([run it](http://jsbin.com/qehige/7/edit?js,console))
8. Object.keys() ([run it](http://jsbin.com/qehige/8/edit?js,console))
9. Reducing Arrays ([run it](http://jsbin.com/qehige/9/edit?js,console))
10. Array.reduce() Shorter Syntax ([run it](http://jsbin.com/qehige/10/edit?js,console))
11. Colors Hash ([run it](http://jsbin.com/qehige/11/edit?js,console))
12. distinctColors() ([run it](http://jsbin.com/qehige/12/edit?js,console))

### Higher Order Functions

1. invokeIf ([run it](http://jsbin.com/raxuyew/1/edit?js,console))
2. userLogs ([run it](http://jsbin.com/raxuyew/2/edit?js,console))

### Recursion

1. Countdown ([run it](http://jsbin.com/romezi/1/edit?js,console))
2. Countdown with setTimeout ([run it](http://jsbin.com/romezi/2/edit?js,console))
3. deepPick() ([run it](http://jsbin.com/romezi/3/edit?js,console))

### Composition

1. Clock Template with .replace() ([run it](http://jsbin.com/zivevu/1/edit?js,console))
2. Clock with Composition ([run it](http://jsbin.com/zivevu/2/edit?js,console))
3. Click with Compose Function ([run it](http://jsbin.com/zivevu/3/edit?js,console))