🔍 Class & Instance

객체 지향 프로그래밍은 하나의 모델이 되는 청사진(blueprint)를 만들고, 청사진을 바탕으로 한 객체(object)를 만드는 프로그래밍 패턴으로, 현실 세계를 기반으로 프로그래밍 모델을 만들 때에 유용하다.

이때, 청사진은 Class, 객체는 Instance라고 부른다.

Class	Instance
	Avante
자동차	mini
	bettles

✔ 클래스를 만드는 방법:

일반적인 다른 함수와의 구분을 위해 대문자로 시작, 일반명사로 만든다.(일반적인 함수: 소문자 시작, 적절한 동사 포함)

//ES5
function Car(brand, name, color) {}

ES6에 클래스를 정의할 때 class 키워드를 사용하는 새로운 문법이 도입되었다. (주로 사용)

//ES6
class Car{
  constructor(brand, name, color){
  
  }
}

class Car 안의 함수는 instance가 만들어질 때 실행되는 코드로, 생성자 함수라고 부른다. 이 생성자 함수는 return 값을 만들지 않는다.

⭐ constructor?
인스턴스가 초기화될 때 실행하는 생성자 함수

✔ 새로운 Instance를 만드는 방법:

객체는 일반적인 함수를 정의하듯 만드는데, 그냥 실행하는 게 아니라 new 키워드를 이용해 만든다.

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

Instance가 만들어질 때, 즉시 생성자 함수가 실행되며 변수에 instance가 할당된다. 각각의 instance는 클래스의 고유한 속성과 메서드를 갖게된다.

👀 속성과 메서드

class에 속성과 메서드를 정의하고, instance에서 이용한다.

속성	메서드
brand name color currentFuel maxSpeed	refuel() setSpeed() drive()

위와 같이 자동차를 예시로 들면, 속성은 브랜드, 차 이름, 색상, 현재 연료상태, 최고 속력 등이 포함될 수 있고, 메서드는 객체에 딸린 함수로, 연료 주입, 속력 설정, 운정 등이 포함될 수 있다.

✔ class: 속성의 정의

class에 속성을 정의할 때, this 키워드를 이용해 정의한다.

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

this는 instance 를 의미하며 parameter로 넘어온 속성값들(위의 예시로는 brand, name, color)은 instance 생성 시 지정하는 값이다. 즉,this에 할당한다는 것은 만들어진 instance에 해당 속성값들을 부여하겠다는 의미이다.

⭐ this?
함수가 실행될 때, 해당 scope마다 생성되는 고유한 실행 context로, new키워드로 instacne를 생성했을 때, 해당 instance가 바로 this의 값이된다.

✔ class: 메서드의 정의

ES5 에서는 class에 메서드를 정의할 때 prototype이라는 키워드를 이용해 정의한다.

⭐ prototype?
모델의 청사진을 만들 때 쓰는 원형 객체(original form)이다.

// ES5
function Car(brand, name, color){
    this.brand = brand;
    this.name = name;
    this.color = color;
}
Car.prototpye.refuel = function() {
    console.log(this.name + '에 연료를 공급합니다')
}
Car.prototpye.drive = function() {
    console.log(this.name + '가 운전을 시작합니다')
}

그러나 ES6에서는 생성자 함수와 함께 class 키워드 안 쪽에 묶어서 정의한다.

//ES6
class Car{
  constructor(brand, name, color){
    this.brand = brand;
    this.name = name;
    this.color = color;
  }
  refuel(){
    console.log(this.name + '에 연료를 공급합니다')}
  drive(){
    console.log(this.name + '가 운전을 시작합니다')}
}

✔ instance에서의 사용

위에서 설정한 속성과 메서드를 instance에서 사용한다.

let avante = new Car('hyundai', 'avante', 'black');
avante.color; // 'black'
avante.drive(); // 아반떼가 운전을 시작합니다.

let mini = new Car('bmw', 'mini', 'white');
mini.brand; // 'bmw'
mini.refuel(); // 미니에 연료를 공급합니다.

✔ 실전 예제-배열

배열은 전부 Array의 instance이다.
new Array(, , ,)와 같은 방식으로도 배열을 만들 수 있으며 즉, 배열을 정의하는 것은 Array의 instance를 만들어내는 것과 같다.

let arr = ['code', 'states', 'pre'];
arr.length; // 3
arr.push('course'); // course라는 새로운 element 추가

// 위의 코드와 같다
let arr = new Array('code', 'states', 'pre');
arr.length; // 3
arr.push('course'); // course라는 새로운 element 추가

⭐ 배열 메서드(push, filter, forEach, map, unshift...)들의 구현은 모두 class의 prototype에 정의되어있다.

Array.prototype.push()
Array.prototype.filter()
Array.prototype.reduce()

Reference: 코드스테이츠