[Javascript] Object랑 친해지기-2

Object

const num = 2;
const numObj = {num:2};

위의 경우에는 num변수에는 숫자 2자체가 들어있지만,
numObj에 오브젝트가 할당되면 numObj는 참조값이 할당된다.

좀 더 쉽게 말하자면, 오브젝트의 고유한 참조값. 예를들어 1234면 1234가 numObj에 할당된다.

const num = 2; ///2가 할당된다 
const numObj = {num:2}; ///1234라는 참조값이 할당된다. 

Object를 복사하는 경우?

const a = {id:'1', count:0}; 
const b = {id:'2', count:0};
const c = b;

이 경우에는 변수 a와 b가 각각 다른 참조값이 할당된다. 예를들어 1234는 a에 5678은 b에 할당된다.

그리고 c에는 b의 참조값 5678이 복사되어 할당된다!

🔗 이것으로 오브젝트는 값자체가 변수에 저장되는 것이 아니라 참조값이 저장된다라는 것을 확인할 수 있다

그렇다보니 const변수로 저장해도 참조값자체는 바꿀 수 없지만 오브젝트 자체의 데이터는 수정이 가능하다.

const arr = [
  {id:'첫번쨰', count:1},
  {id:'두번재', count:2}
  
]

arr = ["가", "나", "다"] ///TypeError: Assignment to constant variable. 
// 참조값 자체를 바꿀 수 없다 

const arr = [
  {id:'첫번째', count:1},
  {id:'두번재', count:2}
  
]

arr[0].id = "hi"
console.log(arr)
////[ { id: 'hi', count: 1 }, { id: '두번재', count: 2 } ]
/// object자체의 데이터는 수정이 가능하다

Spread Operator 경우?

🔗 spread연산자 기본 예제

//////1

const a = [1,2,3,4]
console.log(...a) ////1 2 3 4

/////2

const a = [1,2,3,4]
console.log([...a]) //// [1, 2, 3, 4]

/////3
const a = [1,2,3,4]
console.log({...a}) 
//// { '0': 1, '1': 2, '2': 3, '3': 4 }

위와 같이 개별적인 요소를 가져오는 메서드.
그리고 2, 3번의 예시의 경우, 스프레드연산자로 전개한 후 다시 배열과 오브젝트로 넣는 것이다.

const arr = [ /// 참조값 1234
  {id:'첫번쨰', count:1}, ///참조값 5678
  {id:'두번재', count:2} ////참조값 910
  
]


const arr2 = arr;
const arr3 = [...arr] ///참조값 999 

arr[0]은 {id:'첫번쨰', count:1}의 참조값이 들어가고
arr[1]은 {id:'두번재', count:2}의 참조값이 들어간다.
그리고 arr배열은 배열의 오브젝트 참조값이 들어간다

그리고 arr2에는 arr배열에 할당된 참조값이 그대로 할당되어 같은 참조값을 갖게 된다.
arr3은 spread operator을 이용해 새로운배열을 만든다.
🤷‍♀️ 하지만 이 메서드는 object내용물을 하나씩 복사해서 만드는 것이 아니라, array배열을 돌면서 각각의 아이템들의 참조값을 복사하게 된다.

그러니 더 쉽게 표현하자면 껍데기만 새로 만들어져 안에 들어있는 object들은 arr배열안에 있는 아이템들의 참조값을 복사해오는 것이다!

그래서 만약 arr에서 id를 수정한다면 arr3도 동일한 값이 출력되는것을 확인할 수 있다.

const arr = [
  {id:'첫번쨰', count:1},
  {id:'두번재', count:2}
  
]


const arr2 = arr;
const arr3 = [...arr]

arr[0].id="아이디"
console.log(arr3)
///
[
  { id: '아이디', count: 1 },
  { id: '두번재', count: 2 }
]

arr 배열 자체를 수정한다면 arr2 에서도 확인할 수 있지만, arr3에서는 확인할 수 없다.
왜냐? 다른 배열 오브젝트이기 때문이다!!
아까 위에서 말햇듯이 arr3은 새로운 껍데기가 만들어지는것과 같아 다른 참조값을 가지고 있다.

obejct랑친해지기-1 바로가기