[JavaScript] 객체지향과 Class 함수

 

객체지향과 Class 함수

 

---

 

# 객체지향 프로그래밍이란

 

 프로그래밍 개념 중 하나로, 데이터를 단순히 받고 처리하는 것이 아니라 공통점으로 묶어 객체 단위로 나누어 관리하는 방식이다. 반복되는 값을 그때그때마다 새롭게 처리하는 것이 아니라 미리 형식(class)를 지정해놓고 처리하므로 데이터 관리를 효율적으로 할 수 있다.

 

 예를 들어 사용자 정보의 내용은 이름, 나이, 아이디 등 반복되는 항목이 존재한다. 그러니 사용자의 정보를 객체로 생성하는 함수를 만들면 반복되는 작업을 굳이 하지 않아도 된다. 이렇게 함수를 통해 객체지향 프로그래밍을 구현할 수 있다.

 

 객체지향 프로그래밍에는 프로토타입 기반 언어와 클래스 기반 언어가 있다. 자바스크립트는 프로토타입 언어이므로 클래스 없이도 프로토타입으로 상속을 할 수 있지만 ES6부터 추가적으로 클래스 함수를 사용할 수 있게 되면서 프로토타입을 클래스 기반 패턴처럼 이용할 수 있게 되었다. 간단히 말하자면 자바스크립트에 새로운 객체 생성 방식이 도입된 것이라 볼 수 있다.

 

 

# 객체지향 프로그래밍 특징 4가지

 

 객체지향 프로그래밍의 특징을 알아보자.

 

1. 캡슐화 : 연관이 있는 데이터와 함수를 하나의 클래스로 묶는 것이다. 데이터에 접근하거나 수정할 수 있는 권한을 가지고 있다. 데이터 공개와 숨기기를 설정할 수 있다.

 

2. 상속 : 클래스를 확장하면 자식 클래스는 부모 클래스의 속성과 메소드를 상속받을 수 있다.

 

3. 추상화 : interface의 내부가 어떻게 동작하는지 몰라도 interface를 사용할 수 있다는 특징을 의미한다. 즉, 내부의 코드를 수정해도 외부의 코드를 수정할 필요가 없다.

 

4. 다형성 : 부모에게서 상속 받은 정보 중 특정 정보만 수정해서 사용하고 싶다면 오버라이딩으로 수정할 수 있다.

 

 

# 자바스크립트에서 클래스 함수로 객체지향 프로그래밍하기

 

 ES6부터 클래스 함수가 도입되어 클래스 개념을 구현할 수 있게 되었다. 클래스 함수를 이용하는 방법을 알아보자.

 

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

  const user1 = new UserList("kim", 20, 123);
  const user2 = new UserList("lee", 21, 345);

 

 클래스를 선언해주고 해당 변수를 this로 작성해준 다음 새로운 변수를 만들어 new로 값을 생성해주면 된다.

 

 

# 클래스 호이스팅

 

 클래스는 함수로 평가된다. 클래스 선언문으로 정의한 클래스는 함수 선언문과 같이 런타임이전에 먼저 평가되어 함수 객체를 생성한다. 이때 프로토타입도 더불어 생성된다. 하지만 클래스 정의 이전에 참조할 수는 없다. var, let, const, function와 마찬가지로 class 키워드를 사용해서 선언된 식별자는 호이스팅되고, 런타임 이전에 먼저 실행된다. 그러나 let, const처럼 클래스 선언문 이전에 일시적 사각지대(TDZ)에 빠지기 때문에 호이스팅이 발생하지 않는 것처럼 동작한다.

 

---

 

참고 자료

책 '모던 자바스크립트 Deep Dive' 25장

책 '코어 자바스크립트' 7장

https://youtu.be/dHrI-_xq1Vo