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

자바스크립트가 제공하는 7가지 데이터 타입(숫자, 문자열, 불리언, null, undefined, 심벌, 객체 타입)은 크게 원시타입과 객체타입으로 구분할 수 있다.

1.원시 타입

원시 타입의 값은 변경 불가능한 값으로 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다.

var score = 80;
var copy = score;

console.log(score); // 80
console.log(copy); // 80

score = 100;

console.log(score); // 100
console.log(copy); // ?

위의 코드를 간단히 다시 해석해보자면, score 변수에 number값 80을 할당하고 copy 변수에 score변수를 할당했다. 이때 score 변수에 새로운 값 100을 할당하면 copy의 값도 갱신될까? 그렇지 않다.

변수에 원시 값을 갖는 변수를 할당하면 할당받는 변수(copy)에는 할당되는 변수(score)의 원시 값이 복사되어 전달된다. 이를 값에 의한 전달이라 한다

2. 객체 타입

객체 타입의 값은 변경 가능한 값으로, 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장된다.

즉 원시 값은 원시 값 자체를 값으로 갖지만 객체는 할당한 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근하면 참조값에 접근할 수 있다.

var person = {
  name : 'Lee'
};

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

위 예제에서 볼 수 있듯이 할당이 이뤄지는 시점에 객체 리터럴이 해석되고 그 결과 객체가 생성된다. 객체에 접근할 때에는 person 변수에 저장되어 있는 참조 값으로 실제 객체에 접근한다. 그렇다면 객체는 값을 어떻게 전달할까?

var person = {
  name: 'Lee'
};

var copy = person;

다음과 같이 객체를 가르키는 변수(person)을 다른 변수(copy)에 할당하면 원본의 참조 값이 복사되어 전달된다. 이를 참조에 의한 전달이라 한다.

3. 외부 상태의 변경

함수를 호출할 때의 경우를 생각해보자. 각각의 매개변수에 값을 전달하는 방식을 값에 의한 호출, 참조에 의한 호출을 구별해 부를 수 있지만 동작 방식은 동일하다.

function changeVal(prmitive, obj) {
  primitive += 100;
  obj.name = 'Kim';
}

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

changeVal(num, person);

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

다음과 같이 primitive는 원시 값, obj는 객체를 전달받는다. 함수 내부에서 각각 변수에 새로운 값을 할당해주었다. 그리고 나서 확인했을 때 원시 값은 원본이 훼손되지 않았지만, 객체는 원본이 훼손된 것을 확인할 수 있다.

여기서 각각 할당해주었다고 했지만 객체는 사실 재할당을 한 것이 아니다. 위에서 언급하였듯이 원시 값은 변경불가능한 값으로 직접 변경할 수 없기 때문에 재할당이 필요하다. 그러나, 객체는 변경 가능한 값이므로 직접 변경할 수 있기 때문에 재할당 없이 직접 할당된 객체를 변경한 것!

하지만 객체 타입 인수는 참조 값이 복사되어 매개변수에 전달되기 때문에 함수 몸체에서 참조 값을 통해 객체를 변경할 경우 원본이 훼손된다. 즉, 함수 외부에서 함수 몸체 내부로 전달한 참조 값에 의해원본 객체가 변경되는 부수효과가 발생한다.