Javascript Primitive type vs Reference type (원시 자료형 vs 참조 자료형)

1. 원시 자료형(원시 값)이란?

자바스크립트에서 원시 값(원시 자료형)이란 객체가 아니면서 메서드도 가지지 않는 데이터이다.

원시 값의 종류 7가지

• string
• number
• bigint
• boolean
• undefined
• symbol
• null

대부분의 경우 원시 값은 언어 구현체의 가장 저급 단계에서 나타난다.
모든 원시 값은 변형할 수 없다.
여기서 원시 값 자체와, 원시 값을 할당한 변수를 혼동하지 않는 것이 중요하다.
변수는 새로운 값을 다시 할당할 수 있지만, 이미 생성한 원시 값은 객체, 배열, 함수와는 달리 변형할 수 없다.

아래 예제들로 원시 값의 불변함을 확인할 수 있다.

• 예제1

// 문자열 메서드는 문자열을 변형하지 않음
var bar = "baz";
console.log(bar);        // baz
bar.toUpperCase();
console.log(bar);        // baz

// 배열 메소드는 배열을 변형함
var foo = [];
console.log(foo);        // []
foo.push("plugh");
console.log(foo);        // ["plugh"]

// 할당은 원시 값에 새로운 값을 부여 (변형이 아님)
bar = bar.toUpperCase(); // BAZ

원시 값을 교체할 수는 있지만 직접 변형할 수는 없다는 것을 확인할 수 있다.

• 예제2

// 원시 값
let foo = 5;

// 원시 값을 변경해야 하는 함수 정의
function addTwo(num) {
   num += 2;
}
// 같은 작업을 시도하는 다른 함수
function addTwo_v2(foo) {
   foo += 2;
}

// 원시 값을 인수로 전달해 첫 번째 함수를 호출
addTwo(foo);
// 현재 원시 값 반환
console.log(foo);   // 5

// 두 번째 함수로 다시 시도
addTwo_v2(foo);
console.log(foo);   // 5

위 코드의 진행과정을 살펴보자.

• addTwo()와 addTwo_v2()함수의 호출을 위해 자바스크립트는 식별자 foo의 값을 찾는다.
• 찾은 다음 자바스크립트는 인수를 함수의 매개변수로서 전달한다.
• 함수의 본문 내 구문들을 실행하기 전에, 자바스크립트는 원래 전달된 읜수(원시 값)를 복사해 로컬 복사본을 생성한다.
  이러한 복사본은 함수의 스코프 내에서만 존재하며, 함수 정의 내에 지정한 식별자를 통해 접근가능하다.(addTwo()의 num, addTwo_v2()의 foo)
• 함수의 구문들이 실행된다.
• 하지만, 두 함수는 원래(외부)의 foo의 값이 아닌 foo의 복사본으로 작업하여, 원본 foo에는 전혀 영향을 주지 않는다.

즉, 위의 진행과정은 결과적으로 원시 값에 직접 작업하지 않고, 복사본을 가져와 작업을 하기 때문에 원시 값은 변하지 않는다.

2. JavaScript에서의 원시 래퍼 객체

null과 undefined를 제외하고, 모든 원시 값은 원시 값을 래핑한 객체를 갖는다.

• 문자열 원시 값을 위한 String 객체.
• 숫자 원시 값을 위한 Number 객체.
• 빅인트 원시 값을 위한 BigInt 객체.
• 불리언 원시 값을 위한 Boolean 객체.
• 심볼 원시 값을 위한 Symbol 객체.

래퍼 객체의 valueOf() 메서드는 원시 값을 반환한다.

3. 참조 자료형(Reference type)이란?

• 원시 자료형(원시 값)이 아닌 모든 것들은 참조 자료형이다.
• 참조 자료형은 원시 자료형 데이터의 집합이다.
• 대표적으로 배열([]), 객체({}), 함수(function(){})가 있다.
• 참조 자료형을 변수에 할당할 때는 변수에 값이 아닌 주소를 저장한다.
• 동적으로 크기가 변하는 데이터를 보관하기 위해 변수가 아닌 다른 곳에 데이터를 저장하고 변수에는 그 주소만 할당한다.
  여기서 데이터가 보관된 곳은 'heap'이라고 불린다.
• 배열 – Array : [0,1,2,3,4,5]
• 객체 – Object {name : "Kim", age : 22}

4. 원시 자료형과 참조 자료형의 차이

원시 자료형은 하나의 데이터만 담을 수 있지만,
참조 자료형은 여러 데이터를 담을 수 있다.

자바스크립트에서 진행되는 연산은 원본의 데이터를 수정 하는 것이 아닌, 원본의 데이터를 참조하여 별도의 공간에서 진행하는 것이라는 것을 깨달았다.