리액트 훅을 사용하면서 부수효과에 대해 생각을 하다보니 함수형 프로그래밍 사고와 어떻게 접근해야 하는지에 대해 알아보기 위해 함수형 자바스크립트 책을 접했습니다.

어플리케이션 설계시 자문해봐야할 요소들

확장성 : 추가기능을 지원하기 위해 계속 리팩터링을 해야하는가?
모듈화 용이성 : 파일하나를 고치면 다른 파일도 영향을 받는가?
재사용성: 중복이 많은가?
테스트성: 함수를 단위테스트 하기 어려운가?
헤아리기 쉬움 : 체계도 없고 따라가기 어려운 코드인가?

함수형 프로그래밍 패러다임이 이 요소들을 개선하는데 도움이 됩니다.

함수형으로 사고하는 것이 왜 중요한지, 프로그래밍의 복잡성을 해결하는데 어떤 도움을 주는지 이해하는게 중요합니다.

함수형 프로그래밍이란?

어플리케이션의 부수효과를 방지하고
상태변이를 감소하기위해
데이터의 제어흐름과 연산을 추상하는 것입니다.

함수형 프로그래밍을 온전히 이해하기위해 숙지해야할 기본 개념들

선언적 프로그래밍
순수함수
참조투명성
불변성

선언적 프로그래밍

Procedural, imperative (명령형, 절차적) 모델

var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
for (let i = 0; i < arr.length; i++) {
  arr[i] = Math.pow(arr[i], 2)
}
arr // [0,1,4,5,16,25,36,49,64,81]

Declarative 패러다임

서술부와 평가부를 분리 하여 제어흐름이나 상태변화를 특정하지고도 프로그램 프로그램 로직이 무엇인지를 표현식으로 나타냅니다.

;[0, 1, 2, 3, 4].map(function (num) {
  return Math.pow(num, 2)
})

명령형과 비교시,

루프카운터를 관리하고 배열인덱스에 정확하고 접근하는 일에 개발자의 부담이 줄어듭니다.
명령형의 for loop은 재사용이 불가능하다. 함수로 추상하는 작업으로 인해 재사용이 가능 합니다. (선언적 프로그래밍)

순수함수와 부수효과

순수함수의 특성

주어진 입력에만 의존할 뿐, 평가 도중 또는 호출 간 변경될 수 있는 숨겨진 값이나 외부 상태와 무관하게 작동합니다.
전역객체나 레퍼런스로 전달된 매개변수를 수정하는 등 함수 스코프 밖에서 어떠한 변경도 일으키지 않습니다.

순수함수가 아닌 예시.

ex1.

var counter = 0
function increment() {
  return ++counter
}

이 함수가 순수함수가 아닌 이유 :

함수 스코프 밖에서 변경이 일어납니다. 외부 변수 counter를 읽고 수정하므로 부수효과를 일으킵니다.

ex2. 예측 가능한 값을 내지 않습니다.

Date.now() //매번 다른 예측 할 수 없는 값을 산출

ex3. this 를 사용하는 함수.

this 키워드를 거쳐 인스턴스 데이터에 접근하는 것 역시 부수효과를 유발한다. 그 이유는 this는 해당 함수의 런타임 컨텍스트에 따라 달라지기 때문입니다.

참조 투명성과 치환성

참조투명성은 순수함수를 정의하는 좀 더 공식적인 방법이며, 순수성이란 함수의 인수와 결과값 사이의 순수한 매핑 관계를 의미 합니다. 함수가 동일한 입력을 받았을 때, 동일한 결과를 내면 참조투명성이라고 합니다.

참조 투명하지 않다라는 것은 무엇일까?

var counter = 0
function increment() {
  return ++counter
}

increment함수에서 인수가 아닌 외부 변수(counter)에 완전히 종속된 값을 반환하므로 참조투명하지 않습니다.

참조투명한 함수는 어떻게 만들 수 있을까?

const increment = (counter) => counter + 1

같은 입력에 같은 결과를 반환하는 안전한 함수입니다. 즉, 테스트하기 쉽고 전체로직을 파악하기 쉽습니다.

increment() 함수를 이용한 다른 코드의 예시로 명령형과 함수형의 차이를 보겠습니다.

명령형

increment()
increment()
print(counter) // ?

함수형

var plus2 = run(increment, increment)
print(plus2(0))

위의 코드에서 함수형이 참조투명성에 적합한 이유는

외부변수를 참조하지 않습니다.
주어진 입력 (0) 이라는 값에 의존하여, 항상 그 값에 2만큼 증가를 시킵니다.

반면에 명령형은

0 에서 2를 기대했지만, counter가 전역으로 쓰이기 때문에, 초기값이 0이 아닌 값으로 입력이 주어질 수 있으며 예상과는 다른 값을 산출 할 수 있습니다.

참조 투명성에 대한 다른 예시를 들겠습니다.

var input = [80, 90, 100]
var average = (arr) => divide(sum(arr), size(arr))

sum과 size 함수가 참조 투명한 함수라면,

divide( 270,3) 이 된다. 즉, 수식으로 표현이 가능하다는 것인데 이 말은 [80,90,100 ]이라는 함수의 인수값이 외부에 의존성을 갖는 값들이 아니므로 합을 구하는 로직 에서 우리가 예측한 결과값(80+90+100)을 도출 해 낼 수 있습니다. 즉 100% 순수 함수 입니다.

전체 코드 입니다. 순수함수형 프로그래밍의 사고방식이 내재된 코드입니다.

const sum = (total, current) => total + current
const total = (arr) => arr.reduce(sum)
const divide = (a, b) => a / b
const average = (arr) => divide(total(arr), size(arr))
average(input) //90

불변성

primitive 자료형은 불변입니다. 하지만 객체, 배열은 여러개의 식별자가 하나의 객체를 공유합니다. 그래서 이런 방식은 부작용이 생기는데 함수처리에서 객체또는 배열을 파라미터로 넘길 때, 원본 객체와 넘겨진 객체는 메모리주소는 다르지만 동일한 참조값을 갖습니다. 즉 동일한 객체를 가리키므로, 한쪽이 함수 반환값으로 변형된 객체로 원본 객체로 같이 바뀌는 부작용이 발생합니다.

const sortDesc = arr= >{
	arr.sort((a,b)=>b-a)
}

const stdeuntIds = [1,2,3,4,5]

const sortedStudentIds =sortDesc(studentIds);

console.log(sortedStudetnIds) // [5,4,3,2,1]
console.log(studentIds) //[5,4,3,2,1]

여기서 말하는 부수효과란 원본 레퍼런스가 가리키는 배열의 원소를 정렬하는 부수효과를 말합니다.

부수효과를 방지하기 위해 얕은 복사를 할 경우는, Object.freeze() 를 이용하거나,

깊은 복사를 할경우는 lodash 또는 람다JS 라이브러리들을 활용합니다.

참고자료

[도서] 함수형 자바스크립트 저자 루이스 아텐시오 번역 이일웅, 한빛미디어

FP 함수형 프로그래밍 특징