본문 바로가기
Language/Javascript

[혼공스] Ch.09 클래스

by 노믹 2022. 11. 4.

클래스의 기본 기능

  • 추상화

프로그램에 필요한 요소만 사용해서 객체를 표현하는 것을 추상화라고 합니다.

좀 더 포괄적인 사전적 의미로는 복잡한 자료, 모듈, 시스템 등으로부터 핵심적인 개념과 기능을 간추려내는 것을 추상화라고 합니다.

이렇게 추상화를 활용해서 함수를 만들면 객체를 하나하나 만들 때와 비교해서

  1. 오탈자의 위험이 줄어듭니다.
  2. 코드를 입력하는 양이 크게 줄어듭니다.
  3. 속성과 메소드를 한 함수 내부에서 관리할 수 있으므로 객체를 더 손쉽게 유지보수 할 수 있습니다.

단점으로는 객체별로 메소드를 생성하므로 함수라는 기본 자료형보다 무거운 자료형이 여러 번 생성됩니다.

  • 클래스 선언하기

객체들을 정의하고 그러한 객체를 활용해서 프로그램을 만드는 것을

객체 지향 프로그래밍(Object Oriented Programming)이라고 합니다.

 

프로그래밍 언어 개발자들은 크게 클래스(class)와 프로토타입(prototype)이라는 두가지 문법으로 객체를 효율적으로 만들 수 있게 했습니다.

간단하게 구분하면 클래스는 객체를 만들 때 수많은 지원을 하는 대신 많은 제한을 거는 문법입니다.

반면 프로토타입은 제한을 많이 하지 않지만, 대신 지원도 별로 하지 않는 문법입니다.

 

클래스는 다음과 같은 형태로 생성합니다.

class 클래스 이름 {

}

클래스를 기반으로 만든 객체는 전문 용어로 인스턴스(instance)라고 부릅니다.

그냥 객체(object)라고 부르는 경우도 많습니다. 인스턴스를 생성할 때는 다음과 같은 문법을 사용합니다.

new 클래스 이름 ()
  • 클래스 : 이전에 살펴보았던 객체를 만드는 함수와 비슷한 것 첫 글자를 대문자로 지정하는 것이 개발자들의 약속 (붕어빵 틀)
  • 인스턴스(객체) : 이전에 만들었던 객체를 만드는 함수로 만든 객체와 비슷한 것(틀에서 만드 붕어빵)
  • 생성자

메소드의 이름을 constructor로 지정했지만 constructor라는 이름으로 사용하는 것이 아니라 클래스 이름으로 호출합니다.

class 클래스 이름 {
  constructor () {
    /* 생성자 코드 */
  }
}

 

클래스의 고급 기능

  • 상속

클래스의 선언 코드를 중복해서 작성하지 않도록 함으로써 코드의 생산 효율을 올리는 문법입니다.

class 클래스 이름 extends 부모클래스 이름 {

}

삭속은 '상속'이라는 이름처럼 어떤 클래스가 가지고 있는 유산(속성과 메소드)을 다른 클래스에게 물려주는 형태로 사용합니다.

이때 유산을 주는 클래스를 부모 클래스(parent class), 유산을 받는 클래스를 자식 클래스(child class)라고 부릅니다.

  • private 속성과 메소드

클래스 사용자가 클래스 속성(또는 메소드)을 의도하지 않은 방향으로 사용하는 것을 막아

클래스의 안정성을 확보하기 위해 나온 문법입니다.

속성과 메소드 이름 앞에 #을 붙이기만 하면 됩니다. 이처럼 #이 붙어있는 속성과 메소드는 모두 private 속성과 메소드가 됩니다.

주의할 것이 있다면 private 속성은 사용하기 전에 미리 외부에 어떤 속성을 private 속성으로 사용하겠다고 선언해줘야 한다는 것입니다.

class 클래스 이름 {
  #속성 이름
  #메소드 이름 () {
  
  }
}
  • 게터와 세터

private 속성을 사용하면 외부에서는 내부 속성에 아예 접근할 수 없는 문제가 발생합니다.

이때 getOO() 메소드처럼 속성 값을 확인할 때 사용하는 메소드를 게터(getter)라고 부르며,

setOO() 메소드처럼 속성에 값을 지정할 때 사용하는 메소드를 세터(setter)라고 부릅니다.

 

처음 게터와 세터를 배우면 모든 private 속성에 게터와 세터를 붙이려고 하는 경우가 있습니다.

게터와 세터는 필요한 경우에만 사용합니다.

만약 사용자가 값을 읽는 것을 거부하겠다면 게터를 만들지 않아도 됩니다. 또한 사용자가 값을 지정하는 것을 거부하겟다면 세터를 만들지 않아도 됩니다.

아예 속성에 접근하지 못하게 둘 다 막을 수도 있습니다.

class 클래스 이름 {
  get 이름 () { return 값 }
  set 이름 (value) { }
}
  • static 속성과 메소드

프레임워크 개발자들은 더 효율적으로 프레임워크를 개발할 수 있게 다양한 패턴을 고안합니다.

이러한 패턴을 디자인 패턴(design pattern)이라고 부릅니다.

 

원래 자바스크립트에는 클래스라는 기능이 없었습니다. 하지만 여러 디자인 패턴을 활용하기 위해서 클래스 문법들이 계속해서 추가된 것이라 할 수 있습니다. 비교적 최근 추가된 문법으로 static 속성static 메소드가 있습니다.

static은 정적 속성, 정적 메소드라고 부르기도 합니다.

class 클래스 이름 {
  static 속성 = 값
  static 메소드 () {
  
  }
}

static 속성과 메소드는 인스턴스를 만들지 않고 사용할 수 있는 속성과 메소드입니다. 그냥 일반적인 변수와 함수처럼 사용할 수 있습니다. 다음과 같이 클래스 이름 뒤에 점을 찍고 속성과 메소드를 사용합니다.

클래스 이름.속성
클래스 이름.메소드()

변수와 함수를 클래스 내부에 작성하면 다음과 같은 장점이 있습니다.

  • 어떤 속성과 함수가 클래스 내부에 귀속되어 있다는 것을 명시적으로 나타낼 수 있습니다.
  • private 특성과 게터, 세터를 부여해서 족므 더 안전한 변수와 함수로 사용할 수 있습니다.
  • 오버라이드

부모가 갖고 있는 함수를 자식에서 다시 선언해서 덮어쓰는 것을 오버라이드(override)라고 부릅니다.

프레임워크를 다룰 때 반드시 활용하는 개념입니다.

 

'Language > Javascript' 카테고리의 다른 글

JavaScript란?  (0) 2022.12.12
Javascript 기본문법  (0) 2022.11.21
[혼공스] Ch.08 예외 처리  (0) 2022.11.03
[혼공스] Ch.07 문서 객체 모델  (0) 2022.11.03
[혼공스] Ch.06 객체  (0) 2022.11.02