[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의 값이 성공적으로 바뀐 것을 확인할 수 있다.

참고글