Object(객체, 오브젝트) 기초

Array : 어레이

Object : 오브젝트

이라고 명명한다.

 

---

 

오브젝트는 자바스크립트에서 가장 중요한 컨셉트라고 할 수 있다.

왜냐하면 자바스크립트를 구성하는 중요한 기능들의 대부분이 오브젝트로 되어있기 때문이다.

< Function 마저도 사실은 오브젝트의 일부이다. >

 

어레이처럼 오브젝트도 다양한 데이터를 저장할 수 있는 자료구조인데,

오브젝트와 어레이를 둘 다 사물함으로 비교해볼 수 있다.

• 어레이는 사물함 내 물건마다 각 자리가 있고, 번호(인덱스)가 달려있는 것이라고 한다면
• 오브젝트는 사물함 내 물건마다 넘버링이 아닌 문자열 라벨이 달린 것이라고 할 수 있다.

 

이 때 오브젝트 내 라벨은 'key(키)'라고 부르고

물건은 'value(밸류)'라고 부른다.

 

---

 

오브젝트를 한번 만들어보자.

 

오브젝트를 생성할때는 {} 를 사용한다.

 

const student1 = {
  first: '2',
  last: 'DC',
  age: 30
}

const student2 = {
  first: 'P',
  last: 'JY',
  age: 29
}

const total = student1.age + student2.age // total is 59

위 각각의 오브젝트에는 3개의 키와 그에 상응하는 밸류가 있다.

student1은 키로 first, last, age를 가지고 있고 각 상응하는 밸류인 '2', 'DC', 30을 가지고 있다.

student2은 키로 first, last, age를 가지고 있고 각 상응하는 밸류인 'P', 'JY', 29을 가지고 있다.

 

total 변수를 이용해 student1과 student2 오브젝트의 age에 접근해보았다.

const total = student1.age + student2.age // total is 59
// student1.age is 30
// student2.age is 29

두 값은 각각 밸류로 30과 29를 가지고 있으므로 더했을 경우 59가 되기에

total은 59가 된다.

 

---

 

그런데 우리는 이러한 접근법을 사실 많이 사용해왔다. 

 

즉, 우리는 오브젝트를 많이 사용해오고 있었다.

 

console.log()

console.log()를 보자.

console은 JS를 만든 엔지니어가 우리들이 사용하기 편하도록 미리 만들어놓은 오브젝트이다.

 

이 console은 log라는 key를 가지고 있고,

key에 상응하는 value로는 화면에 인자를 출력하는 function이 있던 것이다.

 

그래서 console.log('인자')와 같이 입력하게 되면

console의 객체의 log라는 키에 저장된 function value를 '인자'를 받아 호출하게 된다.

 

---

 

다른 예시를 통해 마저 설명해보자면...

 

document.querySelector()

 - document 오브젝트는 JS 엔지니어가 미리 만들어놓은 오브젝트이다.

 - document 오브젝트에 querySelector라는 키가 있고, 키에 상응하는 밸류는 function이다.

 

localStorage.getItem()

 - localStorage 오브젝트는 JS 엔지니어가 미리 만들어놓은 오브젝트이다.

 - localStorage 오브젝트에 getItem이라는 키가 있고, 키에 상응하는 밸류는 function이다.