JavaScript ES6 Functional Programming Guide getting started

1. Introduction

1.1 What is Functional programming?

  f(x) = y
Copy the code

Isn’t it just writing as much code as possible as a function?

Yes!

But the form of the function has to follow certain rules, and then it can achieve very good results,

But there are a few things that must be observed.

  • A function always takes an argument
  • The function always returns a value
  • The same value is returned for the same input
  • Function logic does not depend on other global variables

As for the benefits of such writing, I have not yet tasted them. Let’s get the concept straight for now. (Later updates)

  1. The cache

1.2 Reference transparency

The same input will return the same value, a feature also known as reference transparency.

This process is called Substitution Model

const identity = i => i; 1 + identity(1) // Equivalent to 1 + 1Copy the code

This has the advantage of being used as a cache. Let’s say I have a function that takes the factorial of a number. Input :5 output: 120, add again input 5, according to the characteristic, know that the result is still 120(and only rely on one input :5),. With this feature, you can use a variable to cache the result of the input: 5. Enter 5 again: the cached result is directly returned without recomputing

1.3 Declarative, imperative, abstract

Functional programming advocates declarative programming and writing abstract code

  • Imperative: Tells the compiler “how to do”
  • Declarative: Tells the compiler “What to do”
  // Tell the compiler what to do, get the array length, loop the array, etc...
  const array = [1.2.3]
  for(i = 0; i < array.length; i++){
    console.log(i)
  }
Copy the code
  const array = [1.2.3]
  // This is just a "how to" abstract function
  array.forEach(item= > { console.log(item )})
Copy the code

1.4 pure functions

A pure function is defined as one that, for the same input, always gets the same output, without any observable side effects, and independent of the state of the external environment.

1.5 Pipeline and combination

Although each function solves only one problem, pipes or combinations can be used to accomplish complex tasks.

HOC high-order Function

2.1 Understanding Concepts

Concept: A function that takes a function as an argument and/or returns a function as output is called a higher-order function.

Personal understanding: Use functions instead of data passing

const tellType = (arg) = > {
  // If you know the tellType, you can determine the type
  if(typeof arg === 'function') {
    arg()
  } else {
    console.log('The passed data is' + arg)
  }
}

const dataFn = () = > {
  console.log('I am data function')
}

tellType(dataFn)

Copy the code

So this is an example of a function dataFn, dataFn can also be understood as data. Passed to tellType, the data is passed through the function.

2.2 Return a function

const crazy = () = > String;

const fn = crazy()

console.log(fn('hoc'))
Copy the code

Crazy executes and returns a function reference to String. Note: Only a function reference is returned, and no function is executed

2.3 Abstraction and higher-order functions

Higher-order functions are defined abstractions.

What is abstraction? What does it have to do with functional programming?

Abstract function: A car can start as long as it is refueled, without caring about how specific parts interact with each other. Abstract purpose: To achieve goals without concern for the underlying system concepts.

2.4 Achieve abstraction through higher-order functions

How do you implement abstraction?

Self-understanding: as long as the goal is to achieve the goal, without concern for the underlying concrete implementation of the code, can be called abstract code.

ForEach = forEach = forEach = forEach = forEach = forEach = forEach = forEach = forEach

1. Traverses all keys on the given object. 2. If the value of step 2 is true, get the value of key.

const obj = {
  name: '111'.age: 999.sex: 'man'
}

const forEachObj = (obj, fn) = > {
  for (const key in obj) {
    if (Object.hasOwnProperty.call(obj, key)) {
      const value = obj[key];
      fn(key, value)
    }
  }
}

forEachObj(obj, (key, value) = > {
  console.log(key, value)
})

Copy the code

ForEach and forEachObj are both higher-order functions, and both enable the developer to focus on the task (by passing the corresponding function) while abstracting out the traversal

Is there a deeper understanding?