[JS] JS와 객체지향 언어(OOP : Object Oriented Programming)

들어가며

개발과 전혀 상관 없던 사람으로서 언제 OOP를 처음 들어보았냐고 하면 대부분의 사람들이 컴활을 준비하면서 들었다고 할 것 같다. 'OOP의 대표적인 언어로는 JAVA가 있고, 특징으로는 '모듈화'가 있다.'라고 달달 외웠다. 이제와서 제대로 개발 공부를 하고, JS를 공부하고 귀동냥으로나마 다양한 컴퓨터 언어를 배우면서 OOP에 대한 정확한 개념 이해를 하는 것이 중요함을 느꼈다. 더욱이 ES6 문법이 등장하면서 OOP의 언저리에 있던 JS 또한 OOP에 가까워졌다고 말하는 의견도 있다. 

 

일단 이 문서에서는 

1. 객체지향 프로그램이란 무엇인지
2. ES5 문법과 ES6로 객체를 만드는 차이
3. 프로토타입이란 무엇인지에 대해이야기 해보고자 한다. 

 

---

객체지향 프로그램

1) 객체지향언어 vs 절차지향언어

---

  일단 정의에 들어가기 앞서, 상반된 개념으로 많이 언급되는 절차지향 언어와 비교하며 살펴보고자 한다. 왜냐하면 '객체'라는 말에 비해 '절차'라는 말이 좀 더 익숙하고 둘의 차이점을 통해 정의를 분명히 하는 것이 용이하기 때문이다. 이에 대해서는 아래 문서를 참고하였다.

https://gbsb.tistory.com/3#:~:text=%EC%A0%88%EC%B0%A8%EC%A7%80%ED%96%A5%EC%9D%80%20%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8%EC%9D%98,%ED%9D%90%EB%A6%84%EC%9D%84%20%EC%A7%9C%EB%8A%94%20%EB%B0%A9%EC%8B%9D%EC%9D%B4%EB%8B%A4.

 

 

절차지향 언어라는 것은

말 그대로 글을 읽듯 순서대로 읽히기 때문에 이해하기 쉬울 수는 있을 것 같다. 그러나 가장 큰 단점은 해당 작업에 대해 반복잡업이 어렵다는 것이다. 

 

객체지향 언어는 

위 사진처럼 특정한 역할에 따라 모듈(class)를 만들어 그 안에 공통적인 속성(property)와 기능(method)를 지정해둔다. 그래서 필요할 때마다 class를 가져와 재사용이 가능하다. 이 점이 절차지향 언어와의 차이점이며 장점이다. 

 

 

그러나 이 지점에서 한 가지 의문이 든다.

그렇다면 객체지향은 순서, 혹은 진행 과정이라는 것이 없는 것일까? 그렇지 않다. 

위 글에서도 나오지만 흔히 절차지향과 객체지향을 비교할 때 이런식으로 표현하고는 한다. 이 그림만 보면 단순히 절자지향은 말그대로 절차에 따라 '순서'대로 작성하는 방식이고 객체지향은 공통된 특성을 하나의 모듈(박스, class)로 묶어서 표현하는 방식이라고 이해하기 쉽다. 나 또한 그랬다. 

 

 

객체지향 언어 또한 컴퓨터가 인식하는 방식에 따라 순서대로 읽어나간다. 그렇지 않다면 객체지향은 순서도로 표현할 수 없을 것이다. 그래서 객체 지향언어에서 객체(object)라는 것은 절차지향과는 달리 하나의 모듈(박스, class)로서 공통된 특성과 기능을 묶은 것이라고 이해하였다. 예를 들면 '과일'을 생각했을 때 사과, 오렌지, 바나나 등을 생각하게 된다. 이것이 과일의 특성을 가진 instance라고 할 수 있을 것이며, 과일이기에 가진 속성(property)으로 색깔, 맛 등등을 연결지을 수 있을 것이다. 이런 생각방식과 유사한 것이 있는데 바로 마인드 맵이다. 

 

 

 

하나의 공통적인 특징에서 연결된 idea를 내는 방식은 객체지향프로그래밍을 할 때 유용할 것 같다. 차이가 있다면 좀 더 섬세하게 공통된 속성과 기능에 대해 고민해서 구현해 두어야 한다는 점. 그렇지 않으면 재사용 시에 오류가 날 수 있을 것이다. 

 

 

 

 

 

2) 객체지향언어의 특징

---

객체지향언어를 설명할 때 청사진(blueprint)에 대해서도 언급을 많이 한다.

청사진이라는 것은

1. 영상 건축이나 기계 따위의 도면(圖面)을 복사하는 데 쓰는 사진. 푸른 바탕의 종이 위에 원도면(原圖面)이 흰 줄로 나타난다. 화학 약품을 바른 종이 위에 얇은 종이에 그린 도면을 덮고 빛을 쬐어 현상하여 만든다.

2. 미래에 대한 희망적인 계획이나 구상.

 

을 의미한다고 한다.(출처 : 네이버 사전) 앞으로의 모습을 그리며 대략적인 모습을 표현한 것, 이것이 객체지향 언어에서 자주 사용하는 class의 개념이다. 

예를 들면 내가 한 학교의 교사와 학생의 정보를 정리하는 전산실 직원이 되었다고 가정해보자.

 

 

 

 

절차지향 언어라면

A선생님 이름, 전화번호, 성별, 나이, 담당 과목, 담당 행정	A학생 이름, 전화번호, 성별, 나이, 소속 반
B선생님 이름, 전화번호, 성별, 나이, 담당 과목, 담당 행정	B학생 이름, 전화번호, 성별, 나이, 소속 반
...	...

이런식으로 교사와 학생의 각각의 명수만큼의 변수를 만들어야 할 것이다. 그 변수는 평균적으로 최소 몇백개는 넘을 것이고, 각각의 변수마다 해당 속성이 저장되므로 메모리도 많이 차지 할 것이다. 

 

 

반면 객체지향 언어라면

 

1) 아래와 같이 Person이라는 class를 만들어 활용할 수 있다.(Encapsulation : 캡슐화, Polyunorphism : 다형성) 

또한 Tearcher과 Student라는 class를 만들어 각각의 속성, 기능도 만들고

 

2) Person class의 자식으로 연결지어 Pesron의 속성과 기능을 활용할 수 있도록 할 수도 있다. (Inheritance : 상속) 
3) 이렇게 하나의 모듈로 만드는 과정은 글의 나열에서 한번의 변형의 과정을 거쳐 보기 쉽게 만들어 졌다.
즉 컴퓨터 보다는 사람의 시선으로 재구성되었다. (Abstraction : 추상화)

 

출처 : MDN

 

 

 

이처럼 객체 지향언어는 캡슐화(Encapsulatrion), 상속(Inheritance), 추상화(Abstraction), 다형성(Polyunorphism) 네가지 특성이 있다고 말한다. 

 

 

위 네가지 특징을 풀어쓰자면 다음과 같다.

캡슐화(Encapsulatrion)는 말 그대로 내용을 캡슐처럼 객체 안에 포장하여 넣는다는 의미이다. 일상에서도 캡슐은 위산 등에도 녹지 않고 장에 도달하는 약제를 보호하게 위해 씌우는 껍질을 의미한다. 그렇게 했을 때의 장점은 1) 외부에서 내부 클로저를 파악하는 것이 어렵다는 것과, 묶음으로 이뤄지기 때문에 그 묶음으로 2) 재사용성이 좋다는 것이다.  

 

상속(Inheritance)은 위 두개의 그림에서 나와있듯이 부모 객체의 속성과 메서드를 바탕으로 자식 객체의 기능을 확장하는 것을 의미한다. 이렇게 했을 때 상황에 따라 무제한적으로 변수를 할당하지 않아도 되기 때문에 위와 같이 재사용성이 좋다는 장점이 있다. 다음 글에서도 다루겠지만 이 특징을 JS에서는 프로토타입 체인(prototype chain)으로 구현하고 있다. 

 

추상화(Abstraction)는 말이 어렵기는 하지만 오히려 컴퓨터가 이해하는 방식이 아니라 사람이 이해하기 쉽게 만든 형식으로 변경한 것이라고 이해하는 것이 더 좋았다. 위에서 객체 지향 프로그래밍이 마인드맵과 비슷하다고 했던 것처럼 말이다. 

 

"이 사람의 이름은 000이고, 나이는 nn살 이며, 사는 곳은 서울이고, **과목을 맡고 있습니다."

보다는

이름: 000,
나이 : nn,
사는 곳 : 서울,
담당 : **

이 형식이 보기 좋은 것처럼 말이다. 

 

 

다형성(Polyunorphism)을 쉽게 표현하면 다양한 형태로 바꿀 수 있다는 것이다. 위 사진의 예시를 들자면 객체의 상속의 특징을 이용하여 Person 객체를 이용해 비슷한 자식 객체로 Teacher와 Student를 만드는 것처럼 말이다. 이 자식 객체는 Person의 특징도 가지겠지만 활용에 따라 속성과 메소드를 추가할 수 있을 것이다. 

(참고로 MDN에서 method를 설명하는 글 끝부분에 Polyfill이 있는 경우도 있는데 이는 해당 메소드의 기능을 해당 메소드 없이 구현하는 방식을 표현한 것이라고 한다)

 

 

 

다음 글에서는 JS가 이 객체 구현을 ES5와 ES6에서는 어떻게 구현을 했는지를 다뤄보며,

프로토타입에 대해서 이야기를 해보려고 한다. 왜냐하면 '프로토타입'이라는 개념은 JS에서 중요한 개념으로 보이기 때문이다 - JS에 대한 공식문서라고 알려진 MDN에서는 프로토타입 기반 언어(prototype-based language)라고 정의하고 있다. 

 

사실 위 내용에 대해서는 이전 블로그에 관련 슬라이드를 잠시 올리긴 하였다.
https://s-realstory.tistory.com/9

 

참고자료) 
https://gbsb.tistory.com/3

MDN 문서 (https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object-oriented_JS)