Recent Posts
Recent Comments
«   2024/11   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Today
Total
관리 메뉴

DH의 개발 공부로그

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

JavaScript

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

DeveloperDH 2023. 2. 16. 22:18
728x90

원시 값? 참조 값?

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

원시 값(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)

728x90
Comments