[JavaScript]클래스와 인스턴스

오늘은 객체지향형 프로그래밍의 기본이 되는 클래스와 인스턴스에 대해서 정리를 하고자 합니다.

클래스

클래스란 하나의 모델이 되는 청사진(blueprint)입니다. 다르게 말하면 어떤 기능을 만드는 설계도라 할수 있습니다. 예를 들면 자동차를 만들기 위한 설계도에는 엔진, 바퀴 등 필수적으로 들어가는 부품과 차량이 움직이고 멈추는 기능적인 부분을 구현해야합니다. 이러한 설계 요소들이 클래스에 명시 됩니다.

자바스크립트에서 클래스를 정의하는 방법은 두 가지가 있습니다.

[ES5] 함수로 정의

클래스를 만들 경우 기존 함수와는 다르게 함수 이름의 첫 글자는 대문자로 만듭니다. 아래는 함수로 생성자 함수를 구현한 모습입니다.

생성자 함수에서 매개변수를 받아 객체에 매개변수 값을 전달해 줄 수 있습니다. 블록 내의 this가 가리키는 대상은 객체 바로 자신입니다.

함수형 클래스의 경우 prototype 객체에 메소드를 정의합니다. 아래의 코드에서 Car.prototype가 prototype 객체입니다. prototype에 대한 개념은 다음 포스팅에 정리하도록 하겠습니다.

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

Car.prototype.drive = function () {
   console.log('run')
}

[ES6] Class 키워드로 정의

클래스 키워드를 사용할 경우 생성자(constructor) 함수를 클래스 내부에 선언해 줍니다. 생성자 함수의 경우 별도의 리턴값을 반환하지 않습니다.

class Car {
  constructor(name, color) {
  this.name = name;
  this.color = color;  
  }
  
  drive() {
    console.log('run')
  }
}

인스턴스

클래스를 바탕으로 만들어지는 객체를 인스턴스 객체라고 합니다. 예를들어 현대 자통차에서 AVANTE, SONATA 등 여러 차량종류를 생산하는 경우, 현대자동차에서 차량을 만드는 설계도는 클래스이며, 그 설계도를 바탕으로 생산되는 AVANTE 차량은 인스턴스입니다.

new 키워드로 인스턴스 생성

class에서 선언한 매개변수 값이 새로 생성한 인스턴스 값으로 잘 전달 되는 것을 알 수 있습니다. 또한 클래스에 선언한 메소드도 잘 실행이 됩니다.

const myCar = new Car('anvante', 'blue');
console.log(myCar) // Car {name: 'anvante', color: 'blue'}
myCar.drive() // 'run'

클래스의 활용

클래스라는 단어를 처음 접하면 생소하게 들릴 수 있겠지만 그동안 코드를 작성하며 클래스를 많이 사용해 왔습니다. 예를 들어 배열을 사용할 때, 단순하게 대괄호를 이용하여 선언했지만, 이 작업은 Array 클래스의 인스턴스 객체를 생성하는 것과 동일합니다.

const arr = [];
const arr = new Array();

배열에 사용하던 많은 메소드들은 Array.prototye 객체에 정의되어 있습니다. 브라우저 개발자 도구에서 Array.prototpye을 확인해 보면 많은 내장 메소드를 확인할 수 있습니다.