10장 객체 리터럴

해당 포스팅은 위키북스의 "모던 자바스크립트 Deep Dive"라는 책을 독학하며 기록하는 글입니다.

객체란?

원시 타입은 단 하나의 값만 나타내지만 객체 타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조이다. 또한 원시 값은 변경 불가능한 값이지만 객체는 변경 가능한 값이다.

객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키(key)와 값(value)으로 구성된다. 여기서 만약 프로퍼티의 값이 함수일 때, 일반 함수와 구분하기 위해 메서드라고 부른다.

프로퍼티 : 객체의 상태를 나타내는 값
메서드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작
인스턴스 : 클래스에 의해 생성되어 메모리에 저장된 실체, 여기서 객체는 클래스와 인스턴스를 포함한 개념이다

객체의 생성, 프로퍼티와 메서드

자바스크립트는 프로토타입 기반 객체지향 언어로서 클래스 기반 객체지향 언어와는 달리 다양한 객체 생성 방법을 지원한다.

1. 객체 리터럴
2. Object 생성자 함수
3. 생성자 함수
4. Object.create 메서드
5. 클래스(ES6)

하지만 여기서는 가장 많이 쓰이는 '객체 리터럴'을 사용한 객체 생성을 배워보도록 하자.

객체 리터럴은 중괄호({ })내에 0개 이상의 프로퍼티를 정의하며, 변수에 할당되는 시점에 자바스크립트 엔진은 객체 리터럴을 해석해 객체를 생성한다. 여기서 객체 리터럴의 중괄호는 코드 블록을 의미하지 않는다는 것에 유의해야 하고, 때문에 중괄호의 끝에는 세미콜론을 붙혀야 된다.

var person = {
  age: 20,
  name: 'Susan',
  gender: 'male',
};

프로퍼티는 나열할 때 쉼표(,)로 구분한다. 일반적으로 마지막 프로퍼티 뒤에는 쉼표를 붙히지 않지만, 붙혀도 상관없다.

프로퍼티의 키는 프로퍼티 값에 접근할 수 있는 이름으로서 식별자 역할을 한다. 하지만 반드시 식별자 네이밍 규칙을 사용할 필요는 없으며, 이럴 경우 반드시 따옴표를 사용해야 한다. (가급적 규칙을 따를 것을 권장)

자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값으로 사용할 수 있다고 했다. 자바스크립트에서 함수는 객체(일급 객체)이므로 당연히 프로퍼티 값으로 할당할 수 있으며, 이 경우 메서드라고 부른다.

프로퍼티에 대한 조작

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

//객체는 위에서 생성한 person을 그대로 사용.

console.log(person.age);  //20, 마침표 표기법 -> 객체.키
console.log(person[name]);  //'Susan', 대괄호 표기법 -> 객체[키]

2. 갱신
   이미 존재하는 프로퍼티에 대하여 값을 할당하면, 새로운 값으로 갱신된다.

person.age = 24;
console.log(person);  //{age:24, name:'Susan', gender:'male'}

3. 동적 생성
   객체를 처음 만들 때 생성하지 않은 프로퍼티라도 할당하면 자동으로 '키 : 값'형태로 생성된다.

person.address = 'Seoul';
console.log(person);  //{age:24, name:'Susan', gender:'male', address:'Seoul'}

4. 삭제
   delete라는 연산자는 객체의 프로퍼티를 삭제한다.

delete person.gender;
console.log(person);  //{age:24, name:'Susan', address:'Seoul'}

마치며...

ES6에서는 메소드를 정의할 때 function키워드를 생략한 축약 표현을 사용할 수 있는데, 이렇게 정의한 메서드는 기존의 방법으로 할당한 메서드와 다르게 동작한다고 한다. 26장에서 살펴보도록 하자.

//기존 방식
var ani = {
  var move: function() { console.log("걷는다."); }
};
ani.move();  //"걷는다."

//축약 표현
var ani = {
  var move() { console.log("걷는다."); }
};
ani.move();  //"걷는다."