DEV Community

loading...

Day 7 of #100DaysOfCode!

Christian Falucho
Passionate about building websites and web applications that can be used by millions of people. I hope to build tools that can help people.
Updated on ・2 min read

Today's progress

Today I learned about functional programming.

What I learned

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.

let animals = ['lion', 'eagle', 'cheetah', 'bear', 'giraffe']
Enter fullscreen mode Exit fullscreen mode

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

// 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;
}
Enter fullscreen mode Exit fullscreen mode

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)

let newArr = [...arr]
Enter fullscreen mode Exit fullscreen mode

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)

let addAnimal = add(animal, 'monkey')

console.log(addAnimal)
//output: ['lion', 'eagle', 'cheetah', 'bear', 'giraffe', 'monkey']
Enter fullscreen mode Exit fullscreen mode

function remove(arr, animalName)

let removedAnimal = remove(animal, 'lion')

console.log(removedAnimal)
//output: ['eagle', 'cheetah', 'bear', 'giraffe']
Enter fullscreen mode Exit fullscreen mode

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

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

console.log(animals)
//output: ['lion', 'eagle', 'cheetah', 'bear', 'giraffe']
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (2)

Collapse
cfalucho profile image
Christian Falucho Author

To be honest, I have never heard of that technique and i'm glad you told me. I just read up on it and now much more excited to continue! What a cool technique! I accidentally been doing it. Thank you!