Deep copy와 Shallow copy에 대해 찾아보다보니 자연스레 연관된 개념이 이 primitive type과 object type이더라.

간단히 JavaScript의 data type에 대해 primitive와 object의 비교 위주로 짚어보고자 한다.

1. Dynamic typing (동적 타이핑)

• JavaScript는 dynamic한 언어다.

• const, var, let 등으로 변수를 선언할 때 대입될 data의 type을 고려하지 않고 동적으로 받아들인다.

• 즉, const에 integer던, string 이건, 혹은 object type이건 user가 신경쓰지 않고 일단 쑤셔넣고 볼 수 있다는 말이다.

• 변수가 수용할 자료형을 선언하지 않아도 되기 때문에 간편하다는 장점이 있지만, 예기치 못한 data type을 수용할 경우 오류가 생길 수도 있다는 점을 감안해야한다.

• Typescript을 이용하면 data type을 strict하게 지정할 수 있다.

2. JavaScript Types

• JS의 data type은 Primitive와 Object로 나눌 수 있다.

3. Primitive Type (원시 타입)

Primitive (혹은 primitive value, primitive data type)란 object가 아니며 method를 가지고 있지 않은 data를 뜻한다.

• string
• number
• bigint
• boolean
• undefined - 값 자체가 없는 것 (declare했지만 아무 값도 assign 안했거나, 값을 return 받고자 했는데 return 값이 없을 때 볼 수 있다.)
• symbol
• null - "reference가 invalid하거나 존재하지 않는 곳을 참조할 때"

3.1 불변성 (Immutable)

모든 primitive들은 immutable하다.

엥? 아닌데? integer값에 += 1 하면 변하는데?

아니다.

할당된 primitive 값은 변경될 수 없다.

이미 primitive 값이 assign된 변수에 새로운 값을 할당하려하면, 원래 있던 값에서 대체 (alter)되는 것이 아니라 새로운 값을 재할당 (reassigned) 받게 된다.

즉,

let name = "leo";
name = name + "bang";

이 경우 name에 저장되어있던 "leo"에 "bang"이라는 추가적인 string을 concaternate하여 이미 있던 값을 alter하는 것이 아니라, 아예 새로운 메모리 공간을 확보한 후 그 곳에 "leobang" 이라는 string value를 reassign하게 된다.

MDN에 있는 예시를 조금 더 살펴보자.

// Using a string method doesn't mutate the string
var bar = "baz";
console.log(bar);               // baz
bar.toUpperCase();
console.log(bar);               // baz

string type의 값을 upper case로 변경하는 함수를 이용했지만 원래 선언되어있던 변수 bar에는 변함이 없다.

toUpperCase() 함수가 실행된 결과를 확인하고 싶다면 새로운 변수에 값을 return하여 assign 해준 후, 해당 변수의 값을 출력하면 된다.

4. Object Type (= Reference Type ; 참조 타입)

Object, 혹은 Reference Type은 property들로 이루어진 있는 객체이다.

Object, Array, 그리고 Function이 있다.

4.1 참조타입

Object의 다른 이름인 Reference type에서 알 수 있듯이, object 값을 할당할 변수에는 값 그 자체가 저장되는 것이 아니라 해당 값의 주소를 가르키는 reference를 저장하게 된다.

즉, 변수에 할당되는 정보는 값이 아니라 "주소" 인 것이다.

변수에 Array를 할당한 후, 1이라는 number를 추가해보자.

const arr = [] 
arr.push(1)

먼저 메모리에 Array가 담길 공간이 생성되고, arr에는 해당 location을 가르키는 주소값이 담기게 된다.

위 두 줄의 코드에 따른 메모리의 변화는 다음과 같다.( <> 안에 담긴 것은 주소값이다)

arr에 담긴 reference는 변경되지 않는다. (static)

대신, reference가 가르키는 #001위치의 메모리에 있는 Array에는 1이라는 number가 의도대로 추가된다.

Assigning by Reference

이번에는 Object type이 담긴 변수를 다른 변수에 할당해보자.

var reference = [1];
var refCopy = reference;

위 코드를 실행했을 때 메모리의 상태는 다음과 같다.

Object 타입을 할당하면 값 자체가 가는 것이 아니라 해당 값의 메모리 주소인 reference 가 담기게 되므로 refCopy에도 [1]이 아닌 reference의 주소값인 <#001>이 담기게 된다.

둘은 같은 주소값을 공유하므로, reference 배열에 push 를 통해 새로운 값을 추가한다면 refCopy가 가르키는 배열 역시 추가된 상태로 존재한다.

이번에는 이미 object가 할당된 변수에 새로운 object를 할당해보자.

var obj = { first: 'reference' };
obj = { second: 'ref2' }

이 때, obj에 담긴 주소값은 어떻게 될까?
주소값은 동일한 채 해당 위치의 Array만 바뀔까?
답은 다음과 같다.

각 Object 마다 새로운 메모리 주소에 공간이 생성되고 (서로 주소값이 다르다), 만약 새 Object를 할당한다면 해당 주소값이 기존의 주소값을 대신하게 된다.

이때, 본인을 호출할 pointer가 없어져 접근 불가능해진 <#234>의 공간은 JS 엔진의 garbage collector에 의해 가용공간으로 돌아간다.

4.2 가변성 (Mutable)

4.1를 통해 object 값이 변수에 할당될 때는 값이 아닌 reference가 담기는 것을 확인했다.
이제 object의 가변성에 대해 알아보자.

변수의 reference에 의해 point된 object는 생성된 이후 동적으로 변경될 수 있다.
object의 경우 크기가 얼마나 커질지 알 수 없기 때문에 수정 사항이 발생할 때 매번 primitive 처럼 메모리 주소를 바꾸어 가며 재할당하는 것은 비효율적이다.
따라서 object 타입의 경우 매 변경마다 재할당을 하는 대신, 메모리 주소에 존재하는 object를 변경해준다.

역시 MDN의 예시를 살펴보자

// Using an array method mutates the array
var foo = [];
console.log(foo);               // []
foo.push("plugh");
console.log(foo);               // ["plugh"]

push()라는 함수를 통해 변수에 새로운 값을 추가해주었다.

primitive의 경우, 변경사항을 확인하고자 한다면 새로운 변수에 해당 값을 할당한 후 확인할 수 있었다.

object의 경우 reference가 가르키는 메모리 주소의 array가 동적으로 변경됨에 따라 새로이 할당할 필요 없이 변경사항을 확인할 수 있다.

References

• MDN - JavaScript data types
• 불변값과 가변값
• MDN - Primitive
• 자료형 - 참조타입
• Explaining value vs reference in javascript
• Comparing primitive and objects