자바스크립트 개발자가 알아야할 33가지 개념(#03. 값(value) vs 참조(reference))

 

 

자바스크립트는 값에 의한 전달(passed by value)이 일어나는 5가지의 데이터타입(Boolean, Null, Undefined, String, Number)을 가지고 있다. 우리는 이러한 데이터 타입을 원시 타입(Primitive Types)이라고 부른다.

 

또 자바스크립트는 참조에 의한 전달(passed by reference)이 일어나는 3가지의 데이터 타입(Array, Function, Object)도 가지고 있다. 이 3가지는 크게 보면 전부 객체(Object)로 볼 수 있다.

 

Pass by value

원시 타입은 값으로 전달된다. 즉, 값이 복사되어 전달된다. 원시 타입은 값이 한번 정해지면 변경 할 수 없다. 또한, 이들 값은 런타임(변수 할당 시점)에 메모리의 스택 영역(Stack Segment)에 고정된 메모리 영역을 점유하고 저장된다.

 

변수 a는 원시 타입인 숫자 타입 1을 저장하고 있다. 원시 타입의 경우 값이 복사 되어 변수에 저장된다.

즉, 참조 타입으로 저장되는 것이 아니라 값 자체가 저장되게 된다.

변수 b에 변수 a를 할당할 경우, 변수 a의 값 1은 복사되어 변수 b에 저장된다.

 

Pass by reference

참조 타입이란 객체의 모든 연산이 실제값이 아닌 참조값으로 처리됨을 의미한다.

원시타입은 값이 한번 전해지면 변경할 수 없지만 객체는 프로퍼티를 변경, 추가, 삭제가 가능하므로 변경 가능한 값이라 할 수 있다.

 

따라서 객체 타입은 동적으로 변화 할 수 있으므로 어느 정도의 메모리 공간을 확보해야 하는지 예측할 수 없기 때문에 런타임에 메모리 공간을 확보하고 메모리의 힙 영역(Heap Segment)에 저장된다.

 

a객체를 객체 리터럴 방식으로 생성하였다. 이때 변수 a는 객체 자체를 저장하고 있는 것이 아니라 생성된 객체의 참조값(address)을 저장하고 있다.

변수 b에 변수 a의 값을 할당하였다. 변수 a의 값은 생성된 객체를 가리키는 참조값이므로 변수 b에도 같은 참조값이 저장된다. 즉, 변수 a, b모두 동일한 객체를 참조하고 있다. 따라서 참조하고 있는 객체의 val값이 변경되면 변수 a, b모두 동일한 객체를 참조하고 있으므로 두 변수 모두 변경된 객체의 프로퍼티 값을 참조하게 된다. 객체는 참조(Reference)방식으로 전달된다. 결코 복사되지 않는다.

 

 

아래의 경우는 위의 경우와 약간 차이가 있다.

 

변수 foo와 변수 bar는 비록 내용은 같지만 별개의 객체를 생성하여 참조값을 할당하였다. 따라서 변수 foo와 변수 bar의 참조값 즉 address는 동일하지 않다.

변수 baz에는 변수 bar의 값을 할당하였다. 결국 변수 baz와 변수 bar는 동일한 객체를 가리키는 참조값을 저장하고 있다. 따라서 변수 baz와 변수 bar의 참조값은 동일하다.

 

 

 

첫 번째 콘솔에는 false,  false,  false가 출력된다.

a, b, c는 각각 다른 빈 객체를 참조하고 있다.

 

두 번째 콘솔에는 true, true, true가 출력된다.

a, b, c,는 모두 같은 빈 객체를 참조하고 있다.

 

 

---

참고 및 출처

• https://poiemaweb.com/js-object

Object | PoiemaWeb

• https://velog.io/@jakeseo_me/2019-04-01-1904-%EC%9E%91%EC%84%B1%EB%90%A8-2bjty7tuuf