클래스(Class)와 인스턴스(Instance)

---

객체 지향 프로그래밍(Object-oriented programming)

우선 객체(object)란 두 종류의 정보를 담고 있는 집합체를 뜻한다. 즉, 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료 구조이다.

 

객체에 담긴 두 종류의 정보

• 속성(attributes, properties) : 상태(state)를 나타내는 데이터
• 메서드(method) : 행동(behavior)을 나타내는 데이터

 

객체 지향 프로그래밍은 프로그램을 ‘객체’들의 모임으로 본다. 하나의 모델이 되는 청사진(blueprint)를 만들고, 그 청사진을 바탕으로 한 객체(object)를 만드는 프로그래밍 패턴이다. 모델이 되는 청사진을 클래스(class), 청사진을 토대로 만들어진 객체를 해당 클래스의 인스턴스(instance)라고 한다.

 

 

 

 

 

---

클래스(class)와 인스턴스(instance)

클래스는 쉽게 말해 ‘설계도’나 ‘틀’에 비유할 수 있다. 자동차를 만든다고 가정해 보자. 자동차가 기능하기 위해서는 바퀴, 핸들, 좌석, 엔진 등이 필요하다. 차의 종류에 상관없이 대부분 동일하게 적용되는 기본적인 설계이다. 이런 설계도를 바탕으로 만들어진 자동차는 다양한 브랜드, 이름, 색상 등 특정한 모델이 된다

여기서 설계도는 클래스(class), 이 설계도를 바탕으로 만들어진 각각의 자동차들이 인스턴스(instance)가 된다.

 

 

JS에서 클래스 만들기

JS에서 클래스는 두 가지 방법으로 만들 수 있다. 첫 번째는 ES6 도입 전 함수를 정의하듯 만드는 방법이다. 두 번째는 ES6(ECMAScript 6)에서 도입된 class 키워드를 이용하는 것이다. class 키워드를 이용해 만든 함수는 객체 지향 프로그래밍에서 생성자(constructor) 함수라고 부른다. (참고: 생성자 함수는 return 값을 만들지 않는다)

통상적으로 일반적인 함수를 만들때는 소문자로 시작하며 적절한 동사를 포함한다. 구분되도록 class를 만들 때는 대문자로 시작하며 일반명사로 만든다.

// ES5에서 클래스는 함수로 정의할 수 있다.
function Car(brand, name, color) {
	// 인스턴스가 만들어질 때 실행되는 코드 입력 예정
}

// ES6에서는 class 키워드를 이용해 정의할 수도 있다.
class Car {
	constructor(brand, name, color) {
	// 인스턴스가 만들어질 때 실행되는 코드 입력 예정
}

 

 

JS에서 인스턴스 만들기

클래스를 만드는 것만으로는 아무 일도 일어나지 않는다. 클래스의 인스턴스를 만들어야만 실제 클래스를 기반으로 한 객체가 생성되는 것.

인스턴스를 만들 때는 new 키워드를 이용한다. 생성자 함수를 사용하여 객체를 만들 때 함께 사용하는 키워드이다. new 키워드를 사용하면 즉시 생성자 함수가 실행되며, 해당 변수에는 클래스의 속성을 가진 새로운 객체인 인스턴스가 할당된다. 각각의 인스턴스는 클래스의 고유한 속성과 메서드를 갖는다.

class Car {
	constructor(brand, name, color) {
	// 인스턴스가 만들어질 때 실행되는 코드
}

let avante = new Car('hyundai', 'avamte', 'black')
let mini = new Car('bmw', 'mini', 'white')
let beetles = new Car('volkswagen', 'beetles', 'red')

// avante, mini, beetles 각각의 인스턴스는 Car라는 클래스의 고유한 속성과 메서드를 갖는다

 

 

 

 

---

속성과 메서드

객체에는 속성과 메서드라는 종류의 정보가 담겨 있다. 처음엔 다소 낯설 수 있지만, 이 용어를 현실에 한번 대치해 보자.

• 속성(attributes, properties) : 상태(state)를 나타내는 데이터
• → 자동차의 브랜드, 차 이름, 색상, 현재 연료 상태, 최고 속력 등
• 메소드(method) : 행동(behavior)을 나타내는 데이터
• → 자동차의 연료 주입, 속력 설정, 운전하기 등 → 쉽게 말하면 ‘객체에 딸린 함수’

우리는 클래스에 속성과 메서드를 정의하고 → 인스턴스에서 이용한다. 이런 객체 지향 프로그래밍은 현실을 기반으로 프로그래밍 모델들 만들 때 유용하다.

 

 

클래스에서 속성 정의하기

this란 객체지향 프로그래밍에 빠지지 않고 등장하는 키워드로, 함수가 실행될 때 해당 scope마다 생성되는 고유한 execution context(실행 컨텍스트)이다. new 키워드로 인스턴스를 생성했을 때는 해당 인스턴스가 바로 this의 값이 된다. 한마디로 말하면 인스턴스 객체이다.

parameter로 넘어온 브랜드, 이름, 색상 등은 인스턴스 생성 시 지정하는 값이며, 아래와 같이 this에 할당한다는 것은 만들어진 인스턴스에 해당 브랜드, 이름, 색상을 부여하겠다는 의미다.

// ES5
function Car(brand, name, color) {
	this.brand = brand;
	this.name = name;
	this.color = color;
}

// ES6
class Car {
	constructor(brand, name, color) {
		this.brand = brand;
		this.name = name;
		this.color = color;
	}
}

 

 

클래스에서 속성 정의하기

ES5에서 메서드를 추가하기 위해서는 ‘Car.prototype.refuel’같이 ‘prototype’을 이용해야만 했다.

• prototype : 모델의 청사진을 만들 때 쓰이는 원형 객체(original form)

ES6에서는 생성자 함수와 함께 class 키워드 안쪽에 묶어서 정의한다. ‘refuel(){}’, ‘drive(){}’로 작성된 영역을 보자.

// ES5
function Car(brand, name, color) {
	this.brand = brand;
	this.name = name;
	this.color = color;
}
Car.prototype.refuel = function() {
	// 연료 공급을 구현하는 코드
}
Car.prototype.drive = function() {
	// 운전을 구현하는 코드
}

// ES6
class Car {
	constructor(brand, name, color) {
		this.brand = brand;
		this.name = name;
		this.color = color;
	}
	refuel() { // 연료 공급을 구현하는 코드 }
	drive() { // 운전을 구현하는 코드 }
}

 

정의한 속성과 메서드를 인스턴스에서 사용하기

let avante = new Car('hyundai', 'avamte', 'black');
avante.color; // 'black'
avante.drive; // 아반떼 운전 구현 함수 실행

let mini = new Car('bmw', 'mini', 'white');
mini.brand; // 'bmw'
mini.refuel(); // 미니의 연료 공급 함수 실행

 

 

 

 

---

참고 링크

• [JS] 클래스, 인스턴스, 정적 메소드, 그리고 서브클래스
• 위키백과 - 객체 지향 프로그래밍