Day 7 of #100DaysOfCode!

Tags: javascript, beginners, 100daysofcode, codenewbie
Published: 2021-06-22 23:25:14

<h3>Today's progress</h3>
Today I learned about functional programming.

<h3>What I learned</h3>
*Functional programming* is a style of programming in which solutions are simple. A function takes an input, processes it and returns an output. 

*Three important factors of functional programming:*
* Isolated function - does not depend on outside variables (global variables)
* Pure functions - same input always give the same output
* Function has limited side effects - this means any changes or mutations is controlled.

This allows for greater control, less mutation or changing of variables and objects.

For instance, let's say we have a global variable called `animals` and it stores an array of different kinds of animals.

```javascript
let animals = ['lion', 'eagle', 'cheetah', 'bear', 'giraffe']
```

Now, let's create two functions. One function adds a new animal and the other function removes an animal. 

```javascript
// adds an animal to arr
function add(arr, animalName){
    // make a copy of the array of animals
    let newArr = [...arr]

    // push new animal to new arr
    newArr.push(animalName);

    // return the new array
    return newArr;
}
// removes an animal from arr
function remove(arr, animalName){
    //make a copy of the array of animals
    let newArr = [...arr]

    // grab the index of the animal name
    // store into variable
    animal_index = newArr.indexOf(animalName)

    // if the animal's index exist
    // remove it, use splice
    if(animal_index >= 0){
        newArr.splice(0, 1)
    }
    
    // return the new array
    return newArr;
}
```

You'll notice in the above code that we created two functions and in both functions take *two parameters*. The first parameter is the array and the second parameter takes in a *string* animal.

Inside the functions we added a line of code `let newArr = [...arr]` that makes a copy of the global array by passing it through our function argument `function add(arr, animalName)` and `function remove(arr, animalName)`

```javascript
let newArr = [...arr]
```

Now, when I test this using the functions above. I will get one function that adds a new animal and the other function that removes an animal from the array all without mutating or changing the original array.

*function add(arr, animalName)*
```javascript
let addAnimal = add(animal, 'monkey')

console.log(addAnimal)
//output: ['lion', 'eagle', 'cheetah', 'bear', 'giraffe', 'monkey']
```

*function remove(arr, animalName)*
```javascript
let removedAnimal = remove(animal, 'lion')

console.log(removedAnimal)
//output: ['eagle', 'cheetah', 'bear', 'giraffe']
```



When I run a `console.log` on the global variable animals from earlier. The global variable did not change at all.

```javascript
let animals = ['lion', 'eagle', 'cheetah', 'bear', 'giraffe']

console.log(animals)
//output: ['lion', 'eagle', 'cheetah', 'bear', 'giraffe']
```
This is the benefit of using functional programming as a way to copy the global variable within the scope of the function. From there you can mutate or change it without affecting the global variable and in addition return a new copy of the variable or object.