“This is the ninth day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

In functional programming, there is a very important concept called pure functions, in our daily development will often encounter, today we will talk about pure functions in JavaScript, at the same time, this article will combine some cases to better understand pure functions

Recognize pure functions

  • In programming, a function is called a function if it meets the following conditions
    • This function needs to produce the same output at the same input value
    • The output of the function is independent of any hidden information or state other than the input value, or of the external output generated by the IO device
    • This function cannot have semantically observable function side effects, such as “firing events,” making output devices output, or changing the contents of objects other than output values

Side effects

As mentioned above, pure functions cannot have semantically observable function side effects, where a function is executed that has additional effects on the calling function in addition to returning the value of the function

  • Side effects are not limited to
    • Network request
    • The output data
    • Modify global variables, parameters, and external storage
    • DOMQuery and operation
    • Math.random
    • Get the current time

Side effects are not a poison in themselves, but they are necessary in some cases, so not all functions need to be pure

Examples of pure functions

The following example is a pure function that produces the same output at the same input value.

function sum(a, b) {
  return a + b;
}
Copy the code

The importance of pure functions

  • Pure functions are widely used in functional programming. For example, the react component is required to be a pure function. There is a reducer concept in REdux, which also requires a pure function.
  • So understanding pure functions is very helpful in understanding the design of many frameworks
  • Not all functions need to be pure, such as handlers that send network requests or buttons that manipulate DOM elements. Such event handlers can be handled by calling other pure functions to reduce the number of impure elements in the project.

Pure functions in JS

The built-in apis in JavaScript also have pure functions, like the methods in the Array object

Filter is a pure function that filters the elements of an array without operating on the original array

var names = ["Zhang"."Bill"."Fifty"."Daisy"];
var newNames1 = names.filter((n) = >n ! = ="Zhang");
console.log(newNames1); // [' li 4 ', 'Wang 5 ',' Zhao 6 ']
console.log(names); // [' Zhang SAN ', 'Li Si ',' Wang Wu ', 'Zhao Liu']
Copy the code

When splice intercepts an array, it does something to the original array, so it’s not a pure function.

var newNames2 = names.splice(2);
console.log(newNames2); // [' wang 5 ', 'zhao 6']
console.log(names); // [' zhang SAN ', 'Li Si']
Copy the code

In daily development, use pure functions as much as possible

Practice case

Case a

  • The same input has the same output
function foo(num1, num2) {
  return num1 * 2 + num2 * num2;
}
Copy the code

Case 2

  • Modified external variables
var CC = "_island";
function bar() {
  console.log("Bar Other code execution");
  CC = "abc";
}

bar();
console.log(iname);
Copy the code

Case 3

  • Modified the value outside the object
function bar(info) {
  info.age = 100;
}

var obj = {
  name: "hxh".age: 18
};
bar(obj)
console.log(obj);
Copy the code

Four cases

  • The same input has the same output
function test(info) {
  return {
    ...info,
    age: 100
  };
}

console.log(test(obj));
console.log(obj);
Copy the code

Case 5

  • Strictly speaking, it is not a pure function because it has an output (console.log).
function printInfo(info) {
  console.log(info.name, info.age);
  info.name = "abc";
}
Copy the code