원시 타입의 값은 변경 불가능한 값이다.
한번 생성된 원시 값은 읽기 전용 값으로서 변경할 수 없다.
string, number, boolean, undefined, symbo, bigint, null
let bar = "aaa";
console.log(bar); // 'aaa'
bar.toUpperCase();
console.log(bar); // 'aaa'
let foo = []
console.log(foo)
foo.push("bbb")
console.log(foo) // [ 'bbb' ]
위에 코드를 보면 원시값은 교체할 수는 있지만, 직접 변형할 수는 없다.
이러한 원시값이 변형되지 않는 특성은 데이터의 신뢰성을 보장한다.
이러한 원시값을 변형하고 싶을때는 변수에 원시값을 재할당을 해주면 변형이 가능해진다.
let bar = "aaa";
console.log(bar); // 'aaa'
bar = bar.toUpperCase();
console.log(bar); // 'AAA'
이것은 엄밀히 말하면 원시값이 변형이 된 것이 아닌 새로운 메모리 공간을 확보하고 재할당한 원시값을 저장한 후에 그 값을 가리킨 것이다.
재할당을 하게 되면 변수가 참조하던 메모리 공간의 주소가 바뀌는 것이다.
원시값을 할당한 변수는 재할당 이외에 변수 값을 변경할 수 있는 방법이 없다.
만약 재할당 이외에 변수 값을 변경할수 있게 된다면 의도하지 않게 변수 값이 변경될 수 있다.
이는 값의 변경, 즉 상태 변경을 추적하기 어렵게 만든다.
자바스크립트에서 원시 자료형이 아닌 모든 것들은 참조 자료형이다.
대표적으로 배열, 객체, 함수가 있다.
참조 타입의 값, 즉 참조값은 변경가능한 값이다.
동적으로 크기가 변하는 데이터를 보관하기에 변수가 아닌 메모리 공간에 데이터를 저장한다.
쉽게 말해 참조값은 생성된 변수가 저장된 메모리 공간의 주소 그 자체다.
이 메모리 공간에 접근하면 참조 값에 접근할 수 있는 것이다.
let a = [10, 20]
let b = a
b[0] = 50
console.log(a) // [50, 20]
위에 코드를 보자 먼저 a라는 배열에 데이터를 메모리 공간에 저장을 한다.
이때 a는 메모리 공간 그 자체가 아닌 메모리 공간의 주소를 가지고 온다.
그리고 새로운 변수 b를 만들고 a를 할당해주면 둘은 같은 메모리 공간의 주소를 공유하게 되는 것이다.
결국 a와 b는 같은 데이터를 참조하게 되는 것이다.