22. Object 소개

안녕하세요. 박기린 입니다.

Array에 이어서 이번엔 Object(객체)에 대해 설명을 드리겠습니다.

---

 

 

 

Array의 한계

한 변수에 다양한 value를 저장하는 방법으로 Array(배열)가 이미 존재합니다. 하지만 Array에는 아쉬운 점이 하나 있습니다.

const giraffeArray = [
    'giraffe',
    'park',
    2022-2000,
    'teacher',
    ['Michael', 'Peter'],
];

위와 같은 배열은 각 요소에 이름을 붙일 수 없고, 오로지 index만 붙일 수 있습니다.

각 요소에 이름을 붙이기 위해서 object를 사용합니다.

 

---

 

 

 

Object

const parkGiraffe = {
    firstName: 'giraffe',
    lastName: 'park',
    age: 2022 - 2000,
    job: 'teacher',
    friends: ['Michael', 'Peter'],
} // 5개의 property를 가진 object

object(객체)는 {중괄호}를 사용해서 선언하는 방식이 있습니다. (literal syntax)

객체는 {Key: Value} 구조로 이루어져 있습니다. 배열의 index 역할을 객체의 Key가 해줍니다.

그리고 이 Key를 property(속성)라고 부릅니다.

 

---

 

 

property

console.log(parkGiraffe.lastName); // 'park'
console.log(parkGiraffe['lastName']); // 'park'

const nameKey = 'Name';
console.log(parkGiraffe['first' + nameKey]); // giraffe
console.log(parkGiraffe['last' + nameKey]); // park

const interestedIn = prompt('What do you want to know about giraffe? Choose between firstName, lastName, age, job, and friends');
if (parkGiraffe[interestedIn]){
    console.log(parkGiraffe[interestedIn]);
} else {
    console.log(`Wrong request! Choose between firstName, lastName, age, job, and friends`);
}

property를 불러오려면 '. (온점)' 또는 [대괄호]를 사용하면 됩니다.

이때 '. (온점)'을 dot notation이라고 부릅니다.

 

' . ' vs []

둘의 차이점은, '. (온점)'은 property의 이름만을, [대괄호]는 expression 모두를 입력할 수 있다는 것입니다.

만약 불러오려는 property가 존재하지 않는다면, undefined를 return 합니다.

 

---

 

 

 

기존 Object에 property를 추가하기

parkGiraffe.location = 'Korea';
parkGiraffe['twitter'] = '@giraffepark';

dot notation과 [대괄호] 둘 다

ArrayName + 추가하고자 하는 property의 이름 = property 안에 넣을 value

형태로 property를 추가할 수 있습니다.

 

다음 글에서는 object의 내장 메소드에 대해 알아보겠습니다.