JavaScript의 유틸리티 함수 프로그래밍 - 부작용 및 순도

안녕하세요.🌍. 와줘서 고마워요.오늘 우리는 자바스크립트 함수와 시스템의 두 가지 기본적인 이중 성질인 부작용과 순도를 토론할 것이다.나는 또한 나의 함수 프로그래밍 라이브러리 루비코의 몇 개의 함수로 이러한 특성을 둘러싼 프로그램을 구성하는 방법을 보여 주었다.
함수가 충족되면 following conditions:

동일한 매개 변수에 대해 반환값이 같음

부작용이 없다는 평가

함수의 부작용은 modification of some kind of state beyond a function's control - 예:

변수의 값을 변경합니다.

일부 데이터를 디스크에 쓰기;

사용자 인터페이스에서 버튼을 활성화하거나 비활성화합니다.

여기에 또 부작용의 예가 있다

파일에서 데이터 읽기

REST API에 요청

데이터베이스 쓰기

데이터베이스에서 읽기

콘솔에서 로그아웃

실제로console.log는 부작용 함수이다.

// console.log(message string) -> undefined
console.log('hey') // undefined

순수 학술어에서 console.log 문자열을 받아들여 정의되지 않은 것을 되돌려주는 것은 그다지 유용하지 않다.그러나 console.log는 실천에서 매우 유용하다. 왜냐하면 부작용: 컨트롤러에 전달되는 모든 파라미터를 기록하는 것이다.나는 console.log를 좋아한다. 왜냐하면 그것은 단지 한 가지 일만 하고 아주 잘하기 때문이다. 물건을 컨트롤러에 기록하는 것이다.현실 생활 도전의 가장 직접적인 해결 방안이 유사한 집행 시간에 부작용과 순수 계산의 혼합과 관련될 때 console.log처럼 독립적이고 예측 가능한 행위를 가진 함수를 가지는 것이 유용하다.나의 관점은 수학의 순도를 위해 자바스크립트에서 부작용과 순계산을 잠시 분리하려고 하는 것은 잘못된 것이다. 이것은 근본적으로 비현실적이다.반대로 나의 방법은 코드 라이브러리 문자의 가장자리를 격리하는 모든 부작용이다.
나는 함수 add10 로 몇 가지 다른 부작용을 보여 줄 것이다.add10 불순하다.

let numCalls = 0

const add10 = number => {
  console.log('add10 called with', number)
  numCalls += 1
  console.log('add10 called', numCalls, 'times')
  return number + 10
}

add10(10) /*
add10 called with 10
add10 called 1 times
20
*/

add10 로그아웃 콘솔, 변이 변수numCalls와 다시 로그아웃하는 부작용이 있다.이 두 문장console.log은 모두 부작용이 있다. 함수console.log를 사용했기 때문에 이 함수의 부작용은 컨트롤러에서 로그아웃하는 것이다.문장numCalls += 1도 부작용이 있다. 변수numCalls의 상태가 함수의 제어 범위를 초과했기 때문이다.
콘솔 로그와 변수 변이를 외부 함수add10WithSideEffects로 재구성하면 순수add10를 얻을 수 있습니다.

let numCalls = 0

const add10 = number => number + 10

const add10WithSideEffects = number => {
  console.log('add10 called with', 10)
  numCalls += 1
  console.log('add10 called', numCalls, 'times')
  return add10(10)
}

add10WithSideEffects(10) /*
add10 called with 10
add10 called 1 times
20
*/

add10지금은 순수하지만 부작용을 add10의 범위에서 더 명확한 범위add10WithSideEffects로 옮기는 것뿐이라는 것을 명심하세요.지금 우리는 적어도 부작용을 명확히 했지만 내가 보기에는 좀 혼란스럽다.vanilla JavaScript의 경우 이 코드는 매우 좋습니다.그러나, 나는 우리가 나의 함수 프로그래밍 라이브러리인 루비코로 더욱 간결하게 변할 수 있다고 생각한다.
이 함수들의 핵심은 간단하기 때문에 라이브러리를 사용하지 않으려면 일반 JavaScript의 이 버전의 함수를 사용할 수 있습니다.소개: pipe 및 tap

/**
 * @name pipe
 *
 * @synopsis
 * pipe(funcs Array<function>)(value any) -> result any
 */
const pipe = funcs => function pipeline(value) {
  let result = value
  for (const func of funcs) result = func(result)
  return result
}

/**
 * @name tap
 *
 * @synopsis
 * tap(func function)(value any) -> value
 */
const tap = func => function tapping(value) {
  func(value)
  return value
}

파이프는 일련의 함수를 받아들여 연결시키고 이전 함수의 출력으로 다음 함수를 호출합니다.우리는 pipe를 기초로 우리의 부작용을 조직할 것이다.

tap는 단일 함수를 받아들여서 전달된 모든 입력을 항상 되돌려줍니다.한 함수에서 tap 을 사용할 때, 당신은 기본적으로 "이 함수의 반환에 관심이 없다. 입력으로 함수를 호출하고 나의 입력을 되돌려주기만 하면"이라고 말한다.tapconsole.log처럼 단일 부작용을 담당하는 기능에 있어서는 매우 좋다.우리는 기능에 따라 부작용을 구분하기 위해 tap 을 사용할 것이다.

const logCalledWith = number => console.log('add10 called with', number)

let numCalls = 0

const incNumCalls = () => numCalls += 1

const logNumCalls = () => console.log('add10 called', numCalls, 'times')

const add10 = number => number + 10

const add10WithSideEffects = pipe([
  tap(logCalledWith),
  tap(incNumCalls),
  tap(logNumCalls),
  add10,
])

add10WithSideEffects(10) /*
add10 called with 10
add10 called 1 times
20
*/

우리는 자신의 함수에서 정의console.log와 가변 돌연변이 부작용을 통해 코드 가장자리로 격리한다.마지막 프로그램은 이런 부작용 함수와 순수 함수add10의 조합이다.명확한 것은 add10WithSideEffects는 순수하지 않다는 것이다.우리가 하는 일은 부작용을 자신의 기능으로 옮기고 어느 정도에 tap 그것들을 성명하는 것이다.이곳의 목표는 순수함을 위한 것이 아니라 깨끗하고 읽을 수 있으며 조직적인 부작용이 있는 코드가 있어야 한다.

logCalledWith 숫자를 얻고 "add10called with"숫자를 기록

incNumCalls 아무런 값도 받지 않고 전역 변수 증가numCalls

logNumCalls 컨텐트 없음 및 글로벌 변수 기록numCalls

모든 이 기능들은 단독으로 그들의 일을 책임진다.파이프와 수도꼭지add10WithSideEffects와 함께 사용할 때 우리의 프로그램의 부작용은 뚜렷하다.

만약 부작용이 있다면, 당신이 조직하고 싶다면, 나는 당신에게 나의 함수 프로그래밍 라이브러리를 보라고 격려합니다. rubico!오늘 저는 여러분께 컨트롤러 로그가 필요하다면tap을 사용하라는 경험칙을 남겨 드리겠습니다.
읽어주셔서 감사합니다!루비코 awesome resources 부분에서 이 시리즈의 나머지 부분을 찾을 수 있습니다.다음에 나는 map,filter과reduce를 사용하여 데이터 전환을 깊이 연구할 것이다.다음 JavaScript 유틸리티 함수 프로그래밍 - 변환 소개
사진 출처:
https://www.pinterest.com/pin/213639576046186615/
자료 출처:
https://en.wikipedia.org/wiki/Pure_function
https://softwareengineering.stackexchange.com/questions/40297/what-is-a-side-effect