[🐱 자바스크립트] 클래스와 인스턴스

자바스크립트 클래스와 인스턴스

🍎 클래스와 인스턴스란?

흔히 클래스와 인스턴스를 설명할 때 붕어빵과 붕어빵 틀에 비교하곤 한다.
클래스는 붕어빵의 틀에 해당하고, 인스턴스 객체(인스턴스)는 틀로 만들어진 붕어빵에 해당한다.

즉, 클래스를 사용하여 동일한 틀(기능,요소)을 갖는 객체 여러개를 생성할 수 있다.

---

🍎 클래스를 사용하는 이유

클래스를 사용하는 이유는 다양한 객체를 만들고, 사용하기 위함이다. 즉 유연성에 초점을 둔다.

아래 코드와 같이 하나의 변수에 대해서만 메서드 호출이 가능해진다면 동일한 기능을 수행하는 다른 변수를
만들 경우 일일히 새로 변수를 만들고 변수에 메서드를 할당해야 하는 불상사가 생긴다.

let counter1 = {
  value: 0,
  increase: function() {
    this.value++ 
  },
  decrease: function() {
    this.value--
  },
  getValue: function() {
    return this.value
  }
}

---

🍎 클로저 모듈 패턴

아래는 클로저 모듈 패턴의 예이다.

이제 일일히 변수에 메서드를 선언할 필요 없이 변수에 makeCounter 함수의 호출문을 할당하면
여러개의 변수를 생성함과 동시에 사용할 수 있게 된다.

클래스는 다음과 같은 기능을 수행한다.
하지만 아래의 예시는 클래스는 아니며 클래스의 기능을 비슷하게 구현하는 함수의 예시이다.

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

---

클래스와 인스턴스의 생성

🍎 새로운 클래스 생성하기

클래스는 일종의 함수이며, class선언을 통해 생성한다.

새롭게 도입된 ES6에서 클래스를 생성하는 방법은 다음과 같다.

• class 키워드를 작성 후, 클래스의 이름을 선언해준다.
• constructor 키워드의 parameter로 넘어온 height, width은 인스턴스 생성 시 지정하는 값이다.
• this에 할당한다는 것은 만들어진 인스턴스에 height, width을 부여하겠다는 의미이다.

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
 }
}

---

🍎 새로운 인스턴스 생성하기

let rectangle1 = new Rectangle(100,150);

new 키워드를 통해 생성자 함수가 실행되며 변수에 클래스의 설계를 가진 인스턴스가 할당된다.

• 클래스는 보통 대문자로 시작하며 일반 명사로 만든다.
• 일반적인 함수는 적절한 동사를 포함하고 소문자로 시작한다.

위와 같이 let rectangle1 = new Rectangle(100,150); 를 작성하면
Rectangle 클래스의 새로운 인스턴스를 생성하여 변수 rectangle1에 할당한다.
이 때 인스턴스의 width,height 값은 각각 100, 150이다.

---

인스턴스 속성 & 메서드 정의

각각의 인스턴스는 클래스의 고유한 속성과 메서드를 갖는다.

🍎 인스턴스 속성 정의

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
 }
}

사실 위에서 이미 클래스 속성은 정의를 해 둔 상태이다.

• constructor 메서드는 class 로 생성된 객체를 생성하고 초기화하기 위한 특수한 메서드이다.
  constructor 메서드의 parameter값인 height, width가 인스턴스의 속성에 해당한다.
  ("constructor" 라는 이름을 가진 특수한 메서드는 클래스 안에 한 개만 존재할 수 있다.)

• this에 할당한다는 것은 만들어진 인스턴스에 height, width을 부여하겠다는 의미이다.

---

🍎 클래스 메서드 정의

클래스 body 내부에 메서드를 정의할 수 있다.
메서드는 클래스 내부에 정의된 함수라고 생각하면 쉽다.

• get 키워드는 객체의 속성을 꺼내기 위해서 사용한다.

• set 키워드는 사용자가 속성에 값을 저장할때 실행한다. 저장 값에 제약을 두기 위해서 많이 사용한다.

• Rectangle 클래스 내부에 calcArea 메서드가 선언되어 있다. Rectangle 클래스의 속성 값을 받아 결과를 return 해주고 있다.
  클래스 메서드의 호출은 클래스 인스턴스가 할당된 변수.메서드로 사용한다.

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // 메서드
  calcArea() {
    return this.height * this.width;
  }
}

const square = new Rectangle(10, 10);

console.log(square.area); // 100

---

자바스크립트 클래스 관련 용어

prototype

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

[관련 포스팅]
https://velog.io/@bommy5799/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85-prototype

constructor

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

this

함수가 실행될 때 해당 scope 마다 생성되는 고유한 실행.