[JavaScript] 클래스(Class)와 constructor

[JavaScript] 클래스

📌 클래스란?

클래스는 객체를 생성하는 일을 한다.

그냥 객체를 생성하는 것이 아닌 재사용 가능한 객체를 생성한다.

즉, 클래스는 마치 붕어빵틀과 같은 역할을 하는 것!

MDN 에서는 클래스를 객체를 생성하기 위한 템플릿이라고 정의하고 있다.

 

📌 클래스는 언제 등장했나?

ES6 이후 등장

ES5 의 클래스 의미와는 다른 문법과 의미를 가진다.

 

📌 클래스 정의

클래스를 정의할 때는 파스칼 케이스를 사용해야 한다.

즉, 클래스명은 대문자로 시작해야 한다.

  

    
    
    
    
  
class City { ... }

 

 

📌 클래스를 정의하는 방식

클래스를 정의하는 방식에는 class 선언 방식과 class 표현식 방식 두 가지 방법이 있다.

  

    
    
    
    
  
// 선언 방식
class City { }

// 표현식 방식
const City = class {}
const City = class Home {};

클래스를 표현식 방식으로 정의할 수 있다는 것은 즉 값으로 사용할 수 있다는 것을 의미한다.

 

📌 클래스의 호이스팅

함수에서는 함수를 정의하기 전에도 참조할 수 있었지만, 클래스에서는 클래스 정의 이전에는 참조할 수 없다.

하지만 함수에서와 마찬가지로 클래스에서도 호이스팅이 발생한다.

호이스팅이 되지만 참조는 정의된 이후에만 된다는 점에서 함수와 차이가 있다.

 

📌 클래스의 호출

클래스를 호출하기 위해서는 new 연산자와 함께 호출해야 한다.

생성자 함수처럼 new 연산자와 함께 클래스 이름을 호출하면 클래스의 인스턴스가 생성된다.

 

📌 constructor (생성자)

constructor 의 역할

클래스 내부에는 constructor 라고 하는 생성자 메서드를 정의할 수 있다.

constructor 는 인스턴스를 생성하고 초기화하기 위한 특수한 메서드이다.

 

constructor 는 클래스가 생성될 때 제일 처음으로 실행되는 메서드이다.

 

constructor 의 특징

✅ constructor 는 최대 한 개만 가진다.

  

    
    
    
    
  
class Cafe {
    constructor(){}
    constructor(){} 
}
// SyntaxError

 

✅ 생략 가능하다.

constructor 를 생략할 경우 암묵적으로 빈 constructor 가 정의되며 이는 빈 객체를 생성한다.

  

    
    
    
    
  
class Home {}
const home = new Home();
console.log(home);
// Home {}

 

 

✅ return 을 가질 수 없다.

return 문이 없어도 암묵적으로 this 가 반환된다.

  

    
    
    
    
  
class Cafe {
    constructor(name) {
        this.name = name;
    }
  
    return 'Starbucks'; // SyntaxError
}

 

📌 인스턴스 생성

constructor 내부에서 this 의 인스턴스 프로퍼티를 초기화할 수 있다.

고정값으로 인스턴스를 초기화하거나, 클래스의 외부에서 초기값을 전달할 수 있다.

  

    
    
    
    
  
class Cafe {
    constructor(){
        this.menu = "Chocolate milk";
        this.price = "5,500원";
    }
 }

const cafe = new Cafe();

  

    
    
    
    
  
class Cafe {
    constructor(menu, price){
	this.menu = menu ;
	this.price = price ;
    }
 }

const cafe = new Cafe('Chocolate milk', '5,500원');

 

콘솔창에 출력해보면 인스턴스의 프로퍼티가 추가되었음을 확인할 수 있다.

  

    
    
    
    
  
console.log(cafe);
//   Cafe {
//     menu: "Chocolate milk",
//     price: "5,500원",
//   }

 

📌 프로토타입 메서드

생성자 함수를 이용해서 인스턴스를 생성하는 경우에는 명시적으로 프로토타입에 메서드를 추가해야 한다.

하지만 메서드를 클래스 몸체에서 정의한다면, 그 메서드는 자연스럽게 프로토타입의 메서드가 된다.

  

    
    
    
    
  
class Cafe {
    constructor(menu){
        this.menu = menu;
    }
    
    price(){
        console.log(`${this.menu} 는 5,500원 입니다.`);
    }
}
 
const cafe = new Cafe('chocolate milk');

 

 

 

 

 

 

 

---

참고 : MDN 문서, 모던 자바스크립트 딥 다이브 도서, 멋쟁이사자처럼 4기 yamoo9 수업

  등을 공부하고, 간단하게 정리한 내용입니다. 잘못된 부분이나 문제되는 점이 있으면 댓글 부탁드립니다.

※ 포스팅 내용을 그대로 복붙 및 캡처 시 출처를 반드시 남겨주세요.