[JavaScript] 객체 리터럴

1. 객체란?

자바스크립트는 객체 기반 프로그래밍 언어이고, 자바스크립트를 구성하는 거의 모든 것이 객체이다. 원시값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체이다.

객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성된다.

var person = {
  name: 'Lee',
  age: 20
};

여기서 "name: 'Lee'", "age: 20"이 바로 프로퍼티에 해당된다. 각각 age,name은 프로퍼티의 키, 'Lee',20은 프로퍼티 값에 해당된다. 프로퍼티 값이 함수일 경우에는 일반 함수랑 구분하기 위해 메서드라 부른다.

var counter = {
  num : 0,
  increase: function() {
    this.num++;
  }
};

이와 같이 객체가 프로퍼티와 메서드로 구성된 집합체임을 알 수 있다. 메서드는 사전적 정의로 프로퍼티를 참조하고 조작할 수 있는 동작이라고 볼 수 있다.

2. 객체 리터럴에 의한 객체 생성

자바스크립트는 프로토타입 기반 객체지향 언어로서 다양한 객체 생성 방식(객체 리터럴, Object 생성자, 생성자, Object.create 등)을 지원한다. 그 중에서 객체 리터럴은 중괄호({...}) 내에 0개 이상의 프로퍼티를 정의한다.

var empty = {}; // 빈 객체 생성

var person = {
  name : 'dejavu',
  sayHello: function() {
    console.log('Hello! My name is ${this.name}.')
  }
};

console.log(typeof person); // object
console.log(person); // {name: "dejavu, sayHello: f}

객체 리터털의 중괄호는 코드 블록을 의미하지 않는다. 따라서 객체 리터럴은 값으로 평가되는 표현식이기 때문에 닫는 중괄호 뒤에 세미콜론을 붙여야 한다.

3. 프로퍼티

1) 프로퍼티 값 접근

프로퍼티에 접근하는 방식은 다음과 같이 두 가지이다.
1) 마침표 표기법
2) 대괄호 표기법

var person = {
 name : 'Lee'
};
console.log(person.name); // Lee
console.log(person[name]); // ReferenceError
console.log(person['name']); // Lee

대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 한다. 또한 식별자 네이밍 규칙을 준수하지 않은 이름, 즉 자바스크립트에서 사용 가능한 유효한 이름이 아니면 반드시 대괄호 표기법을 사용해야 한다.

2) 프로퍼티 값 갱신

var person = {
  name : 'Lee'
};

person.name = 'Kim';
console.log(person); // {name:"kim"}

다음과 같이 이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신된다.

3) 프로퍼티 동적 생성 및 삭제

var person = {
  name : 'Lee'
};

person.age = 20;
console.log(person); // {name: "Lee", age: 20}

delete person.age;
console.log(person); // {name: "Lee"}

다음과 같이 age 프로퍼티가 존재하지 않기 때문에 age 프로퍼티가 동적으로 생성되고 값이 할당됨을 볼 수 있다. 또한 delete 연산자로 프로퍼티를 삭제할 수 있다. 존재하지 않는 프로퍼티를 delete할 경우에는 따로 에러가 발생하진 않는다. ex. delete person.adress