[JavaScript]함수형 프로그래밍, 순수 함수

함수형 프로그래밍의 핵심 개념 중 하나인 순수 함수에 대해 설명을 합니다.

---

순수 함수(Pure Function)

아래 요건을 충족하면 순수 함수라고 할 수 있습니다.

1. 파라미터를 최소 하나 이상 받으며 파라미터에 의해서만 반환 값이 결정됩니다.

2. 값이나 다른 함수를 반환합니다.

3. 부수 효과가 없어야 합니다.

4. 입출력을 수행해서는 안 됩니다.

EX) 함수 내부에서 콘솔에 로그를 남김, 파일입출력

부수 효과(side effect)
함수 내부에 전역 변수를 사용
함수 내부나 애플리케이션에 있는 다른 상태를 변경
함수 내부에서 다른 함수를 호출(순수 함수는 제외)

---

순수하지 않은 함수

var globalAge = 50;

var userInfo = {
  name: "JaeSeong",
  age: 29
}

function setAge() {
  userInfo.age = globalAge;
  return userInfo;
}

console.log(setAge());

setAge() 함수는 순수하지 않습니다.

 

순수하지 않은 이유

1. 파라미터가 없습니다.

2. 값을 반환하거나 함수를 반환하지 않습니다.

→ 함수 외부에 있는 userInfo를 반환하고 있지만, userInfo는 setAge() 함수가 없어도 접근할 수 있으므로 순수 함수에 위반됩니다.

3. setAge() 함수 외부에 있는 userInfo의 값을 변경합니다.

4. 전역 변수인 globalAge를 사용합니다.

---

순수 함수

setAge() 함수를 순수 함수로 만들어 봅니다.

 

1. 파라미터를 받게 만들며, 전역 변수를 사용하지 않도록 합니다.

var userInfo = {
  name: "JaeSeong",
  age: 29
}

function setAge(user, age) {
  user.age = age;
  return user;
}

console.log(setAge(userInfo, 30));

setAge() 함수를 수정했지만 얕은 복사(Shallow Copy)에 의해 함수 외부의 userInfo의 값도 변경됩니다.

파라미터인 user를 불변 데이터로 만든다면, setAge()를 완전한 순수 함수로 만들 수 있습니다.

 

불변성 알아보기

 

2. 파라미터를 불변 데이터로 취급합니다.

var userInfo = {
  name: "JaeSeong",
  age: 29
}

const setAge = (user, age) => ({
  ...user,
  age
})

console.log(setAge(userInfo, 30));

스프레드 연산자와 화살표 함수를 사용하여 setAge를 순수 함수로 변경하였습니다.

더 이상 setAge 함수는 외부에 있는 userInfo 객체를 변경하지 않으며 새로운 객체를 반환합니다.

---

React와 연관지어 생각하기

<h1>...</h1> 태그를 생성하고 text를 적용하는 함수를 만들어봅니다.

 

JQuery를 사용하여 DOM을 변경하는 경우

function setHeader(text) {
   let h1 = document.createElement('h1');
   h1.innerText = text;
   document.body.appendChild(h1);
}

setHeader('Header Setting');

setHeader 함수는 순수 함수가 아닙니다.

1. 함수나 값을 반환하지 않습니다.

2. 함수 외부의 DOM을 변경합니다.

 

React에서 DOM을 변경하는 경우

const setHeader = (props) => <h1>{props.title}</h1>

React에서 작성한 setHeader 함수는 순수 함수입니다.

JQuery를 사용하여 작성한 setHeader 함수는 함수나 값을 반환하지 않았지만, React에서 작성한 setHeader 함수는

<h1>{props.title}</h1>을 반환합니다.

 

JQuery를 사용하여 작성된 setHeader함수는 DOM에 직접 접근을 하였지만, React에서 DOM을 변경하는 일은 setHeader함수와는 무관하게 React 라이브러리가 책임지고 담당합니다.

---

순수 함수가 중요한 이유

1. 테스트하기 쉽습니다.

→ 전달되는 인자에 대해서 결괏값을 예상하면 되므로 테스트가 쉽습니다.

 

2. 코드 관리가 쉬워지며, 리팩토링 할 수 있습니다.

→ 순수하지 않은 함수는 분석 및 수정이 어려우며 예기치 않은 동작을 유발합니다. 순수하지 않은 함수가 스파게티 코드로 작성되었을 경우 리팩토링이 불가능한 상황이 올 수도 있습니다.