[JavaScript] 5. Object

앞서 Primitive Types는 모두 살펴봤지만, Reference Type은 나중으로 미뤘었다.
이번에 다룰 object가 바로 Reference Type이다.

object는 다른 모든 Primitive, Reference Types의 값들을 하나로 묶어서 커스텀 타입을 만들 수 있다.

---

1. Create Property

const person = {
	name: "abc",
  	age: 10,
};

중괄호 { } 안에 여러가지 Property를 Key: Value 형태로 넣어서 object를 만들 수 있다.
물론 {}처럼 아무런 Property가 없는 object도 가능하다.

const name = "abc";

const person = {
	name, // name: name, -> name: "abc",
    age: 10,
};

원래는 name: name과 같이 Key, Value를 둘 다 써줘야 하지만
key, value의 identifier가 같은 경우는 한 번만 적어줘도 된다.

const key = "name";
const name = "name";

const person = {
	[key]: name, // name: name -> name: "name",
	age: 10,
};

object의 Key를 동적으로 넣고 싶은 경우, [] 안에 Key로 사용할 변수를 넣어주면 된다.

---

2. Read Property

object 안에 저장된 Property를 읽어오는 방법은 2가지가 있다.

const person = {
	name: "abc",
    age: 10,
};

person.name; // "abc"
person["name"]; // "abc"

person.name;처럼 값을 읽어오게 되면 자동 완성이 되기 때문에 실수를 줄일 수 있다.
person['name'];은 []안에 또 다른 변수를 넣어서 동적으로 key를 넣을 수 있다는 점과 -, ^, & 등, JS에서 변수명으로 사용할 수 없는 문자들도 사용할 수 있다.

const obj = {
    '^': 1,
    '*': 2,
    '(': 3,
};

obj['^']; // 1
obj['^']; // 1
obj['^']; // 1

obj.^; // Uncaught SyntaxError: Unexpected token '^'

참고로 빈 문자열 ""도 key로 사용할 수 있다.

const obj = {
	"": "data",
};

obj[""] // "data"

object는 어떤 타입의 값을 Key로 넣더라도 문자열로 변환한다.
그래서 . 을 통해 접근할 때는 반드시 문자로 이루어진 identifier이어야 하며, []을 통해 접근할 때는 그 안에 주어지는 Key 타입이 무엇이던 string으로 변환해서 접근한다.

const obj = {
	1: "one",
};

obj[1]; // "one"
obj["one"]; // "one"
obj.1; // Uncaught SyntaxError: Unexpected number

마찬가지로 undefined도 Key로 주어지면 string이 된다.

const obj = {
	undefined: 1,
};

obj[undefined]; // 1
obj["undefined"]; //1
obj.undefined; //1

---

3. Update Property

이미 존재하는 Property에 값을 재할당하면 값이 갱신된다.
., [] 어떤 연산자를 사용해도 무방하다.

const obj = {
	name: "a", 
};

obj.name = "b";
obj.name; // "b"

obj["name"] = "c";
obj.name; // "c"

---

4. Delete Property

Property를 삭제하는 방법이다.

const obj = {
	name: "a", 
};

obj; // { name: "a" }

delete obj.name;

obj; // {}

---

5. Dynamic Property Insertion

const obj = {
	name: "a", 
};

obj.name2 = "b";
obj["name3"] = "b";

obj; // { name: "a", name2: "b", name3: "c" }

Update와 똑같이 접근 연산 후 할당 연산을 하면 값이 갱신되지만, 존재하지 않는 Property인 경우 삽입한다고 보면 된다.

object를 만든 이후에 추가하는 것이므로, 동적 생성이라고 표현한다.

---

6. Methods

대부분의 프로그래밍 언어에는 기본적으로 함수가 존재한다.
수학 시간에 배웠던 그 함수다.

임의의 값을 주면 그 값을 가지고 어떤 처리를 한 후 새로 만들어진 값을 반환한다.

그러나 프로그래밍에서는 값을 반환하지 않을 수도 있고, 값을 넣지 않는 경우도 있다.

지금은 간단하게 무언가 특정한 일을 하나 해주는 것이라고 생각하자.

아래와 같이 생겼다.

function fn() {
	// do someting
}

object는 모든 Primitive, Reference Types 이외에도 함수를 Property로 가질 수 있는데, 아래와 같이 넣으면 된다.
참고로 object 내부의 함수는 Method라고 부른다.

const obj = {
	fn1: function() {},
};

object 내부에서 함수를 정의할 때는 편의를 위해 아래와 같이 function을 생략할 수 있다.(:도 빠지는 점을 주의하자)

const obj = {
	fn1() {},
};