[JavaScript] 자바스크립트 원시 값과 참조 값!

원시 값? 참조 값?

자바스크립트의 변수에는 크게 두가지 타입을 저장을 할 수 있으며,
이 두가지 타입에는 원시타입의 값과 참조타입의 값으로 나누어져 있습니다.

원시 값(Primitive values)

원시값, 원시 데이터 타입은 객체가 아닌 데이터 타입을 뜻합니다.
그렇다면 객체가 아닌 데이터가 무엇을 의미하냐면,
변수에 저장된 실제값에 직접적으로 접근할 수 있는 단순한 데이터라는 뜻입니다.
그리고 또한 하나의 값에 대한 정의가 절대 변하지 않는 불변성을 갖고 있습니다.

원시 값의 종류

• String (문자)
• Number (숫자)
• Boolean (참,거짓)
• Null
• Undefined
• Biglnt
• Symbol

// 예시
let a = 100;
let b = 문자;

원시값의 불변성?

원시값의 특징이라고 할 수 있는 불변성을 이해하려면 원시 값 자체와, 원시값을 할당한 변수를 혼동하지 않는 것이 중요합니다.
변수는 새로운 값을 다시 할당할 수 있지만, 이미 생성한 원시 값은 객체, 배열, 함수와는 달리 변형할 수 없습니다

예시 1

// 문자열 메서드는 문자열을 변형하지 않음
let a = "hello";
console.log(a); // output> hello
a.toUpperCase();
console.log(a); // output> hello

// 배열 메소드는 배열을 변형함
const arr = [];
console.log(arr); // output> []
arr.push("plus");
console.log(arr); // output> ["plus"]

// 할당은 변형이 아닌 새로운 값을 부여
b = a.toUpperCase();
console.log(b) // output> HELLO

예시 2

// 원시 값
let num = 5;

// 원시 값을 변경해야 하는 함수 정의
function addTwo(n) {
   n += 2;
}

addTwo(num) // 매개변수로 전달된 인수를 복사해 로컬 복사본을 생성
console.log(num); // 따라서 현재 원시 값 반환
// output> 5

참조 값(Reference Type)

참조 데이터타입은 쉽게 생각한다면, 자바스크립트에서 원시 타입을 제외한 모든 타입이 참조타입(객체 - Object)입니다.
참조값의 데이터 자체는 별도의 메모리 공간에 저장되며, 변수에 할당 시 데이터의 값이 아닌,
데이터에 대한 메모리 공간의 주소가 저장되는 것 입니다.
따라서 자바스크립트 엔진이 변수가 가지고 있는 메모리 주소를 이용해서 변수의 값에 접근하는 것 입니다.

크기가 고정적으로 정해져있지 않고, 값 자체가 직접적으로 변수에 저장될 수도 없으며,
변수에는 데이터에 대한 참조만이 저장된다, 그래서 참조 데이터 타입으로 말합니다.

참조 값의 종류

• Object (객체)
• Array (배열)
• Function (함수)

참조 값의 복사

위에서도 말했듯이 참조 값은 객체를 변수에 할당하면 실제 객체의 값은 별도의 메모리 공간에 저장되고,
그 공간을 참조하는 주소를 변수에 값으로 저장을 합니다.
즉, 참조값은 생성된 객체가 저장된 메모리 공간의 주소를 의미합니다.

만약 참조 값을 변수에서 다른 변수로 복사하게 되면, 그 값이 객체 자체가 아닌 객체가 저장된 메모리 공간의 주소를 의미하기 때문에 복사 후에 두 변수는 정확히 같은 객체를 가리키게 됩니다.
따라서 한쪽을 조작하면 다른 쪽에도 반영되게 됩니다.

예시

let x = {num: 1}
let y = {num: 1}
console.log(x, y, x === y)
// output> {num: 1} {num: 1} false

값은 같지만 메모리 주소(참조값)가 다름.

x.num = 7
y = x
console.log(x, y, x === y)
// output> {num: 7} {num: 7} true

y는 x의 같은 메모리 주소(참조값)을 복사하여 전달받았기 때문에 값과 메모리 주소가 같음.

x.num = 2
console.log(x, y, x === y)
// output> {num: 2} {num: 2} true

같은 메모리 공간을 서로 참조하고 있으므로 num이 갱신 되었을 때 공유되기 때문에 true값이 나옴

let z = y
console.log(x, y, z, x === z)
// output> {num: 2} {num: 2} {num: 2} true

같은 메모리 공간에 대한 주소를 x, y가 가지고 있으며 이 값을 z가 전달 받았으므로 모두 같은 메모리 주소를 참조하고 있음.

x.num = 9
console.log(x, y, z,  x === z)
// {num: 9} {num: 9} {num: 9} true

같은 메모리 공간을 참조하는 x,y,z에서 값을 변경하였을 때 그 영향을 다른 변수도 받게되어 모두 갱신됨.

참고

원시 값 - MDN Web Docs 용어 사전: 웹 용어 정의
[JavaScript] 원시값과 참조값
원시값, 참조값의 차이 및 개념
자바스크립트의 원시값(Primitive Type)과 참조값(Reference Type)