javascript_jquery_basic_5_1

객체지향 프로그래밍

객체지향 프로그래밍 기초

절차지향 프로그래밍

절차지향 프로그래밍은 문제를 여러 개의 작은 함수로 나눠 작성하며 이 함수들을 원하는 순서에 맞게 작성하는 방식을 말한다. 절차지향 프로그래밍의 가장 큰 특징은 처리 부분인 함수들에서 전역 데이터를 공유해서 사용한다는 점이다. 데이터는 일반적으로 전역 데이터로 만들어지며 함수 호출시 공유 데이터를 매개변수 값으로 넘기는 구조로 되어있다.

객체지향 프로그래밍

객체지향 프로그래밍은 문제를 여러 개의 객체 단위로 나눠 작업하는 방식을 말한다. 이 방식은 오늘날 가장 많이 사용하는 대표적인 프로그래밍 방식이다. 객체지향 프로그래밍의 가장 큰 특징은 클래스를 이용해 연관 있는 처리부분(함수)과 데이터 부분(변수)를 하나로 묶어 객체(인스턴스)를 생성해 사용한다는 점이다.

자바스크립트는 객체지향 프로그래밍 언어인가?

자바스크립트는 객체지향 프로그래밍 언어가 아니다. 그러나 ES6 부터 객체지향 프로그래밍 언어에 필요한 기능을 제공하므로써 객체지향 언어로 변화해가고 있다.

객체지향 프로그래밍의 특징

객체지향 프로그래밍이란 일종의 논문과도 같은 연구 결과의 산물이다. 유지보수하기 쉽고 냄새 나지 않는 멋진 코드를 만들 수 있을까 수없이 노력한 끝에 완성한 최상의 결과물이다. 객체지향 언어는 아래 네 가지 특징을 구현할 수 있는 기능을 제공해야 한다.

• 추상화
• 캡슐화
• 상속
• 다형성

추상화

추상화는 설계하는 작업 자체를 나타낸다. 추상화의 가장 큰 특징은 프로퍼티와 메서드의 이름을 작성하는 선언 부분만 만들 뿐 구현 소스를 구현하지 않는다는 점이다.

예제: ES5 기반 추상클래스와 추상메서드 구현

캡슐화

추상화 작업 내용중 어떤 프로퍼티와 메서드는 외부에서 접근 가능하고 또 어떤 프로퍼티와 메서드는 외부에서 접근하지 못하게 해야 하는 경우가 있다. 이 작업을 캡슐화라고 한다.

예제: ES5 기반 접근지정자 구현

상속

상속은 특정 클래스(부모 클래스)의 속성과 메서드를 하위(자식) 클래스가 물려받는 것을 의미한다.

예제: ES5 기반 상속 구현
예제: ES6 기반 상속 구현

다형성

다형성은 특정 기능을 선언(설계)부분과 구현(동작)부분으로 분리한 후 구현부분을 다양한 방법으로 만들어 선택해서 사용할 수 있게 하는 기능이다. 여기서 선언 부분은 인터페이스라고도 한다.

예제: this를 이용한 다형성 구현
예제: 상속의 메서드 오버라이드를 이용한 다형성 구현

메서드오버라이드

메서드 오버라이드는 자식 클래스에서 부모 클래스의 기능을 재정의할 때 사용하는 기능이다.

메서드 오버로딩

메서드 오버로딩은 동일한 이름을 가진 여러 개의 메서드를 만든 후 매개변수 타입과 개수에 맞는 메서드가 자동으로 호출되는 기능을 뜻한다.

constructor 프로퍼티

클래스를 만들면 자동으로 prototype의 constructor라는 프로퍼티가 만들어진다.
이 프로퍼티에는 해당 클래스의 생성자 정보가 기본값으로 담기게 된다. constructor 프로퍼티를 이용해 사용하는 객체(인스턴스)가 어떤 클래스의 인스턴스인지 알아낼 수 있다. 하지만 상속관계를 맺는 경우 자식 클래스의 constructor 프로퍼티에는 기본적으로 부모클래스의 생성자가 담기게 되어 constructor 프로퍼티를 가지고는 해당 객체의 클래스를 알아낼 수가 없다.

위 문제를 해결하기 위해서는 constructor 프로퍼티에 해당 생성자를 설정해주면 된다.

MyChild.prototype.constructor = MyChild;

클래스 상속 규칙

1. 코드 재사용만을 위해 클래스 상속을 사용하면 안된다
2. 중복 코드 제거만을 위해 클래스 상속을 사용해서도 안된다.
3. 클래스 상속을 패밀리 관계(IS A)를 유지하면서 기능을 확장할 때만 사용해야 한다.

합성

합성(Composition)이란 필요한 기능을 직접 구현하는 것이 아니라 필요한 기능을 구현하고 있는 객체와 연결해서 기능을 사용하는 것을 의미한다. 이때 기능을 구현하고 있는 객체와 기능을 사용하는 객체 간의 관계를 합성관계라고 부른다.

클래스 상속 vs. 합성

아래와 같은 문장을 만들어보면 클래스 간의 관계가 보다 명확해진다.

• 상속관계 : ~은 ~이다(is-a)
• 포함관계 : ~은 ~을 가지고 있다(has-a)

예제)

• SportsCar는 Car이다 (상속 관계)
• Deck은 Card를 가지고 있다 (포함 관계)
• SimpleCallery는 HAlignable(가로정렬)을 가지고 있다. (포함 관계)

이처럼 포함 관계가 성립하는 경우 합성을 사용해 클래스의 관계를 맺어주면 된다.

종합 미션

1. 여러개의 롤링 배너 만들기
2. 상속 활용
3. 다형성과 합성 활용