순수함수

이번에 회사에서 리액트를 배우는 신입분이

모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다.

라는 글을 읽으시고 순수함수가 무엇이냐 라는 질문에 대해 명확하게 대답하지 못했다.

이미 이해한 개념이라고 생각했는데, 막상 정의를 설명하는데 어려움을 겪은 것이다.
그래서 이 자리를 빌려서 정리하려고 한다.

순수함수란

함수형 프로그래밍에서는 어떤 외부 상태에 의존하지도 않고 변경시키지도 않는, 즉 부수 효과(Side Effect)가 없는 함수를 순수함수(Pure function)이라고 한다. - PoiemaWeb

반대로 부수 효과가 있는 함수는 비순수 함수(Impure function) 이라고 한다.

추가적으로 풀어서 순수함수를 설명하자면

• 동일한 인수가 전달되면 언제나 동일한 값을 반환한다. (외부 상태에 의존하지 않는다)
• 외부상태를 변경하지 않는다.

예측 가능: 동일한 입력에 대해 예측 가능한 output을 생성한다.
가독성: 독립된 실행 단위를 가지므로 누구나 그 목적을 완전히 이해할 수 있다.
재사용 가능: 함수와 호출자의 동작을 변경하지 않고 코드의 여러 위치에서 함수를 재사용할 수 있다.
테스트 가능: 독립적인 단위로 테스트 가능하다.

1. 외부 상태에 의존하지 않는 함수 (순수 함수)

function myName(name) {
  return `My Name is ${name}`;
}

myName('chan'); // returns 'My Name is chan'

2. 외부 상태에 의존하는 함수 (비순수 함수)

let introduce = 'My name is';

function myName(name) {
  return `${introduce} ${name}`;
}

myName('chan'); // returns 'My name is chan';

introduce = 'Hi';

myName('chan'); // returns 'Hi chan';

2번 예제에서 introduce라는 변수를 변경한다면 결과 같이 달라진다.

3. 외부 상태를 변경하는 함수 (비순수 함수)

let imA = 'A'

function changeA() {
  imA = 'B'
}

changeA();
console.log(imA); // 'B'

3번 예제는 외부 상태를 변경함으로 예측이 어려워진다.

순수함수를 사용하는 이유

비순수함수를 사용하면 다음과 같은 문제가 발생한다.

• 함수가 외부 상태를 변경하면 상태 변화를 추적하기 어려워진다.
• 추적의 어려움은 결국 오류를 야기하고, 오류해결을 어렵게 만든다.

위와 같은 이유로 비용이 증가하게 되므로, 함수형 프로그래밍에서는 순수함수의 사용을 지향한다.

참고자료

모던 자바스크립트 Deep Dive - 으웅모 지음
What are Pure Functions and Side Effects in JavaScript? - GreenRoots Blog