[이론]js 개발자라면 알아야하는 핵심 컨셉 33개 #3.Value Types and Reference Types

[이론]js 개발자라면 알아야하는 핵심 컨셉 33개 #2.Primitive Types를 먼저 읽는다면 좋을 것 같다.

 

js 개발자라면 알아야 하는 핵심 컨셉 33개, 그 세 번째는 Value Types & Reference Types이다.

개발을 해 본 사람이라면 자주 들어봤을 법한 이야기이다.(이 부분은 워낙에 말이 많아서 살짝 부담스럽기도 한 주제.. 태클 환영입니다.)

 

그럼, 두 가지에 대한 이야기를 해보자

간단하게 코드를 작성해보자.

위의 예시를 보면, Reference Type을 이해하고 있는 사람은 결과를 이해할 것이고

그렇지 못한 사람은 왜 false가 나오지? 라고 생각할 것이다.

이 포스팅을 읽고 저러한 결과가 도출된 이유를 알아보자.

 

다음 코드를 작성해보자.

let a=50;
let b=a;
console.log(b);

위의 코드를 실행하면, 콘솔은 50을 출력한다.

a의 값을 중간에 수정해보자.

let a=50;
let b=a;
a=10;
console.log(b);

이번엔 어떤 값을 출력할까?

b=a이고 중간에 a의 값을 10으로 바꿨으니 10이 출력될까?

50

50이 출력되었다. 이유는 무엇일까?

b는 a의 '값'만 복제하여 할당받았기 때문이다.

조금 이해하기 쉽게 비유를 하자면,

a의 지갑에 50만원이 있었는데 b가 똑같은 돈을 자신의 지갑에 넣었다.

그 상태에서 a의 지갑에 있던 돈이 10만원이 되면, b의 지갑에 있는 돈도 10만원이 될까?

그렇지 않다. a가 갖고있는 지갑을 b가 함께 들고 있는것이 아니라 각자 지갑안에 똑같은 돈이 들어있었던 것일 뿐이다.

이와 같은 원리로, 변수에 값이 할당될 때는 value, 즉 '값'이 copy되어 할당된다.

 

이와는 다른 방식으로 변수가 할당되는 타입도 있다.

let Arr1=["a","b"];
let Arr2=Arr1;

Arr1.push("c");
console.log(Arr2);

과연 이번 코드는 어떤 결과가 도출될까?

이번엔 Arr1를 변경한 결과가 Arr2에 반영되었다.

비슷한 모양의 코드를 두고 다른 결과가 도출된 것을 볼 수 있다.

이러한 결과가 나오는 이유는, Number는 Value Type이고 Array는 Reference Type이기 때문이다.

Number에 값이 할당될 때에는, 해당 상수의 값이 복사되어 할당되고(마치 위의 지갑 비유처럼),

위처럼 Arr2에 Arr1을 대입했을 때에는 ["a","b"]의 주소값이 할당된다.

즉 Arr1과 Arr2는 똑같은 주소값을 가지고 있고, 이 주소값에 배당되어있는 객체와 논리적으로 연결된다.

따라서 Arr1과 Arr2는 똑같은 객체를 가리키고 있으며, Arr1의 프로퍼티를 변형시켰을 때에

Arr2에도 변화가 적용되는 것이다.

Value Type vs Reference Type

대략 이러한 그림으로 value type과 reference type을 나타낼 수 있겠다.

처음에 나온 이 코드가 왜 이렇게 나왔는지, 다시 한 번 생각해보도록 하자.

---

이번 포스팅을 하기 위해 굉장히 많은 검색과 질문을 해가며 글을 썼다.

내게 가장 큰 난관을 줬던건 JS 함수에서의 Call by Value와 Call by Reference의 문제였는데,

발품팔며 찾아다닌 결과로는, JS 함수에서 call by reference는 존재하지 않는다고 한다.

'call by reference가 존재하지 않는다'와 'reference type이 존재하지 않는다'는 다른 의미인데,

같은 의미로 뭉뚱그려 취급해서 어려웠던듯하다.

다음 링크에 이와 관련한 내용이 나오니, 읽어보도록 하자.

[javascript]call by value

stackoverflow

 

출처 : github js-33concepts, Nomad Coders