[JavaScript] OOP in JavaScript

 

• 객체 지향 프로그래밍의 특징 
• 인스턴스를 생성 방법 중  es5에서의 방법과, es6의 클래스를 이용한 방법
• 다형성(polymorphism), 상속(inheritance)의 개념
• 상속관계를 가진 현실세계 모델을 코드로 작성
• class 상속의 원리

 

 

 전체적인 개요에 대해서는 모던 자바스크립트 Deep Dive라는 교재와 다음 mdn 링크들을 참고하며 작성하였다.

developer.mozilla.org/ko/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

객체지향 자바스크립트 개요 - JavaScript | MDN

developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object-oriented_JS

Object-oriented JavaScript for beginners - Web 개발 학습하기 | MDN

 

---

 

  자바스크립트는 정확히는 객체 지향 언어가 아니라, 객체 지향 패턴을 가지는 언어이다. 데이터와 기능을 별개로 취급하지 않고 하나로 묶어 그룹화하여 다루고자 하는 것이 객체 지향의 기본적인 개념이다. 따라서, 객체에는 메소드와 속성이 함께 존재하게 된다. 

 

 

mdn에서 가져온 instantiation에 대한 간단한 그림 

  
  // ES5 
  function Student(name, age, gender){
  }
  
  // ES6 
  class Student{
     constructor(name, age, gender){
     }
  }
  

 

•  class: 세부적인 사항이 들어가지 않은, 모델의 틀이 되는 원형 객체. 자바스크립트에서는 프로토타입이다.
•  constructor: 인스턴스가 초기화될 때 실행하는 생성자 함수. 주로 객체의 속성을 설정하거나 객체를 준비시키는 메소드 호출에서 사용된다. 함수 자체가 객체의 생성자 역할을 하기 때문에 개별적으로 생성자 메소드를 정의할 필요는 없다.
•  this: 함수가 실행될 때, 해당 스코프마다 생성하는 고유한 실행 컨텍스트

 

---

 

그럼 prototype은 어떤 개념인가?

 

 사실 처음 봤을때는 자바의 클래스 기반 프로그래밍과 같이 생성자를 만들고 이에 대해 상속받는 방식으로 이루어지는 것과 거의 유사하다고 생각했었는데, 찾아보니 좀 더 엄밀하게 따지면 자바스크립트에서는 프로토타입이 되는 함수를 복제하면서 진행되는 것이라 한다. 문제는 아직도 프로토타입에 대해 정확히는 이해가 가지 않았다는 점이다. 최근 등장한 리액트 등의 프레임워크에서는 프로토타입을 이용한 클래스 설계는 생각보다 많이 하지 않는다고 듣긴 했다. 하지만 기본적으로 자바스크립트가 프로토타입 기반 프로그래밍의 객체 지향 언어인만큼 객체 지향 프로그래밍 자체와 프로토타입 두 개념에 대해서는 더 확실하게 이해하고 넘어갈 필요가 있을 것 같다.

 

developer.mozilla.org/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

상속과 프로토타입 - JavaScript | MDN

 

---

 

참고할 만한 영상 자료

 

자바스크립트의 객체 지향 class 문법에 대해 잠깐 찾아보면서 개인적으로 제일 웃기고 이해도 꽤 잘 갔던 영상도 하나 올려본다.

이번에 페어분께 추천 받아 처음으로 보게 된 채널인데, 친숙한 예제를 통해 설명을 해줘서 큰 틀로 개념을 이해하기에 좋은 듯 하다.

 

www.youtube.com/watch?v=dHrI-_xq1Vo

 

---

 

  객체 지향 프로그래밍의 기본적인 개념은 크게 캡슐화, 상속, 추상화, 다형성으로 이루어진다. 

---

 

   캡슐화 (Encapsulation)

• 비슷하거나 관련된 역할을 하는 속성, 메소드들을 하나의 클래스로 넣어주는 것이 캡슐화다. 
• 우리가 캡슐화를 하는 이유는 객체에 대해서 구체적인 정보를 노출시키지 않고 은닉하기 위해서이다. 동작은 노출되지만, 어떻게 구현이 되었는지는 숨겨지게 되는 것이다. 캡슐화를 통해 외부에서 직접적으로 정보에 접근할 수 없게 된다. 만약 정말 엄격하게 클래스를 설정하는 경우에는 (예를 들면 자바) 정보에 접근할 때 getter 또는 setter을 이용해야 하는 방식으로도 만들 수 있다. 하지만 자바스크립트의 경우에는 클로저 모듈 패턴을 통한 캡슐화가 은닉화에 있어 더 안정적이며, 오히려 class를 사용할 경우 은닉화에서 한계를 가진다고 한다. 
• 기존의 자바스크립트에서는 접근지정자에 대한 개념이 없었고 패턴을 흉내내는 방식으로 사용했지만, typescript와 같은 상위개념이 등장하면서 private, public, protected와 같은 제한자들도 사용 가능해졌다고 한다. 
• 캡슐화는 loosing coupling에도 유리한데, coupling은 간단하게 이야기 하면 각각의 객체들 또는 모듈들 간의 관계를 이야기한다. coupling에 관한 더 자세한 내용을 찾아보니 너무 다양해서 당장 정리하기는 어렵고 다음 페이지를 참고하면 좋을 듯 하다..!

ui.toast.com/weekly-pick/ko_20150522

Javascript의 커플링 측정

 

---

 

추상화 (Abstraction)

• 내부의 구현은 복잡해도, 노출되는 부분들은 단순하게 만든다는 것이 추상화의 가장 기본적인 개념이다. 예를 들면 우리 모두가 스마트폰을 사용하지만, 스마트폰에 사용된 반도체의 구조나 기본적인 통신의 방법, 영상처리인식과 암호화 기능의 구현 등에 대해서는 대부분의 사람들이 전혀 알지 못한다. 하지만 기능의 구현에 대해 자세히 알지 못해도 우리가 실질적으로 스마트폰을 사용하는 데에는 전혀 문제가 없다. 이처럼 외부에서 구현된 기능을 사용 할 때, 객체의 복잡한 내부 원리 및 동작에 대해서는 알 필요 없이 쉽게 사용이 가능하도록 만드는 것이 바로 추상화다.
• 추상화로 통해서 인터페이스는 단순해지며, 정보와 기능에 대한 노출 역시 줄일 수 있다. 이렇게 은닉에 대해 애매하게 느껴지는 부분 때문에 캡슐화와 헷갈릴 수 있는데 결국 추상화의 주 목적은 결국 필요한 특징들을 찾아내고 추려낸 특징들을 기준으로 여러가지의 요소들을 통합해 복잡한 자료 또는 시스템을 이해하기 쉽도록 만드는 것이다

 

---

 

상속 (Inheritance)

• 상위 개념이 가지는 특징들을 하위 개념에 할당하여 물려받는 것을 의미한다. 일반적으로 상위 개념에는 부모, 하위 개념에는 자식이란 용어를 사용한다. 객체 지향 프로그래밍의 핵심이 되는 것이 바로 상속이다. 
• 사실 상속 자체의 개념은 '상속'이란 말보다는 '확장'이란 말이 좀 더 어울리는데, 상위 개념이 가진 기존의 기능을 물려 받으면서 새로운 기능도 추가하게 되는 방식이기 때문이다. 

 

 프로토타입을 기반으로 하는 상속에 대한 내용은 글이 너무 길어질 것 같아 다른 글에서 정리해봐야겠다..

 

---

 

다형성 (Polymorphism)

• 간단히 말하면, 다른 클래스들이 같은 메소드나 속성으로 정의될 수 있다는 것이다. 이 때 메소드는 메소드가 선언된 클래스로 실행영역이 한정된다. 
• 일반적으로 객체 지향에서 다형성의 개념은, 부모 객체에서 정의된 메소드를 자식 객체에서 사용할 때 override, 즉 덮어쓰기 하여 바꿀 수 있다는 것으로 이해하면 좀 더 쉽다.
• 다형성으로 인해서 우리는 같은 동작을 하는 때에 종류마다 분기를 나누고 조건을 지정해 줄 필요가 없어진다.

 

개인적으로 자바스크립트의 객체 지향 프로그래밍에서 다형성이란 개념은 정확히 어떻게 쓰이는지 아직 이해가 되지않는데, 이 부분도 예제들을 좀 더 많이 찾아보고 이해한 뒤 따로 글을 작성해보아야 할 것 같다. 

 

---