[JS] Reference data type 개념 정리

 

 

이제까지 배웠던 자료형은 각각 다른 데이터 타입을 가지고 있었다.

그리고 그 타입에 따라 변수 할당,수정,복사 등의 작업을 하는 과정에서 다른 결과가 나올 수 있다.

 

 

 

 

 👀 Primitive data type 기본형 데이터 타입

문자, 숫자, 불리언 등

자료 자체가 변수에 저장되는 타입으로 아래와 같은 단순 변수들을 말한다.

let name = 'Jessie';
let age = 20;

 

 

기본형 데이터 타입의 변수를 복사 한 후 값을 변경하면 어떻게 될까?

let name1 = 'Jessie'; // output : Tony
let name2 = name1; // output : Jessie

name1 = 'Tony';

위 코드에서 name1에 Jessie가 직접 저장되었고, name2는 name1의 값을 공유받아 Jessie라는 값이 직접 저장되었다.

거기서 name1의 값을 바꾸었지만, 이미 직접 값이 저장되어있는 name2에는 영향이 미치지 않는다.

 

 

 

 

 👀 Reference data type 참조형 데이터 타입

중요한건 레퍼런스 데이터 타입들이다.

기본형을 제외하고 Array, Object 자료형들이 이 타입에 속하며

이런 자료들은 데이터가 변수에 직접 저장되는 것이 아니라, 데이터가 어디에 저장되어 있는지 참조할 수 있는 포인터가 생기는 것과 같다.

 

그래서 참조형 데이터 타입의 변수를 복사하면 아래와 같이 동작한다.

const person1 = {name : 'Jessie'}; // output : Tony
const person2 = person1; // output : Tony

person1.name = 'Tony';

person1이라는 object는 참조형 데이터 타입이므로 어디에 있는 데이터를 참조하면 되는지 알 수 있는 포인터가 생겼다.

그리고 person2는 person1의 포인터를 복사했다.

 

같은 위치로 향하는 포인터를 공유하고 있으니 person1의 name 값만 변경했음에도 값이 함께 변경되었다.

 

 

 

 

👀  강의 내용 따라서 조금 더 생각해 보기

TEST 1. 같은 값을 가진 두개의 오브젝트

const person1 = {name : 'Jessie'};
const person2 = {name : 'Jessie'};

위 두 가지 오브젝트는 각각 선언되었다.

같은 값을 가지고 있지만, person1 == person2 로 비교해보면 결과는 false가 된다.

각각 선언되어 각자의 데이터로 향하는 다른 포인터를 갖고 있기 때문이다.

 

 

TEST 2. 오브젝트의 값을 바꾸는 함수

let person = {name : 'Jessie'};
console.log(person); // output : Jessie

function change(obj) {
  obj = {name : 'Tony'};
}
change(person);
console.log(person); // output : Jessie

person 오브젝트에 name을 할당했고, 출력하면 당연히 Jessie라는 값이 나온다.

 

오브젝트의 name을 바꾸는 함수를 만들어서 실행시켜보았는데 여전히 데이터가 바뀌지 않고 Jessie라는 값을 출력한다.

 

person은 {name : 'Jessie'} 로 향하는 포인터를 가지고 있다.

함수에서 파라미터 자리에 들어오는 오브젝트의 값을 바꾸었으나,

결국 obj = person 이 되므로, person이 가진 포인터 대로 가서 {name : 'Jessie'} 라는 값을 가져오게 된다.

 

 

let person = {name : 'Jessie'};
console.log(person); // output : Jessie

function change(obj) {
  obj.name = 'Tony'
}
change(person);
console.log(person); // output : Tony

위의 코드가 제대로 동작하게 하기 위해서 함수 내용을 바꾸었다.

 

이번에는 파라미터에 person을 대입함으로서 person.name = 'Tony'가 실행되게 되었다.

내부의 값을 직접 재할당 했으므로, person의 값이 성공적으로 바뀐 것을 확인할 수 있다.

 

 

 

참고글 https://www.freecodecamp.org/news/primitive-vs-reference-data-types-in-javascript/