[JavaScript] 참조에 의한 전달과 외부 상태의 변경

원시 값 : 값에 의한 전달

객체 : 참조에 의한 전달

 

// 매개변수 primitive는 원시값을 전달받고, 매개변수 obj는 객체를 전달받는다.
function changeVal(primitive, obj) {
  primitive += 100;
  obj.name = 'Kim';
}

// 외부 상태
var num = 100;
var person = { name: 'Lee' };

console.log(num); // 100
console.log(person); // {name: "Lee"}

// 원시값은 값 자체가 복사되어 전달되고 객체는 참조값이 복사되어 전달된다.
changeVal(num, person);

// 원시값은 원본이 훼손되지 않는다.
console.log(num); // 100

// 객체는 원본이 훼손된다.
console.log(person); // {name: "Kim"}

위 예제에서 primitive의 경우, 원시 값은 변경 불가능한 값이므로 직접 변경할 수 없기 때문에 재할당을 통해 원시 값을 새로운 원시 값으로 교체 했다.

매개변수 obj의 경우, 객체는 변경 가능한 값이므로 재할당 없이 직접 할당된 객체를 변경했다.

 

여기에서 원시타입 인수는 값 자체가 복사되어 매개변수에 전달되기 때문에, 원본 값을 변경하는 부수효과가 발생하지 않는다.

그러나 객체 타입 인수는 참조 값이 복사되어 매개변수에 전달되기 때문에 원본값이 변경되는 부수효과가 발생된다.

  => 객체의 원본 값이 변경되면 상태 변화를 추적하기 어려워 오류를 찾기 어려워 진다.

  => 옵저버 패턴등으로 추가 대응을 해야 한다.

 

 

순수함수와 비순수 함수

순수함수 : 부수 효과가 없는 함수(외부 상태에 의존하지도 않고 변경하지도 않는 함수)

비순수 함수 : 부수 효과가 있는 함수(외부 상태에 의존하거나 외부 상태를 변경하는 함수)

 

순수함수

동일한 인수가 전달되면 언제나 동일한 값을 반환하는 함수

var count = 0; // 현재 카운트를 나타내는 상태

// 순수 함수 increase는 동일한 인수가 전달되면 언제나 동일한 값을 반환한다.
function increase(n) {
  return ++n;
}

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

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

어떤 외부 상태에 의존하지 않고 오직 매개변수를 통해 함수 내부로 전달된 인수에게만 의존하여 반환 값을 만든다.

 

비순수 함수

함수의 외부 상태에 따라 반환 값이 달라지는 함수

var count = 0; // 현재 카운트를 나타내는 상태: increase 함수에 의해 변화한다.

// 비순수 함수
function increase() {
  return ++count; // 외부 상태에 의존하며 외부 상태를 변경한다.
}

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

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

함수 내부에서 외부 상태를 직접 참조하면 외부 상태에 의존하게 되어 반환 값이 변할 수 있고, 외부 상태도 변경할 수 있다.(비순수 함수)