[Javascript] 객체와 클래스

이제 객체지향에 대해 한발짝 더 전진할 시간입니다.

예전에 객체에 대해서 정말 간단하게 설명한적이 있었는데 이번 포스트 부터 그 객체를 자세하게 다뤄보도록 하겠습니다.

---

0. 객체

객체란 속성(프로퍼티)과 행위(메소드)를 가진 물체(오브젝트)입니다. 하나 더 붙이자면 이름도 붙일 수 있어야하죠.

 

이 포스트 이전까지 객체를 다음과 같이 생성했었습니다.

let car = {
	name: 'sedan',
   	color: 'yellow',
    	drive: function() {
    		console.log("부릉");
    	}
}

console.log(car.name);
car.drive();

 

이러한 방식을 객체 리터럴 방식이라고 말했었습니다. 이 객체 리터럴 방식은 새로운 객체를 생성할 때 마다 전부 새롭게 입력해야하고, 런타임때 객체 생성이 어렵다는 점을 가지고 있습니다. 그래서 이용하는 것이 '클래스'라는 개념입니다.

 

 

 

1. 클래스?

클래스는 비슷한 형태를 가진 '객체를 정의한 것', '객체를 만드는 틀'이라고 표현을 하기도 합니다. 제가 공부하면서 읽었던 문서들이나 책에서는 흔히 붕어빵과 틀에 비유합니다.

클래스는 붕어빵을 찍어낼 수 있는 붕어빵틀이고, 객체는 붕어빵틀로 찍어낸 붕어빵입니다. 붕어빵(객체)의 속(프로퍼티와 메소드)에 따라서 팥, 슈크림 등 다양한 붕어빵을 만들 수 있습니다.

 

사실 자바스크립트는 인스턴스와 인스턴스화개념이 있지만 클래스라는 개념은 존재하지 않습니다. 그 대신 프로토타입이라는 개념을 가지고 다룹니다. 자바스크립트는 클래스 대신에 프로토타입(객체 모형)이란걸 이용하는데 이러한 점 때문에 자바스크립트를 프로토타입 베이스의 객체지향 언어라고 합니다. 이것이 자바스크립트가 객체지향 언어이면서 동시에 다른 객체지향 언어와 차별점을 가지게 되는 이유입니다.

 

...라고 했지만 ES2015에 들어오면서 자바스크립트에 class명령이 등장하게 되어 클래스 베이스 객체지향 언어에서 사용하던 방식을 사용할 수 있게 되었습니다. 그래서 이전 방식은 간단하게 소개만하고 class명령을 이용한 클래스위주로 풀어나가보려 합니다.

 

이번 포스트에서는 간단하게 ES2015이전 문법을 다룰려고 합니다.

 

 

 

2. 클래스 생성과 초기화 (ES2015 이전 구문)

우선 ES2015이전의 클래스 생성법을 알아보겠습니다.

let Car = function() {
};

let car = new Car();	//<--Car()는 생성자!

변수에 함수를 대입한것 처럼 보이지만 이것이 가장 기본적인 클래스의 생성방법이었습니다. 밑에서 new연산자를 통해 인스턴스화 시키는 것을 보여주고 있습니다. 또한 클래스는 변수와는 다르게 이름을 대문자로 시작하게 됩니다.

이 방법은 function()에 클래스의 역할을 준다라고 이해하면 됩니다.

 

생성자란 인스턴스화를 시키는 과정에서 객체의 초기화를 실시하는 메소드입니다. 위의 예제에서 객체를 생성하는 Car()가 생성자라고 할 수 있습니다.

 

생성자를 통해 객체의 초기화를 실시한다고 했는데 위의 예제를 초기화 해보면 다음과 같은 구문이 생성됩니다.

let Car = function(kinds, color) {
    this.kinds = kinds;
    this.color = color;
    this.start = function () {
        return '부르릉';
    }
};

let car = new Car('sedan', 'yellow');

console.log(car.kinds);
console.log(car.color);
console.log(car.start());

 

 

+2. 생성자

생성자라는 단어가 위의 단락에서 등장했는데, 생성자란 인스턴스를 생성할 때 생성된 인스턴스를 초기화 하기 위한 메소드입니다. 위의 경우에서는 function() 명령에 생성자의 역할을 부여하고 있습니다.

 

 

3. this

위의 구문에서 갑자기 this라는 것이 등장했습니다. this키워드는 여러곳에서 쓰이며 사용처에 따라 의미가 조금씩달라집니다. 그러나 지금은 생성자에서 사용되고 있기에 this는 생성자로 생성되는 인스턴스, 즉 객체 자기자신을 가리키는 키워드입니다. 우리는 생성자에서 클래스의 프로퍼티에 직접 접근하기를 지양하기로 했으므로 this키워드를 통해 변수를 지정하여 인스턴스의 프로퍼티를 설정하게 됩니다.

 

//this키워드를 통한 프로퍼티의 설정
this.프로퍼티명 = 값;

 

this란게 처음 만나면 굉장히 모호한 개념입니다. 저도 다른 언어를 통해 처음으로 객체 지향구문을 접하면서 this라는게 모호해서 헤맸던적이 있었습니다. 그러나 잘 생각해보면 위의 문단의 설명만큼 간단하다고 할 수 있는 키워드입니다. 읽고도 모호하다면 지금은 우선 다음 문장 한 줄만 기억해두세요.

클래스 생성자 내부에서 사용된 this는 자기자신을 가리키고, this를 통해 인스턴스의 프로퍼티에 접근한다.

 

 

this 키워드에 대한 추가적인 설명은 다음 포스트를 참조해주세요.

2021.03.18 - [Programming/Javascript] - [Javascript] this

[Javascript] this

---