JaveScript/JaveScript

모던자바스크립트 17, 18장 스터디

알면 알 수록 재밌다! 2023. 11. 21. 22:14

 

모던자바스크립트 스터디 7일차이다.

 

17장 생성자 함수에 의한 객체 생성

18장 함수와 일급 객체

오늘은 위 단원들을 공부하고 모르는것을 정리했다.

 


궁금증

'모던자바스크립트 17장 235page'를 보면 Object 생성자 함수를 사용해 객체를 생성하는 방식은 특별한 이유가 없다면 유용해보이지 않다는 설명이 적혀있을까?

 


이유

 

객체리터럴 방식으로 객체 생성을 한다면
👉🏻 모든 객체를 보여주는 Object객체와 연결된다.

 

생성자 함수로 객체 생성을 한다면
👉🏻 자신을 만든 생성자 객체만 연결된다.

 

  객체 리터럴 생성자 함수
간편성 - 필요한 속성과 값을 중괄호에 나열하면 되서 간단하고 직관적 - 함수를 정의하고 객체 생성하는 과정이 객체 리터럴보다 복잡함
확장성 - 객체 리터럴은 한 번에 하나의 객체만 생성 가능
- 코드 중복을 방지하려면 매번 동일한 속성을 가진 객체를 만들어야 하므로 확장성이 떨어짐
- 생성자 함수를 사용하면 동일한 타입의 객체를 여러 번 생성할 수 있음.
- 생성자 함수는 클래스로 구조화되어 있어 재사용 및 확장이 용이
상속 - 객체 리터럴은 직접적으로 상속 메커니즘을 제공하지 않음 - 생성자 함수와 클래스를 사용하면 객체간 상속 가능

 

 


활용

const config = {
  local: {
    host: DB_LOCAL_HOST,
    port: Number(DB_LOCAL_PORT),
    username: DB_LOCAL_USERNAME,
    password: DB_LOCAL_PASSWORD,
    database: DB_LOCAL_NAME,
  }
}

위처럼 환경설정은 1번하고 말것이라 객체의 단순한 초기화에만 사용하므로 객체 리터럴을 사용하는 것이 편리할 것이다.

 

export class ErrorCode {
  status: number;
  message: string;
  code: string;

  constructor({ status, message, code }: IErrorCode) {
    this.status = status;
    this.message = message;
    this.code = code;
  }

  static createErrorCode(status: number, message: string, code: string): ErrorCode {
    return new ErrorCode({ status, message, code });
  }
}

 

위처럼 에러코드는 여러번 찍어내야 할 것이라 1번 작성만으로 객체 계층 구조 및 코드 공유를 하면 편리할 것이다.

따라서 생성자 함수를 확장한 클래스를 사용하는 것이 적절한 케이스일 것이다.