오브젝트란?

오브젝트는 key와 value의 집합체이다.

object = { key: value };

생성방법

object literal

const obj1 = {}

object constructor

new class 키워드 사용

const obj2 = new Object();

자바스크립트는 동적으로 타입이 runtime(프로그램이 동작하고 있을 때)결정되므로 오브젝트 생성 후 property를 후에 추가 및 삭제 할 수 있다.

// 기존
const wheezy = {name: 'wheezy', age: 20};

// 추가
wheezy.hasJob = true;

// 삭제
delete wheezy.hasJob; // undefined

오브젝트 할당

변수에 원시형 데이터 (문자열, 숫자)를 할당하면 데이터 자체가 그래도 변수가 할당되지만
오브젝트를 변수에 할당하면 오브젝트가 메모리에 들어있는 주소인 참조값이 변수에 할당된다.

const name = "wheezy";
const nameObj = { name: "wheezy" }; // x111

위에서 nameObj의 오브젝트는 메모리 주소값에 할당되어진다. (주소값을 x111이라고 가정)

const wheezy = { name: "wheezy", age: 10 }; // x222
const han = { name: "han", age: 20 }; // x333
const yk = wheezy; // x222

위에서는 wheezy변수를 yk에 할당하게 되어 wheezy변수의 참조값이 yk에 복사되어져 할당된다.

추가적으로 오브젝트는 값 자체가 변수에 저장되는 것이아니라 참조값(Reference)이 저장된다.
따라서 아래와 같이 수정된 값을 적용받게 된다.

wheezy.age = 30;
console.log(wheezy) // { name: "wheezy", age: 30 }
console.log(yk) // { name: "wheezy", age: 30 }

배열에서는?

배열 안에 오브젝트가 있을 때 생성된 오브젝트수에는 배열 자체도 포함시켜줘야 한다.
따라서 아래의 경우에는 총 3개의 오브젝트가 생선되었다.

const userInfo = [ // x666
	{ name: "wheezy", age: 10 }, // x444
  	{ name: "han", age: 20 } // x555
];

Spread Operator 경우에

✨ Spread Operator은 배열 안의 모든 오브젝트 내용을 하나하나 복사해오는 것이 아니라 오브젝트는 그대로 두고 array의 아이템들의 참조값을 복사한다.

따라서 아래와 같이 userInfo3배열에는 새로 만들어진 참조값 x777안에 userInfo3[0]은 userInfo[0]과 동일한 참조값이 x444, userInfo3[1]은 userInfo[1]과 동일한 참조값이 x555를 갖게된다.

const userInfo = [ // x666
	{ name: "wheezy", age: 10 }, // x444
  	{ name: "han", age: 20 } // x555
];
const userInfo2 = userInfo; // x666
const userInfo3 = [...userInfo]; // x777

따라서 만약 userInfo[0].age = 30으로 고치면 userInfo, userInfo2, userInfo3 모두 age가 30으로 바뀐다.
참조값이 모두 x444로 동일하기 때문에!!!

📍 주의할 점
다만 만약 userInfo에 새로운 값을 추가하면 Spread Operator을 한 배열에는 해당이 안된다.
다시 말해

userInfo.push({ name: "yk", age: 90 });
console.log(userInfo[name].length); // 3
console.log(userInfo2[name].length); // 3
console.log(userInfo3[name].length); // 2