함수에서 객체(참조값)를 사용할때 주의해야한다.(순수함수, 비순수함수)

객체는 원시값이 아닌 참조값으로 변경이 자유롭다고 했다.

자바스크립트 원시값 그리고 객체,참조값

- 여기서 문제점이 생긴다.

- 객체를 전달한 뒤 변경할 경우에는 원본이 훼손된다.

- 외부 상태, 즉 함수 외부에서 함수 몸체 내부로 전달한 참조값에 의해서 원본 객체가 변경되는 부수효과가 발생한다.

 

* 코드의 복잡성을 증가시킨다.

* 가독성을 해치는 원인이 된다.

* 코드가 많아지면 외부 상태가 변하는지 아닌지 알기 어렵다.( 에러 발생 위험이 크다)

 

- 객체가 변경되면 참조하던 변수가 이상이 생길 수 있다.

 

* 변경이 되었다면 추적하기가 힘들고, 추적해야하는 추가 대응이 필요하게 된다.

---

해결방법은?

 

- 객체를 불변 객체(immutable)로 만들어 사용

- 객체의 복사본을 새롭게 생성해야 하지만 객체를 원시값처럼 변경 불가능한 값으로 동작하게 만들 수 있다.

 

- 순수함수로 만들어서 사용.

 

---

▶ 순수함수 : 어떤 외부 상태에 의존하지 않고 변경 시키지 않는다. 즉 부수 효과가 없다.

- 전달되는 인수가 있기 때문에 값을 예측하기 쉽고, 외부 변수값에 의존하지 않는다.

let count = 0; // 현재 count

// 외부 상태에 의존하지 않으며, 변경하지도 않는 순수 함수
// 순수 함수는 동일한 인수가 전달되면 언제나 동일한 값을 반환한다.
function increase(n) {
  return ++n;
}

// 순수 함수가 반환한 결과값을 변수에 재할당하여 상태를 변경
count = increase(count);
console.log(count); // 1

count = increase(count);
console.log(count); // 2

- 매개변수를 넣고 함수를 호출하게 되면 재할당을 하지 않으면 원본값이 변경되지 않는다.

* count에 직접적인 접근이 아닌 인수에 의한 접근! 인수에 ++이 반영되고 그 값을 할당하면서 값이 변한다.

---

▶ 비순수함수 : 외부 상태를 변경시킨다. 즉 부수 효과가 있다.

- 인수가 없기 때문에 값을 예측하기 어렵다. 외부 변수값에 의존하기 때문에 변수의 값이 변경될때마다 값이 변한다. 

let count = 0; // 현재 count : increase 함수에 의해 값이 변화한다.

// 함수의 외부 상태에 의존하여 외부 상태에 따라 반환값이 달라지는 비순수 함수
// 비순수 함수는 외부 상태를 변경하는 부수 효과가 있다.
function increase() {
  return ++count; // 외부 상태를 변경한다.
}

// 비순수 함수는 외부 상태(count)를 변경하므로 상태 변화를 추적하기 어려워진다.
increase();
console.log(count); // 1

increase();
console.log(count); // 2

- 인수를 전달받지 않고 함수 내부에서 외부 상태를 직접 참조하게 되면 외부 상태에 의존하게 되어 반환값이 변할 수 있다.

- count값이 함수에 의해서 변한다.

 

* 외부상태에 의존하기 때문에 값에 대한 변화도 있지만, 함수가 호출이 될때마다 값을 예측하기가 어려워진다.

---

- 만약 변수 하나를 여러 함수에서 사용한다고 치자.

  변수는 적을 수록 좋다.

 

- 같은 값을 사용한다면 변수는 하나면 충분하다.

 

- 만약 비순수함수를 통해서 함수를 호출하게 되면 변수 값에 영향을 끼친다.

* 다른 함수에서 사용하고 있다면 당연히 문제가 된다.

 

- 그 외에도 매개변수가 없는 함수는 코드들을 추적하지않는 이상 값을 예측하기가 어렵다.

 

- 때에 따라 다르겠지만 함수에 쓰임새에 맞게 사용하면 될 것 같다. 되도록

---