[JavaScript] 객체 지향 프로그래밍

Hannahhh·2022년 7월 22일
0

JavaScript

목록 보기
28/47

🔍 객체 지향 프로그래밍(OOP)

사람이 세계를 보고 이해하는 방법을 흉내 낸 방법론

객체 지향 프로그래밍은 프로그램 설계 철학 중 하나로, 현실 세계를 기반으로 프로그래밍 모델을 만들 때에 유용하다.

객체로 그룹화되며, 이 객체는 생성 후 ,메모리상에서 반환되기 전까지 객체 내의 모든 것이 유지된다.

  • 데이터와 기능(속성, 메서드)이 별개로 취급되지 않고, 한 번에 묶어서 처리할 수 있다.
    링크텍스트

절차 지향 프로그래밍 언어: C, portran 등 초기의 프로그래밍 언어

객체 지향 프로그래밍 언어: Java, C++, C# 등 현대의 프로그래밍 언어



👀 OOP Basic Concepts


✔ Encapsulation(캡슐화)

데이터(속성)와 기능(메서드)를 하나의 객체 안에 패키징하는 것으로, 느슨하게 결합되는 것을 의미한다.


⭐ 느슨한 결합?
코드 실행 순서에따라 절차적으로 코드를 작성하는 것이 아니라, 코드가 상징하는 실제 모습과 닯게 코드를 모아 결합하는 것을 의미한다.
코드만 보고도 instance의 기능을 상상할 수 있게 작성하는 방법을 추구한다.


캡슐화 개념은 '은닉화' 의 특징도 포함하고 있어, 디테일한 구현 및 데이터는 숨기고, 객체 외부에서 필요한 동작(메서드)만 노출시킨다. 따라서, 객체 내 메서드의 구현만 수정하고 노출된 메서드를 사용하기 때문에, 언제든 구현을 수정할 수 있다.

⭐ 정리하면, 캡슐화는 코드가 복잡하지 않게 만들고, 재사용성을 높인다.


  • javaScript는 java, TypeScript와 다르게 은닉화를 도와주는 private 키워드 사용이 불가능하다. 일반적으로 클로저 모듈 패턴을 사용하며, ES2019부터 class/instance형태로 만들 때 사용할 수 있는 # 키워드가 도입되었다.
    링크텍스트



✔ Abstraction(추상화)

내부 구현은 복잡하지만 노출되는 부분은 단순하게 만드는 것으로, 추상화를 통해서 인터페이스를 단순화할 수 있다.

따라서, 너무 많은 기능들이 노출되지 않기 때문에 예기치 못한 사용상의 변화를 방지할 수 있다.

class 정의 시, 메서드와 속성만 정의한 것을 인터페이스라고 부르며, 추상화의 본질이다.


⭐ 정리하면, 추상화는 코드가 복잡하지 않게 만들고, 단순화된 사용으로 변화의 영향을 최소화한다.


* JavaScript는 Java, TypeScript와는 다르게, 추상화를 도와주는 `interface` 키워드 사용이 불가능하다.



✔ Inheritance(상속)

부모 class의 특징을 자식 class가 물려받는 것으로, 정확하게는 기본 class의 특징을 파생 class가 상속받는 것이다.

Human class가 있다고 가정하자.
Student class를 추가 생성할 때, Student class의 속성과 메서드를 재구현할 필요없이 학생도 결국 사람이므로 Human class를 상속받을 수 있다. 상속받은 후, 추가적으로 학습 내용, 공부하다 와 같은 적합한 속성, 메서드를 추가한다.


⭐ 정리하면, 상속은 불필요한 코드를 줄여 재사용성을 높인다.



✔ Polymorphism(다형성)

poly('많은') + morphism('형태'), 즉, 다양한 형태를 가진다는 것으로, 같은 메서드라도 다른 방식으로 구현할 수 있다는 것이다.

ex) 입으로 소리를 내다 -> 고양이, 사람, 개, 오리는 제각각의 소리를 낸다.


HTML element를 예로들면,

각 element(Textbox, Select, CheckBox)는 모두 객체이므로, 모양을 그리고 화면에 뿌리는 메서드가 존재한다. 이 메서드를 render라고 가정해보자.

각 element는 HTML Element라는 class에 메서드를 만들고 상속을 받는다.

그러나 같은 이름의 render 메서드이지만,
Textbox는 가로로 긴 네모 상자와 커서가 있는 형태로, 눌렀을 때 선택지 리스트가 출력되는 형태로, Checkbox는 누를 수 있는 체크박스의 형태로 각각 다르게 작동한다.


만약 다형성이 제공되지 않는다면, 기본 클래스에 종류별로 각각 다른 메서드를 만들어야한다.
render() -> renderSelect(),renderTextBox(),renderCheckBox


⭐ 정리하면, 다형성은 동일한 메서드에 대해 조건문 대신 객체의 특성에 따라 다르게 작성할 수 있다.




🔥 정리




Reference: 코드스테이츠

0개의 댓글