2. Javascript 참조 타입 (2) - 객체 프로퍼티 읽고, 쓰고, 삭제하기

 

객체에 생성된 프로퍼티 접근

객체에 생성한 프로퍼티에 접근할 때는 (1) 대괄호([ ]) 또는 (2)마침표( . )를 사용해 접근합니다. 아래와 같은 예제 객체를 생성했다고 가정해봅시다.

 

var indigo = {
    name : 'james',
    company : 'google'
};

 

객체 indigo에 있는 프로퍼티인 name과 company를 각각 출력해 봅시다. 이때, 출력할 프로퍼티를 위에서 언급한 대괄호와 마침표 표기법을 각각 사용해 출력을 테스트해 보겠습니다.

 

console.log(indigo.name);
console.log(indigo['company']);

/* 출력 */
// james
// google

 

모두 정상적으로 프로퍼티 값이 출력되는 것을 확인할 수 있습니다. 상황과 필요에 따라서 마침표 또는 대괄호를 사용하는데요, 주로 마침표를 많이 사용하고 필요 시 대괄호를 사용한다고 생각해 주시면 됩니다. 주의할 것은, 대괄호 표기법 사용 시 프로퍼티 명을 작은따옴표(' ')를 사용해 감싸주어야 한다는 점입니다. 

 

그럼 '반드시' 대괄호 표기법을 사용해야 하는 시점은 언제일까요?

 

예를 들어, 프로퍼티 명이 'full-name'이라고 가정해 봅시다. 이때 마침표 표기법을 사용해 출력한다면 어떤 일이 발생할까요? 

 

console.log(indigo.full-name);

 

이 경우 NaN 또는 컴파일 에러가 발생합니다. 왜 정상적으로 컴파일이 되지 않을까요? 답은 간단합니다. 이 경우에는 시스템이 indigo.full이라는 프로퍼티에서 name이라는 변수를 빼주는 연산을 실행하기 때문입니다. 그렇게 때문에 하이픈(-)으로 설정된 프로퍼티 명이 있을 경우에는 반드시 대괄호 표기법을 사용해야 합니다. 

 

console.log(indigo['full-name']);

 

 

물론 눈치 빠르신 분들은 아시겠지만, 되도록 저런 하이픈 타입의 프로퍼티 명은 사용하지 않는 것이 좋습니다. 굳이 예외 상황을 만들어서 좋을 것은 없으니까요!

 

 

---

 

프로퍼티 갱신하기

이미 선언된 프로퍼티는 갱신도 가능합니다. 방법은 특별한 것은 없고, 위에서 살펴본 프로퍼티 접근 방식을 사용해 원하는 값으로 다시 선언해주면 자동으로 갱신이 됩니다. 

 

var indigo = {
    name : 'james',
    company : 'google'
};

console.log(indigo.name);
console.log(indigo['company']);

indigo.company = 'facebook';
console.log(indigo.company);

 

위 코드를 실행하면 처음 'google'로 출력된 company 프로퍼티 값은 'facebook'으로 바뀌어 출력되는 것을 확인할 수 있습니다. 

 

 

 

---

 

 

프로퍼티 동적 생성하기

프로퍼티의 '동적 생성'이라고 하니 뭔가 어렵게 느껴지지만, 간단한 관념입니다. 위에서 우리는 indigo라는 객체에 name과 company 프로퍼티를 선언해 생성해 주었습니다. 하지만, 객체가 생성된 이후에도 프로퍼티가 추가될 일은 얼마든지 발생하겠죠?

 

이럴 때는 간단하게 객체 프로퍼티 접근 방식을 통해 값을 선언해 주면 됩니다. 

 

var indigo = {
    name : 'james',
    company : 'google'
};

console.log(indigo.name);
console.log(indigo['company']);

indigo.company = 'facebook';
console.log(indigo.company);

indigo.address = 'New York';
console.log(indigo.address);

 

위에서 미리 선언되지 않은 address라는 프로퍼티를 선언하고, 'New York'란 값을 대입했습니다. 그리고 이 프로퍼티를 출력해 주면 정상적으로 'New York'가 출력되는 것을 확인할 수 있습니다.  

 

즉, 이미 존재하는 프로퍼티 값을 할당할 경우에는 값이 갱신되며 존재하지 않는 프로퍼티 값을 할당하게 되면 새로운 프로퍼티가 자동으로 생성된다는 규칙을 확인할 수 있습니다.

 

 

---

 

프로퍼티 삭제하기

특정 프로퍼티를 삭제할 때는, delete 키워드를 사용합니다. 위의 코드에 아래 명령문을 추가해봅시다.

 

delete indigo.address;
console.log(indigo.address);

 

위 코드를 실행하면 undefined가 출력됩니다. 이제 indigo 객체에서 address라는 프로퍼티는 삭제된 것을 확인할 수 있습니다. 단, delete 키워드는 객체의 프로퍼티만을 삭제해줄 뿐, 객체 자체를 삭제할 수 없다는 점을 기억해 둡시다.