객체지향 프로그래밍(Object Oriented Programming in JavaScript)

자바스크립트에서의 객체지향에 대해 알아보고자 한다.

객체 지향 프로그래밍이란?

하나의 모델이 되는 청사진(blueprint)를 만들고, 그 청사진을 바탕으로 한 객체(object)를 만드는 프로그래밍 패턴이다.

출처: CodeStates

이런 그림이 있다고 했을 때, 자동차를 만들땐 엔진, 바퀴, 좌석 등 모든 자동차가 공통적으로 필요한 부분들을 청사진으로 만들어두고 새로운 자동차를 만들때 그 청사진을 가져다가 쓰는 방식으로 사용한다.

이 때, 청사진을 Class 만드려던 새로운 자동차 즉, 객체를 Instance라고 부른다.

사실, 이미 자바스크립트에는 "객체"라는 말이 존재하기 때문에 OOT에서의 용어와 잘 구분하는 것이 중요하다.

인스턴스를 만드는 방법으로는 일반적인 함수를 정의하는 만들 수 있다.

function Car(color) { };	// 클래스 생성

// 인스턴스 생성
let avante = new Car('blue');
let mini - new Car('cyan');
let beetle = new Car('red');

클래스 함수를 이용할 때는 new 키워드와 함께 사용한다. 클래스함수와 일반적인 함수를 구분하는 암묵적인 방법으로는 클래스는 보통 대문자와 일반명사 조합으로 선언한다. 그러므로 일반적인 함수에는 적절한 동사와 함께 소문자로 선언하는 것이 좋다.

ES5 - 클래스는 함수로 정의 가능

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

ES6 - class 키워드 활용

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

최근에는 ES6에 도입된 방법을 사용하고, 여기서 보이는 함수는 OOT에서 생성자 함수라고 부르고 인스턴스가 만들어질 때 실행된다. 생성자 함수는 return 값을 만들지 않는다.

new 키워드로 인스턴스 생성

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

생성과 동시에 생성자 함수가 실행되며, 변수에 class의 설계와 같은 새로운 객체(인스턴스)가 할당된다. 각각의 인스턴스는 클래스의 고유한 속성과 메소드를 갖는다.