TIL 23일차

안광의·2021년 7월 19일

Today I Learned

목록 보기

23/64

시작하며

이번주부터 Section 2를 시작하며 javaScript의 class에 대해서 학습하였다. 이전에 javaScript에 대해서 혼자 공부하면서 자주 나왔던 개념이였는데 실제로 코드를 작성해보면서 확실하게 이해할 수 있었다.

javaScript class

정의

class
class란 속성과 메소드가 정의되어 있는 모듈화된 객체라고 정의할 수 있다. 반복되는 변수들과 구조가 같은 함수들을 하나로 묶을 수 있는 설계도로 비유할 수 있으며, class를 사용하면 새로운 instance나 자식 class를 생성할 수 있다.

instance
instance란 class를 바탕으로 만든 객체라고 할 수 있는데, class가 자동차의 설계도라면 instance는 설계도를 바탕으로 만든 자동차라고 할 수 있다. 기본적인 구조는 동일하지만 속성들을 바꿔서 새로운 instance들을 만드는 것도 가능하다(ex) 파란색 자동차, 빨간색 자동차 등)

구조

class Counter {
  constructor() {
    this.value = 0; // 생성자 호출을 할 경우, this는 new 키워드로 생성한 Counter의 인스턴스입니다
  }
  increase() {
    this.value++
  }
  decrease() {
    this.value--
  }
  getValue() {
    return this.value
  }
}
let counter1 = new Counter() // 생성자 호출
counter1.increase()
counter1.getValue() // 1
ES6부터는 class라는 키워드를 이용하여 class를 생성할 수 있는데 constructor(생성자 함수)를 사용하여 속성을 정의할 수 있다. constructor(color,size 등) 여러 속성을 정의할 수 있으며
new를 사용하여 새로운 instance를 생성할 수 있다.

prototype : 모델의 청사진을 만들 때 쓰는 원형 객체
constructor : 인스턴스가 초기화될 깨 실행하는 생성자 함수
this : 함수가 실행될 때, 해당 scope마다 생성되는 고유한 실행 context

특징

캡슐화(Encapsulation)
class는 속성과 메소드를 따로 정의하는 것이 아닌, 하나의 객체 안에 넣어서 묶어서 느슨하게 결합되어 있기 때문에 언제든 구현을 수정할 수 있으며 내부 데이터나 내부 구현이 외부로 노출되지 않도록 할 수 있는 은닉화의 특징을 가지고 있다.

추상화(Abstraction)
추상화란 너무 많은 기능들이 노출되지 않게 하여 예기치 못한 사용상의 변화가 일어나지 않도록 만들 수 있는 class의 특징을 말하며, 캡슐화가 코드나 데이터의 은닉에 포커스가 맞춰져있다면, 추상화는 class를 사용하는 사람이 필요하지 않은 method 등을 노출시키지 않고, 단순한 이름으로 정의하는 것에 포커스가 맞춰져 있다.

상속(Inheritance)
어떠한 class의 속성과 메소드를 상속받은 자식 class의 생성이 가능하며 자식 class에 새로운 속성이나 method를 추가하는 것도 가능하다.

다형성(Polymorphism)
동일한 class의 method를 사용하더라도 다양한 방식으로 구현될 수 있다.