S2) Unit 2. [JS] 클래스와 인스턴스

📣 클로저 모듈 패턴

✔️ 메서드 호출 : 객체.메서드()

✔️ 클로저를 이용해 매번 새로운 객체 생성하기

function makeCounter() {
  let value = 0;
  return {
    increase: function() {
      value++;
    },
    decrease: function() {
      value--;
    },
    getValue: function() {
      return value;
    }
  }
}

let counter1 = makeCounter()
counter1.increase()
counter1.getValue() // 1

let counter2 = makeCounter()
counter2.decrease()
counter2.decrease()
counter2.getValue() // -2

➰ 클로저로 counter 생성하는 함수를 만들어서, 매번 객체를 생성할 필요 없이 구현할 수 있다.

📣 객체 지향 프로그래밍

✔️ 하나의 모델이 되는 청사진을 만들고(class), 청사진을 바탕으로 한 객체를 만드는(instance) 프로그래밍
✔️ 변수 타입 '객체'와 여기서 배우는 클래스를 바탕으로 한 '인스턴스 객체'(인스턴스) 를 잘 구분하자.

📣 인스턴스

✔️ new 키워드를 통해 클래스의 인스턴스를 만들어낼 수 있다.

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

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

✔️ 배열은 전부 Array의 인스턴스

let arr = new Array('jieun', 'happy', 'today');
arr.length; // 3
arr.push('tomorrow');

➰ 배열은 인스턴스 이므로 위 코드처럼 할당할 수 있다.
➰ push, filter 등의 메서드 모두 클래스의 원형 객체(prototype)에 정의되어 있다.

📣 속성과 메서드

✔️ 클래스에 속성과 메소드를 정의하고, 인스턴스에서 사용한다.

1️⃣ 속성
➰ 자동차의 브랜드, 차 이름, 색상 등
➰ brand, name, color...

2️⃣ 메서드
➰ '객체에 딸린 함수' : 속력설정, 운전 등
➰ setSpeed(), drive()...

📣 클래스

✔️ ES5 ) 함수로 정의할 수 있다.

function Car(brand, name, color) {
}

✔️ ES6 ) class라는 키워드를 이용해서 정의할 수도 있다.

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

➰ constructor : 생성자 함수로, 인스턴스가 만들어질 때 실행되는 코드이며 return 값을 만들지 않는다.

✔️ 속성의 정의

//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;
  	}
}

➰ this : 인스턴스 객체를 의미한다.
➰ 파라미터로 넘어온 변수는 인스턴스 생성 시 지정하는 값이며,
this에 할당한다는 것은 만들어진 인스턴스에 해당 속성을 부여하겠다는 것이다.

✔️ 메서드의 정의

//ES5
function Car(brand, name, color) {
}
Car.prototype.setSpeed = function() {
}
Car.prototype.drive = function() {
}

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

➰ ES5는 prototype을 사용해서 정의하고, ES6은 class 안쪽에 묶어서 정의한다.

✔️ 속성과 메서드 인스턴스에서 사용하기

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

➕ 용어 정리

✔️ prototype : 모델의 청사진을 만들 때 쓰는 원형 객체

✔️ constructor : 인스턴스가 초기화될 때 실행하는 생성자 함수

✔️ this : 함수가 실행될 때, 해당 scope 마다 생성되는 고유한 실행 context

new 키워드로 인스턴스를 생성했을 때는 해당 인스턴스가 바로 this의 값