[JavaScript] 객체 리터럴을 이용한 객체 생성

*개인적인 공부 내용을 기록하는 용도로 작성한 글 이기에 잘못된 내용을 포함하고 있을 수 있습니다.

 

#객체

#프로퍼티 생성

#프로퍼티 접근

#프로퍼티 삭제

#메서드와 this

 

Reference :

메서드와 this (javascript.info)

객체 (javascript.info)

모던 자바스크립트 Deep Dive 10장 객체 리터럴 124p~135p 

---

#객체

자바스크립트는 프로토타입 기반 객체지향 언어로 C++, JAVA, C# 등과 같은 클래스 기반 객체지향 언어와 달리 다양한 객체 생성 방법을 지원한다. (객체 리터럴, Object 생성자, 생성자 함수, 클래스 등..)

이번 포스팅에서는 객체를 생성하는 가장 기본적인 방식인 객체 리터럴에 대해 정리해 보고자 한다.

 

#프로퍼티 생성

객체는 중괄호{...}를 이용해 만들 수 있으며 중괄호 안에는 키(key)와 값(value)으로 구성된 프로퍼티(property)를 여러개 넣어 구성할 수 있다.

var warrior = {
    level: 10,
    hp: 100,
};

 

warrior 객체는 두개의 프로퍼티로 구성되어 있다. 프로퍼티를 나열할 때는 쉼표(,)로 구분한다. (마지막 프로퍼티 뒤에는 쉼표를 사용해도 사용하지 않아도 상관 없다.) 콜론(:)을 기준으로 좌측에는 키(key)가 오고 우측에는 값(value)이 온다. 키에는 문자열이 들어가며 값에는 JS에서 사용 가능한 모든 값을 대입할 수 있다.

var warrior = {
    level: 10,
    hp: 100,
};

 

유의 해야할 점은 객체 리터럴의 중괄호는 코드 블록을 의미하지 않는다는 것이다. 객체 리터럴은 "값"으로 평가되는 표현식 이기에 반드시 객체 리터럴의 중괄호 뒤에는 세미콜론(;)을 붙여 주어야만 한다.

 

#프로퍼티 접근

warrior.level; // dot notation
warrior["level"]; // bracket notation

프로퍼티에 접근하는 방법은 마침표 프로퍼티 접근 연산자(.)를 사용하는 마침표 표기법(dot notation)과 대괄호 프로퍼티 접근 연산자([...])를 사용하는 대괄호 표기법(bracket notation)으로 나뉜다.

대괄호 표기법을 이용해 객체의 프로퍼티에 접근하고자 할 때는 반드시 키를 따옴표로 감싸 주어야만 한다. 따옴표를 생략한 뒤 키에 접근하면 에러가 발생한다.

warrior[level]; (x)
// VM381:1 Uncaught ReferenceError: level is not defined at <anonymous>:1:9

 

#프로퍼티 삭제

delete 연산자를 이용해 객체의 프로퍼티를 삭제할 수 있다. 만약 존재하지 않는 프로퍼티를 삭제하고자 하면 에러를 발생시키지 않고 무시한다.

var warrior = {
    level: 10,
    hp: 100,
};

delete warrior.level;
delete warrior["hp"];

 

#메서드와 this

함수 또한 프로퍼티의 값으로 대입할 수 있다. 프로퍼티의 값이 함수일 경우 일반 함수와 구분하기 위해서 메서드(method)라고 부른다. 

var warrior = {
    level: 10,
    hp: 100,
    attack: function(){
        console.log("warrior Attack!");
    }
};

 

ES6부터는 function 키워드를 생략한 축약 표현을 사용할 수 있다.

var warrior = {
    level: 10,
    hp: 100,
    attack(){
        console.log("warrior Attack!");
    }
};

 

보통 메서드를 정의할 때 객체 내부의 값(프로퍼티)을 활용하는 경우가 많다. 메서드 내부에서 this키워드를 이용하면 객체에 접근할 수 있다.

var warrior = {
    level: 10, // property
    hp: 100, // property
    printLevel(){ // method
        console.log(this.level);
    }
};

warrior.printLevel(); // 10