JS_기본 문법 (25)_ 클래스

2023.03.31 - [🌌 | WEB DEV/Vanilla JS] - JS_기본 문법 (24)_ 생성자 함수

 

저번에 다루었던 생성자 함수에 이어서 이번에는 클래스에 대해서 알아보자!

 

1. 클래스

// 클래스
class Player {
  constructor(name, job){
    this.name = name;
    this.job = job
  }
  info () {
    return `소환사명 : ${this.name} | 직업군 : ${this.job}`;
  }
}

 

const player1 = new Player('Kassid', '전사');
const player2 = new Player('Nyang', '마법사');

console.log(player1, player1.info());
console.log(player1, player2.info());

>>> Player {name: 'Kassid', job: '전사'} '소환사명 : Kassid | 직업군 : 전사'
>>> Player {name: 'Kassid', job: '전사'} '소환사명 : Nyang | 직업군 : 마법사'

이처럼 생성자 함수로 객체를 생성했던 것과 동일하게 객체가 만들어지고 그 기능이 잘 작동하는 것을 알 수 있다.

 

 

하지만 생성자 함수와 프로토타입 기반으로 만드는 객체와

클래스로 생성하는 객체는 차이가 존재한다!

 

생성자함수와 클래스의 차이

차이 1) 호이스팅 시

함수 선언 방식의 생성자 함수는 호이스팅이 이루어질 때 초기화가 함께 진행되어

의도대로 '호이스팅'(선언부가 아래에 있어도 정상 호출되는 것을 의미)이 발생하지만

 

클래스는 uninitialized로 초기화가 되기때문에 ReferenceError를 반환한다.

cosnt p1 = new Player('Kassid', '전사');

class Player{
  constructor(name, job) {
    this.name = name;
    this.job = job;
  }
  info () {
    return `소환사명 : ${this.name} | 직업군 : ${this.job}`;
  }
}

>>> Uncaught ReferenceError: Player is not defined

 

자세한 내용▼

2023.03.31 - [🌌 | WEB DEV/Vanilla JS] - JS_기술 (3)_ Hoisting(호이스팅) 뿌수기

 

 

차이 2) new 연산자를 사용하지 않았을 때

클래스는 new 연산자를 사용하지 않는 경우 TypeError를 반환한다.

const p2 = Player('Tom', '궁수');

>>> Uncaught TypeError: Class constructor Player cannot be invoked without 'new'

반면 생성자 함수는 undefined를 반환한다.

(이는 ES6이후 만들어진 문법들은 '엄격모드'라는 것이 적용되어 있기 때문이라고 한다!)

 

 

차이 3) 메서드 정의 위치

생성자 함수와 클래스의 메서드는 각각 정의된 위치가 다르다.

function Person1 (){
  this.say(){
    return '안녕하세요';
  }
}

const p1 = new Person1();
console.log(p1);

class Person2{
  say(){
    return '안녕하세요';
  }
}

const p2 = new Person2();
console.log(p2);

위 코드의 결과는 아래와 같다.

생성자 함수

클래스

생성자 함수에서의 메서드는 객체 그 자체에 저장하지만

클래스는 프로토타입 내부에 저장한다.

 

이 둘의 차이는

객체 자체에 저장되어 있으면 그 내부에서 기능을 하는 것이라면

프로토타입에 있는 경우 클래스 그 자체에서 가져다가 기능을 하는 차이이다.

 

 

---

2. constructor

인스턴스를 생성할 때 인자를 받아서 프로퍼티를 초기화하는 역할을 하는 메서드이다.

 

클래스마다 단 하나씩 존재하며 기본값 설정이 가능하다.

class Player{
  //constructor 메서드 name, job을 인자로 받는다.
  constructor(name, job) {
    this.name = name;
    this.job = job;
  }
  info () {
    return `소환사명 : ${this.name} | 직업군 : ${this.job}`;
  }
}

 

또한 constructor 메서드는 필수적인 것이 아니다.

따라서 굳이 인스턴스의 초기화가 필요치 않는 경우 사용하지 않아도 된다.

class Hey{} // constructor없이 빈 클래스

console.log(new Hey());

 

 

---

 

3. 필드 Field

1) 일반 필드 Public Field

클래스 내부의 프로퍼티에 대해서 이미 값이 정해져 있는 경우

constructor 메서드를 사용하지 않고 필드값을 지정하는 방법을 사용할 수 있다.

 

예시)

// 필드값을 지정하므로 constructor 없어도 됨
class Hammer {
  durability = 20;
  power = 5;
  attack (obj){
    obj.durability -= this.power;
    this.durability -= obj.power;
  }
}
class Sword {
  durability = 15;
  power = 8;
  attack (obj){
    obj.durability -= this.power;
    this.durability -= obj.power;
  }
}

const hammer1 = new Hammer();
const sword1 = new Sword();

console.log(hammer1);
console.log(sword1);

>>> Hammer {durability: 20, power: 5}
>>> Sword {durability: 15, power: 8}

이처럼 constructor를 사용하지 않고 객체를 생성할 수 있다. 

 

두 객체의 상호작용도 살펴보자.

hammer1.attack(sword1);

console.log(hammer1);
console.log(sword1);

>>> Hammer {durability: 12, power: 5}
>>> Sword {durability: 10, power: 8}

 

---

또다른 예시를 살펴보자!

필드값을 지정하는 것은 constructor의 인수에 기본값을 지정하는 역할을 수행할 수 있다.

class KassidCafe{
  num = 0;
  menu = {아메리카노: 2500, 바닐라라떼: 4000};
  constructor(name, num){
    this.name = name;
    if (num) this.num = num;
  }
  info(){
    return `| Kassid Cafe ${this.num}호 ${this.name}점 |`;
  }
  order(drink){
    return `${drink}는 ${this.menu[drink]}원 입니다.`;
  }
}

 

또한 객체마다 항상 같은 값을 가지고 있는 프로퍼티도 필드값으로 지정할 수 있다.

생성 후 결과를 살펴보자.

const cafe1 = new KassidCafe('테스트');

console.log(cafe1);

 

기본값이 적용되어 잘 반환된 것을 알 수 있다.

console.log(cafe1.info());

>>> | Kassid Cafe 0호 테스트점 |

console.log(cafe1.order('바닐라라떼'));

>>> 바닐라라떼는 4000원 입니다.

 

필드값은 객체마다 독립적이다.

 

따라서 객체의 내부에 접근하여 프로퍼티를 수정할 경우 클래스 자체와는 무관하므로

해당 개체만 변화가 생긴다. 

cafe1.menu['바닐라라떼'] = 5000;
console.log(cafe1.order('바닐라라떼'));

>>> 바닐라라떼는 5000원 입니다.

// 새로운 객체 생성
const cafe2 = new KassidCafe('대전', 2);
console.log(cafe2.order('바닐라라떼'));

>>> 바닐라라떼는 4000원 입니다. // 클래스 선언 시의 값 그대로

---

2) 정적 필드

생성자 함수에서는 객체들이 아닌 그 함수 자체에 사용할 수 있는 기능을 추가할 수 있었다.

(생성자함수.프로퍼티 로 추가한 변수, 함수는 객체에서 접근할 수 없었다.)

 

클래스에서도 정적 필드를 통해 동일하게 구현할 수 있다.

다른 언어에서 볼 수 있는 키워드인 static을 이용한다.

class KassidCafe{

  //정적 변수, 메서드
  static owner = 'Kassid';
  static cafeInfo () {
    return `${this.owner}의 KassidCafe입니다!`
  }

  num = 0;
  menu = {아메리카노: 2500, 바닐라라떼: 4000};
  constructor(name, num){
    this.name = name;
    if (num) this.num = num;
  }
  info(){
    return `| Kassid Cafe ${this.num}호 ${this.name}점 |`;
  }
  order(drink){
    return `${drink}는 ${this.menu[drink]}원 입니다.`;
  }
}

 

이를 간단한 그림으로 살펴보면 아래와 같다.

클래스	객체1	객체2 ...
owner cafeInfo	num menu name	num menu name

(메서드의 본체는 클래스의 프로토타입 한 공간에 존재함. 객체마다X)

 

 

정적 필드에서 주의할 점은

this.~ 키워드 사용시에 같은 정적 변수만을 사용할 수 있다는 것이다!

 

 

---

4. 클래스 표현식

클래스 또한 내부적으로 함수로 인식한다.

class Foo {}

console.log(typeof Foo);

>>> function

 

따라서 함수처럼 클래스 표현식 또한 존재한다.

// 변수에 클래스명을 담을 수 있다!
const bar = Foo;
const bee = new bar();

console.log(bee);

>>> Foo {} // 인스턴스 객체 생성