Javascript "Class" 문법

 

 

클래스(Class)는 다양한 종류의 물건을 만드는 설계도와 비슷한 개념이다.
설계도를 통해 어떤 물건을 만들 수 있는지, 책상이 가지고 있는 특징(이 특징은 변수 또는 속성과 메서드)은 
무엇인지 알 수 있다.

인스턴스(Instance)는 이 설계도를 보고 만들어진 실제 물건이라고 생각해볼 수 있다.
실제 물건의 모양, 크기, 색상, 재료 등은 모두 설계도에 따라 만들어지며
이러한 물건들은 모두 다른 인스턴스가 된다.

이렇게 클래스는 객체를 만들기 위한 설계도라 할 수 있고, 이 설계도를 바탕으로 만들어진 실제 객체들은
인스턴스라고 할 수 있다.

 

 

✅ Class 란?

class Person {
	// constructor는 이름을 변경할 수 없어요.
  constructor(name, age) {
		// 이름(name)과 나이(age)가 없으면 사람이 아니죠?
		// new라는 키워드를 이용해서 인스턴스를 만들 때, 기본적으로
		// 넣어야 하는 값들을 의미해요! :)
		// 여기서 말하는 this는 만들어질 인스턴스를 의미한다고 생각해주세요!
    this.name = name;
    this.age = age;
  }

	// 다양한 메소드를 아래와 같이 정의할 수 있어요.
	// 여기서 this.name으로 내부 값을 접근해야 함을 잊지 마세요! :)
  sayHello() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

const person1 = new Person("Alice", 30);
const person2 = new Person("Bob", 25);

// 만든 객체를 토대로 메서드 호출해보기
person1.sayHello(); // 출력: "Hello, my name is Alice and I am 30 years old."
person2.sayHello(); // 출력: "Hello, my name is Bob and I am 25 years old."

 

 

✅ Constructor 란?

 

constructor는 class의 생성자 함수이다. 생성자 함수는 객체를 생성할 때 호출되며, 객체를 초기화하는 역할을 한다.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

const person = new Person('Alice', 20);

 

 

✅ Getter 와 Setter

 

class에서는 getter와 setter을 사용하여 class의 속성에 접근할 수 있다.

getter는 속성 값을 반환하는 메소드이며, setter은 속성 값을 설정하는 메소드이다.

이를 통해 생성한 인스턴스를 정해진 규격 안에서 자유롭게 변경할 수 있다.

// Getters와 Setters

class Rectangle {
  constructor(height, width) {
    // underscore : private(은밀하고, 감춰야 할 때)
    this._height = height;
    this._width = width;
  }

  // width를 위한 getter
  get width() {
    return this._width;
  }

  // width를 위한 setter
  set width(value) {
    // 검증 1 : value가 음수이면 오류!
    if (value <= 0) {
      //
      console.log("[오류] 가로길이는 0보다 커야 합니다!");
      return;
    } else if (typeof value !== "number") {
      console.log("[오류] 가로길이로 입력된 값이 숫자타입이 아닙니다!");
      return;
    }
    this._width = value;
  }

  // height를 위한 getter
  get height() {
    return this._height;
  }

  // height를 위한 setter
  set height(value) {
    // 검증 1 : value가 음수이면 오류!
    if (value <= 0) {
      //
      console.log("[오류] 세로길이는 0보다 커야 합니다!");
      return;
    } else if (typeof value !== "number") {
      console.log("[오류] 세로길이로 입력된 값이 숫자타입이 아닙니다!");
      return;
    }
    this._height = value;
  }

  // getArea : 가로 * 세로 => 넓이
  getArea() {
    const a = this._width * this._height;
    console.log(`넓이는 => ${a}입니다.`);
  }
}

// instance 생성
const rect1 = new Rectangle(10, 7);
rect1.getArea();
// const rect2 = new Rectangle(10, 30);
// const rect3 = new Rectangle(15, 20);