객체 지향 프로그래밍(OOP) - class와 instance

클래스와 인스턴스

자동차를 만들 때는 기본적으로 네 바퀴와 핸들,좌석,엔진 등 동일하게 적용되는 요소들이 있다. 그리고 이를 바탕으로 각각의 객체가 특정한 모델로 나오게된다.
이때 기본적인 자동차의 청사진을 class, 새로운 객체를 만드는 프로그래밍 패턴을 instance이라고 비유할 수 있다.

클래스를 정의하는 방식은 다음과 같다.

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

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

이렇게 class를 생성한 다음에 class의 속성과 메소드를 상속받는 새로운 객체인 인스턴스를 생성하는데 그 과정은 다음과 같다.

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

인스턴스를 만들 때에는 new라는 키워드를 사용하며 각각의 인스턴스는 class의 고유한 속성과 메서드를 갖게 된다.

class: 속성의 정의

<ES5>
function Car (brand, name, color) {
  this.1️⃣brand = 2️⃣brand; 
  this.name = name;
  this.color = color;
}

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

여기서는 this라는 새로운 키워드가 나타난다.
우선 위의 속성 정의 코드를 말로 풀어보자면 "호출된 인스턴스 객체의 1️⃣brand는 인스턴스를 생성할 때 parameter로 넘어온 2️⃣brand이다."라고 설명할 수 있다.

class: 메소드의 정의

class의 메소드를 정의하는 방법에서 ES5와 ES6의 큰 차이점은 prototype이라는 키워드의 여부이다.

<ES5>
function Car (brand, name, color) {속성 정의 코드}
Car.prototype.refuel = function() {
	console.log(this.name + "에 주유를 시작."
}
Car.prototype.drive = function () {
	console.log(this.name + "가 운전을 시작."
}
  
<ES6>
class Car {
  constructor(brand, name, color) {속성 정의 코드}
    
  refuel() {
	console.log(this.name + "에 주유를 시작."
  }
  
  drive() {
	console.log(this.name + "가 운전을 시작."
  }
}

인스턴스에서의 사용

class와 instance를 생성하고 속성과 메소드의 정의까지 했다면 인스턴스를 다음과 같이 사용할 수 있다.

let avante = new Car('hyundai', 'avante', 'black'); // 인스턴스 생성
avante.color; // "black"
avante.drive() // avante가 운전을 시작.

let mini = new Car('bmw', 'mini', 'white'); // 인스턴스 생성
mini.brand; // "bmw"
mini.refuel() // mini에 주유를 시작.

실전 예제

위에서 나왔던 내용들은 사실 이미 굉장히 많이 사용되고 있었다. 대표적인 예로는 배열을 정의하고 길이를 구하거나 요소를 추가하는 등의 행위도 기존의 Array라는 class가 존재하고 Array()생성자를 통해 배열을 생성하고 Array클래스에 있는 속성이나 메소드를 사용하는 것이다.

let arr = new Array(1,2,3); => let arr = [1,2,3]; 
arr.length; // 3
arr.push(4) // [1,2,3,4]

mdn의 메소드 설명에 Array.prototype.push()와 같이 prototype이 붙어 있는 이유도 push()의 구현이 원형 객체에 정의되어 있기 때문이다.