TIL no.36 - Javascript - Primitive & Reference Data Type

Primitive & Reference Data Type에 대해 포스팅하겠습니다.

Primitive Data Type이란, 변수에 그 값을 넣어주는 것이고
Reference Data Type이란, 변수가 값이 저장된 메모리를 참조하는 것입니다.

JavaScript에서
Primitive Data Type의 종류는 Number, Boolean, String, Symbol, null, undefined등이 있고
Reference Data Type의 종류는 Object가 있습니다.

---

//Primitive Data Type Example
let originalValue = 100;
let newValue = originalValue;

위와 같은 경우를 그림으로 표현하면 다음과 같습니다.

originalValue -> 100
newValue  <-------┘ 

그리고 originalValue에 새로운 값을 저장하게 되면

originalValue = 200;

originalValue <- 200
newValue  <----- 100

그렇다면 Reference Data Type에 대해 알아보겠습니다.

//Reference Data Type Example
let originalArray = [1,2,3,4];
let newArray = originalArray;

위와 같은 경우를 그림으로 표현하면 다음과 같습니다.

originalArray -> (0x10) -> [1,2,3,4]
newArray  <--------┘

[1,2,3,4]라는 배열을 담고있는 주소(0x10)를 참조(reference)하는 형태입니다.

그리고 originalValue[0]의 값을 바꾸면 다음과 같습니다.

originalArray[0] = 100;

originalArray -> (0x10) -> [100,2,3,4]
newArray  <--------┘

그러므로, newArray[0]를 호출하게 되면

console.log(newArray[0]) // 100

---

이 개념에 대해 알아보는 예제를 살펴보겠습니다.

let profile = {
  name: "김개발",
  address: {
    home: "한강아파트",
    company: "위워크 선릉2호점"
  },
  hobby: "programming"
}

위와 같은 객체가 있고
addProperty라는 function이 있습니다.
이 function은 info라는 객체를 받아 profile에 merge합니다.

예를 들어

let newProfile = addProperty({ age: 20 });

//newProfile
{
  name: "김개발",
  address: {
    home: "한강아파트",
    company: "위워크 선릉2호점"
  },
  hobby: "programming",
  age: 20
}

위와 같은 결과가 나와야합니다.

이를 해결하기 위해서 필요한 개념은 2가지입니다.
1. 참고를 끊고 값을 복사하는 방법
2. 객체를 merge하는 방법

위 둘을 활용해서 addProperty를 구현하면 다음과 같습니다.

let clone = obj => {
  let clonedObj = {};
  for(let key in obj){
    clonedObj[key] = obj[key];
  }
  return clonedObj;
}

const addProperty = info => {
  let clonedProfile = clone(profile);
  
  return {...clonedProfile, ...info};
}

clone이라는 function을 만들어 참조를 끊고 값을 복사했고
{...obj1, ...ob2}문법을 확용해 객체를 merge했습니다.