TIL-24.04.30

 

 

 

문제점

클래스

 

아직 클래스를 작성해 이를 템플릿처럼 활용하는 습관이 제대로 들지않았다. 내가 작성한 코드들을 보면 인라인스타일로 위부터 아래로 주르륵 작성된 코드들이 여전히 많은데, 이러한 코드는 유지보수 뿐만 아니라 안정성에서도 좋지 않다는 것을 알고있다. 따라서 앞으로 클래스를 자주 사용하려는 습관을 들일건데, 그전에 클래스에 대한 기본 개념정도는 리마인드하려한다.

JavaScript의 클래스(Class)는 ES6(ES2015)부터 도입되었으며, 객체지향 프로그래밍을 지원하기 위한 구문이다. 클래스는 객체를 생성하기 위한 템플릿이며, 속성(멤버 변수)과 메서드(멤버 함수)를 포함할 수 있다

다음은 클래스의 주요 특징과 사용 방법이다.

 

1. 클래스 선언:

class MyClass {
  constructor(param1, param2) {
    this.property1 = param1;
    this.property2 = param2;
  }

  method1() {
    // 메서드 내용
  }

  method2() {
    // 메서드 내용
  }
}

 

위 코드에서 constructor는 클래스의 생성자 메서드로, 객체가 생성될 때 자동으로 호출되는 메서드이다.

 

 

 

 

2. 인스턴스 생성:

const myObj = new MyClass(value1, value2);

 

new 키워드를 사용하여 클래스의 인스턴스를 생성할 수 있다.

 

 

 

 

 

3. 속성과 메서드 접근:

console.log(myObj.property1); // 속성 값 읽기
myObj.method1(); // 메서드 호출

 

 

 

 

 

 

4. 상속:

class ChildClass extends ParentClass {
  constructor(param1, param2, param3) {
    super(param1, param2); // 부모 클래스의 생성자 호출
    this.property3 = param3;
  }

  method3() {
    // 메서드 내용
  }
}

 

extends 키워드를 사용하여 클래스를 상속할 수 있다. super( ) 메서드를 사용하여 부모 클래스의 생성자를 호출할 수 있다.

 

 

 

 

 

5. 접근제어자:

ES6에서는 공식적으로 접근 제어자(private, protected, public)를 지원하지 않지만, 관례상 언더스코어(_)를 사용하여 프라이빗 속성을 표현한다.

class MyClass {
  constructor() {
    this._privateProperty = 10;
  }

  get privateProperty() {
    return this._privateProperty;
  }

  set privateProperty(value) {
    this._privateProperty = value;
  }
}

 

위와 같이 게터(getter)와 세터(setter)를 사용하여 프라이빗 속성에 접근하고 설정할 수 있다.

 

 

 

 

 

 

6. 정적 메서드:

class MyClass {
  static staticMethod() {
    // 정적 메서드 내용
  }
}

MyClass.staticMethod(); // 정적 메서드 호출

 

static 키워드를 사용하여 정적 메서드를 선언할 수 있다. 이 메서드는 클래스 자체에 바인딩되어 있으므로 인스턴스를 생성하지 않고도 호출가능.

 

 

 

 

 

 

알게된점

클래스는 객체지향 프로그래밍에서 중요한 개념으로, 코드의 구조화와 재사용성을 높여준다. 클래스를 사용하여 객체(인스턴스)를 생성하고 관리하는 것은 코드의 가독성을 높이고 유지보수를 쉽게 만들어준다.