[JS] Objcet(객체)

Objcet의 개념

위와 같은 데이터를 구현한다고 가정해보자. 그러면 우리는 저 표 안에 있는 값들을 아래와 같이 입력해야한다.

let plan1Name = "Basic";
let plan1Price = 3.99;
let plan1Space = 100;
let plan1Data = 1000;
let plan1Pages = 10;
let plan2Name = "Professional";
let plan2Price = 5.99;
let plan2Space = 500;
let plan2Data = 5000;
let plan2Pages = 50;
let plan3Name = "Ultimate";
let plan3Price = 9.99;
let plan3Space = 2000;
let plan3Data = 20000;
let plan3Pages = 500;

이 중에 plan3Name의 가격을 출력하려고 한다면?

console.log(plan3Name + "의 가격은" + plan3Price + "입니다.");

라고 입력할 것이다.
그런데 이런 유형의 데이터가 엄청 많아지면 어떻게 될까?
코드도 길어지고 유지/보수가 엄청 힘들어질 것이다.
이러한 문제로 인해 Objcet 개념이 생겼다.
위 출력창을 Objcet를 이용하면 아래와 같이 된다.

console.log(plan3.name + "의 가격은" + plan3.price + "입니다.")

아직은 객체를 이용한다고 해서 뭐가 편한지 잘 모를수도 있다.
아래는 plan3을 객체화 한 것이다.

let plan3 = {
	name: "Ultimate",
    price: 9.99,
    space: 2000,
    transfer: 20000,
    pages: 500
};

맨처음 일렬로 나열한 것보다 가독성이 훨씬 좋아보이는 것을 알 수 있다.
여기서 name, price space 같은 것들은 'key'라고 하며, "Ultimate", 9.99 같은 것들은 'value'라고 부른다. 이 두개를 합친 것을 'property'라고 한다.
property를 추가할 때는 콤마(,)를 꼭 붙여줘야한다.

Property 접근방법

1. Dot 이용

key만 알고 있으면 제일 편한 방법이다.

let shot = {
	12: 'groong',
   color: 'red',
   $special: 'hahahaha'
};

red를 출력하고 싶다면?
console.log(shot.color);
라고 하면 된다.

2. 대괄호[] 이용

let shot = {
	'my dog': 'groong groong',
    color: 'red',
    12: '아아',
    love: '아마도 그건',
    $special: 'hahahaha'
};

red를 출력하고 싶다면?
console.log(shot['color']);
라고 하면 된다.
Dot을 이용하는 것보다 상대적으로 귀찮다. 그런데 왜 사용하는걸까?
1. 스페이스가 포함된 key
스페이스가 포함된 key는 Dot을 이용하면 에러가 나기 때문이다.

console.log(shot.my dog);  // error
console.log(shot['my dog');  // groong groong 

2. 숫자로만 된 key
   숫자로만 되어있는 key는 대괄호를 이용해야한다.

console.log(shot.12);  // error
console.log(shot[12]);	//아아

3. 변수 이용

변수에 Key이름이 저장되어있으면, 변수로도 Property에 접근이 가능하다.

let name = 'love';
console.log(shot[name]);	//아마도 그건
console.log(shot.name);		//undefined

마찬가지로 Dot으로는 변수를 이용할 수 없다. 항상 대괄호를 이용해야한다.

Property 할당

객체에 이미 key가 존재하는데, 또 할당하면 value는 수정된다.
객체에 없던 key로 접근하면, 새로운 property가 추가된다.
이 추가된 property의 key에 접근하면 할당을 안했기 때문에 undefined가 출력된다.

주의할 점

const로 선언된 변수에 객체를 재할당하면 error가 발생한다.

const obj = {
	name: '객체'
};	//변수에 객체 할당
obj = {
	name: '수정'
}	//재할당 불가, error

하지만 property에 접근해서 내용을 수정하거나 property를 추가하는 것은 가능하다.

const obj = {
	name: '객체'
};	//변수에 객체 할당
obj.name = '수정';	// 수정 가능
obj.type = 'object 타입';	// 추가 가능