Javascript Primitive type vs Reference type

진성·2022년 4월 3일
0

자바스크립트

목록 보기
8/23

Primitive type(원시 타입)

원시 타입의 값은 변경 불가능한 값이다.
한번 생성된 원시 값은 읽기 전용 값으로서 변경할 수 없다.

원시값에는 7가지 종류의 데이터 타입이 있다.

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'

이것은 엄밀히 말하면 원시값이 변형이 된 것이 아닌 새로운 메모리 공간을 확보하고 재할당한 원시값을 저장한 후에 그 값을 가리킨 것이다.
재할당을 하게 되면 변수가 참조하던 메모리 공간의 주소가 바뀌는 것이다.
원시값을 할당한 변수는 재할당 이외에 변수 값을 변경할 수 있는 방법이 없다.
만약 재할당 이외에 변수 값을 변경할수 있게 된다면 의도하지 않게 변수 값이 변경될 수 있다.
이는 값의 변경, 즉 상태 변경을 추적하기 어렵게 만든다.

Reference type(참조 타입)

자바스크립트에서 원시 자료형이 아닌 모든 것들은 참조 자료형이다.
대표적으로 배열, 객체, 함수가 있다.
참조 타입의 값, 즉 참조값은 변경가능한 값이다.
동적으로 크기가 변하는 데이터를 보관하기에 변수가 아닌 메모리 공간에 데이터를 저장한다.
쉽게 말해 참조값은 생성된 변수가 저장된 메모리 공간의 주소 그 자체다.
이 메모리 공간에 접근하면 참조 값에 접근할 수 있는 것이다.

let a = [10, 20]
let b = a
b[0] = 50
console.log(a) // [50, 20]

위에 코드를 보자 먼저 a라는 배열에 데이터를 메모리 공간에 저장을 한다.
이때 a는 메모리 공간 그 자체가 아닌 메모리 공간의 주소를 가지고 온다.
그리고 새로운 변수 b를 만들고 a를 할당해주면 둘은 같은 메모리 공간의 주소를 공유하게 되는 것이다.
결국 a와 b는 같은 데이터를 참조하게 되는 것이다.

profile
풀스택 진행중...

0개의 댓글