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

• 매개변수는 타입에 따라 값에 의한 전달, 참조에 의한 전달 방식을 따른다.
  • 값에 의한 호출(call by value), 참조에 의한 호출(call by reference)과 동일한 동작 방식을 가진다.

// 매개변수 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" }

• changeVal 함수는 매개변수를 통해 전달 받은 원시 타입 인수와 객체 타입 인수를 함수 몸체에서 변경한다.

매개변수 primitive

• 원시 값은 변경 불가능한 값이므로 직접 변경할 수 없기 때문에 재할당을 통해 할당된 원시 값을 새로운 원시 값으로 교체
• 원시 타입 인수는 값 자체가 복사 되어 매개변수에 전달되기 때문에 함수 몸체에서 그 값을 변경(재할당을 통한 교체)해도 원본은 훼손되지 않는다.
  • 외부 상태, 즉 함수는 외부에서 함수 몸체 내부로 전달한 원시 값의 원본을 변경하는 어떠한 부수 효과도 발생하지 않는다.

매개변수 obj

• 객체는 변경 가능한 값이므로 직접 변경할 수 있기 때문에 재할당 없이 직접 할당된 객체를 변경
• 객체 타입 인수는 참조 값이 복사 되어 매개변수에 전달되기 때문에 함수 몸체에서 참조 값을 통해 객체를 변경할 경우 원본이 훼손된다.
  • 외부 상태 즉, 함수 외부에서 함수 몸체 내부로 전달한 참조 값에 의해 원본 객체가 변경되는 부수 효과가 발생한다.

• 이처럼 함수가 외부 상태(ex. 객체를 할당한 person 변수)를 변경하면 상태 변화를 추적하기 어려워진다.

  ⇒ 객체가 변경할 수 있는 값이며, 참조에 의한 전달 방식으로 동작하기 때문에 발생하는 부작용으로 코드의 복잡성을 증가 시키고 가독성을 해친다.