πŸ€” Cliche – What is Functional programming?

There are probably a lot of people who like to stack concepts. But it doesn’t have to be that complicated, it’s really functional oriented programming. What does that mean? You probably know what object oriented means, but when you change to function oriented, you get confused.

There’s a missing subject here: you, object oriented, but you’re object oriented, in other words, most of the time when you’re programming, you’re dealing with objects, you’re dealing with objects.

In other words, function-oriented means you’re dealing with functions most of the time, you’re dealing with functions face to face.


😁 Some concepts

Although I don’t like to pile up too many concepts, but the following three concepts are sure to know, so I will mention them.

The input

If you put A into B, A is the input to B. For example, if you put a ball in a box, the ball is the input to the box. In JS, it is the parameter of the function. For example, 1 and 2 down here are inputs.

const fn = (a, b) = > a + b

fn(1.2)
Copy the code


The output

If YOU take A out of B, A is the output of B. If you take a ball out of a box, the ball is the output of the box. In js, is the return value of the function. For example, the return value 3 below is the output.

const fn = (a, b) = > a + b

const result = fn(1.2)

console.log(result) // The result is 3
Copy the code


Side effects

The effect of a function on things outside the function. For example, the function fn below affects the object foo outside the function.

const foo = {
    value: 'default'
}

const fn = o= > o.value = "Modified"

console.log(foo.value) // Print "default"
fn(foo)
console.log(foo.value) // Output "modified"
Copy the code

So it’s summed up like this





πŸ˜„ Feel the charm of functional expressions

Let’s say there’s a requirement for you to manually go from 1+2+3+… All the way up to 5. Then different programming paradigms will write different code.

Process oriented

let counter = 1
counter = counter + 2
counter = counter + 3
counter = counter + 4
counter = counter + 5

console.log(counter) / / output 15
Copy the code


object-oriented

const counter = {
   value: null.init(v) {
       this.value = v
   },
   inc(v) {
       this.value = this.value + v
   }
}

counter.init(1)
counter.inc(2)
counter.inc(3)
counter.inc(4)
counter.inc(5)

console.log(counter.value) / / output 15
Copy the code

Function oriented

Note that the following code if you do not understand, need to make up js arrow functions and closure related basic knowledge.

const useInc = v= > nv= > v = v + nv

const inc = useInc(1)

inc(2)
inc(3)
inc(4)

const counter = inc(5)
console.log(counter)
Copy the code

You can see that the function is much cleaner in this case.

This is not to say that other paradigms do not work, but that different paradigms are suitable for different scenarios. Procedural and object oriented also play well.


πŸ˜€ higher order functions that make functions more flexible

If function A is the input or output of function B, then function B is A higher-order function.

It’s the same requirement, but now I need it to not only add, but subtract, multiply and divide.

It’s actually easier to do it with higher-order functions

const useCounter = (l, f) = > r= > l = f(l, r)

/ / add
const inc = useCounter(1.(l, r) = > l + r)

inc(2)
inc(3)
inc(4)
const incResult = inc(5)
console.log(incResult) / / output 15

/ / subtraction
const dec = useCounter(15.(l, r) = > l - r)
dec(2)
dec(3)
dec(4)
const decResult = dec(5)
console.log(decResult) / / output 1


/ / the multiplication
const mul = useCounter(1.(l, r) = > l * r)
mul(2)
mul(3)
mul(4)
const mulResult = mul(5) 
console.log(mulResult) / / output 120

/ / division
const div = useCounter(120.(l, r) = > l / r)
div(2)
div(3)
div(4)
const divResult = div(5) 
console.log(divResult) / / output 1
Copy the code

πŸ˜‹ summary

concept

  1. The input
  2. The output
  3. Side effects

Higher-order functions can make functions more flexible and do more things