[JavaScript] What is OOP in JavaScript?

오늘은 JS에서 OOP(Object Oriented Programming)에 대해서 공부했다. 

다른 언어에서 배우던 OOP 와는 조금 다른 느낌이었다. 

JavaScript는 프로토타입 기반 언어로 C++이나 Java 같은 언어들과는 다르게 Class가 따로 존재하지 않고 function을 Class 처럼 사용한다. 프로토타입 기반 프로그래밍은 클래스가 존재하지 않는 객체지향 프로그래밍의 한가지 스타일로, 동작 재사용(상속)은 프로토타입으로서 존재하는 객체를 데코레이팅하는 과정을 통해 수행된다.

Class가 없던 JavaScript에서 OOP의 개념을 어떻게 입혔는지 또 어떻게 사용하는지 그리고 OOP가 무엇인지 알아보고자 한다.

 

• What is OOP

  • OOP(Objcet Oriented Programming) 이란 객체 지향 프로그래밍을 뜻하며 컴퓨터 프로그래밍의 패러다임 중 하나이다. 객체 지향 프로그래밍은 컴퓨터 프로그램을 여러 개의 독립된 단위인 객체들의 모임으로 파악하고자 한다. 이 객체들은 서로 메시지를 주고받고 데이터를 처리할 수 있다.
  • OOP의 장점 
    • 직관적인 코드 분석이 가능하다.
    • 프로그램의 개발 및 보수를 수월하게 해 준다.
    • 프로그램을 유연하고 변경을 용이하게 해 주어 대규모 프로젝트에 적합하다.
  • OOP의 특징
    • 캡슐화 (Encapsulation) : 객체의 다양한 속성들을 묶어서 관리하는 것이다.
    • 상속 (Inheritance) : 부모의 속성을 자식 객체가 물려받는 것이다.
    • 추상화 (Abstraction) : 부모 객체에서 자식 객체로 속성을 상속할 때 자식 객체는 자신의 속성을 모두 서술해서 사용해야 한다. (일종의 틀을 상속받는 것 -> 비어있는 속성을 물려받는다)
    • 다형성 (Polymorphism) : 상속과 관련된 개념이며 부모 객체로부터 물려받은 속성을 각 자식 객체에 맞게 변경해서 사용하는 것이다.

• OOP in JavaScript and Example

  • Class가 없는 JavaScript에서 이러한 OOP의 특징을 이용하기 위하여 어떻게 사용하는지 알아보겠다.

먼저 간단한 클래스 사용법이다. class 키워드를 이용해 클래스를 생성한 뒤 new 키워드로 객체를 생성해주었다.

class Human {
  constructor(name) {
    this.name = name; // 생성자 함수로 Human객체의 name 속성값 넣어주기 -> 캡슐화 (속성을 객체로 묶어서 관리)
  }
};
let h1 = new Human('Leo');
console.log(h1.name); // Leo

여기서 새로운 클래스를 생성해주고 Human 클래스의 속성을 물려받도록 하겠다. 

class Human {
  constructor(name) {
    this.name = name; // 생성자 함수로 Human객체의 name 속성값 넣어주기
  }
};
let h1 = new Human('Leo');
console.log(h1.name); // Leo

class Student extends Human { // Human 클래스의 속성을 물려받음
  constructor(name, time) {  // 부모 객체에 없는 속성 추가 -> Override(오버라이드) 다형성
    super(name); // 생성자 함수로 Human객체의 name 속성값 넣어주기
    this.time = time;
  }
  study(){ 
  	console.log(`${this.time}시간동안 공부합니다.`);
  }
}

let s1 = new Student('Leo', 2);
console.log(s1.name); // Leo
s1.study(); // 2시간동안 공부합니다.

Student 클래스는 Human의 생성자 함수를 물려받았으나 오버라이드를 이용해 Student 클래스의 생성자 함수를 새로 작성하였다. 여기서 name 속성은 super 를 이용해 부모 객체로부터 생성자 함수를 실행하여 값을 넣어주었고 나머지는 this 연산자를 이용해 해당 객체의 값으로 넣어주었다. 

부모 객체의 생성자 함수를 이용하기 위해서는 반드시 super() 를 사용해야 하며 this를 사용하기 이전에 사용되어야 한다.

이렇게 간단하게 JavaScript에서 OOP를 활용하는 방법에 대해서 알아보았다.