[JS] 실행 컨텍스트 뿌수기 #4 객체지향프로그래밍(OOP)

 

 

 

 

 

객체지향 프로그래밍이란, 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 이야기하는 것입니다.

 

 

객체 지향 프로그래밍은 실세계의 실체인 사물과 개념을 인식하는 철학적 사고를 프로그래밍에 접목하려는 시도에서 시작되었습니다.

 

'존재하는 사물' 에는 그것의 '본질'이 반드시 존재한다는 플라톤의 논리를 프로그래밍에 접목시킨 것입니다.

 

간단한 코드와 함께 어떻게 철학적인 사고가 프로그래밍에 합쳐졌는지 확인해보겠습니다.

 

class chair {    // 추상적인 존재
...
}

... new chair();   // 실체화

 

chair의 추상적인 본질을 class로 정의(생성)하고 new 키워드를 통해 실체화 시킨 것을 확인해볼 수 있습니다.

 

추상적으로 존재하던 class가 new 키워드를 사용한 순간, 실제 메모리에 생성되고 구체적으로 존재(인스턴스화)하게 됩니다.

 

 

또한 실체는 특징과 성질을 나타내는 속성을 가지고 있고, 이를 통해 실체를 인식하거나 구별 할 수 있습니다.

 

그 다양한 속성 중에서 프로그램에 필요한 속성만 간추려 내어 표현하는 것을 추상화라고 합니다.

 

 

const person = {
	name: "Lee",
    address: "Seoul"
}

console.log(person)

 

위 코드를 보면 이름과 주소라는 속성으로 다른 객체들과 다른 차별점을 가지고 있으며, 개발자는 이 차별점을 통해 객체의 특징과 역할을 특정할 수 있습니다. 즉, 속성을 통해 여러개의 값을 하나의 단위로 구성한 복합적인 자료구조. 이것을 객체라고 합니다.

객체지향 프로그래밍은 독립적인 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임입니다.

 

 

 

객체지향 프로그래밍은 객체의 상태(state)를 나타내는 데이터와상태 데이터를 조작할 수 있는 동작(be-havior)을 하나의 논리적인 단위로 묶어 생각해야합니다. 따라서 객체는 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조라고 할 수 있습니다.

객체의 상태는 프로퍼티, 객체의 동작을 메서드라고 합니다.

 

 

그렇다면 객체지향프로그래밍을 적용하여 개발한다면 어떤 이점이 있을까요?

 

그 장점을 알기위해 저희는 상속과 프로토타입을 알아야합니다.

 

먼저 상속이란, 객체지향 프로그래밍의 핵심 개념으로, 어떤 객체의 프로퍼티 혹은 메서드를  다른 객체가 삭속받아 그래도 사용할 수 있는 것을 말합니다.

 

자바스크립트는 이 상속을 프로토타입을 기반으로 구현하여 불필요한 중복을 제거합니다. 여기서 저희는 알 수 있습니다. 이 객체지향프로그래밍의 장점을! 바로 "재사용성" 입니다. 바퀴를 다시 발명하지 마라 라는 개발계의 격언을 그래도 적용시켜볼 수 있는 패러다임입니다.

객체의 프로퍼티와 메서드를 추상적인 개념으로 생성하고 new 키워드를 통해 실제적인 메모리에 저장하여 사용할 수 있으며, 새로운 객체가 비슷한 상태, 특징, 동작을 가지고 있다면 상속을 통해 코드를 재사용함으로 개발비용을 현저히 줄일 수 있는 것입니다.

 

아래 코드를 통해 상속에 대해 자세히 알아보겠습니다.

// 생성자 함수
function Circle(radius) {
	this.radius = radius;
	this.getArea = function () {
		return Math.PI * this.radius ** 2;
	};
};

const circle1 = new Circle(1);
const circle2 = new Circle(2);

// Circle 생성자 함수는 인스턴스를 생성할 때마다 동일한 동작을 하는
// getArea 메서드를 중복 생성하고 모든 인스턴스가 중복 소유합니다.
// getArea 메서드는 하나만 생성하여 모든 인스턴스가 공유해서 사용하는 것이 바람직합니다.
console.log(circle1.getArea === circle2.getArea) // false ㅠㅠ

 

 

위 코드를 보면 circle1과 circle2는  Circle 함수를 상속받습니다. 추상적인 Circle 함수의 모습을 보시죠. radius가 명확히 정의되어있지 않고 흐물텅하게 정의되어있습니다. 또한 들어오는 인자값에 따라 getArea 함수의 반환값도 달라질 것입니다.

 

객체지향프로그래밍을 하지않았다면 circle1과 circle2를 각각 새로 생성해야했을 것이고, 개발비용도 함께 상승했을 것입니다.

상속을 통해 간단하고 재사용성좋은 코드를 만들어낸 것입니다.

 

하지만 여기서 또 한번 들어가보겠습니다.

우리가 getArea 함수를 각 인스턴스에 모두 가지고 있을 필요가 있을까요? 어차피 동작하는 메서드는 모두 동일할텐데 말이죠.

이것도 개발비용을 절약할 수 있는 부분입니다! 함께 살펴보시죠

 

// 생성자 함수
function Circle(radius) {
	this.radius = radius;
};

Circle.prototype.getArea = function () {
return Math.PI * this.radius ** 2;
}

const circle1 = new Circle(1);
const circle2 = new Circle(2);

// Circle.prototype.getArea 를 통해 상속받을 부모 함수의 prototype에 메서드를 설정함으로 
// 모든 인스턴스가 하나의 메서드(getArea)를 공유하게 됩니다. 
// 각 인스턴스마다 getArea 메서드를 들고 있던 방식에서 하나의 prototype을 공유하는 방식으로
// 개선되었습니다!! 짝짝짝!
console.log(circle1.getArea === circle2.getArea) // true ^^

 

위 설명과 같이 Circle 생성자 함수의 prototype에 getArea 메서드를 담아놓으면, Circle을 상속받은 모든 인스턴스에는 getArea 메서드를 prototype을 통해 사용할 수 있게 됩니다.

 

상속에 대한 개념을 설명하기 위해 프로토타입을 열거했지만, 프로토타입에 대한 더 자세한 이야기는 다음 포스팅에 진행하도록 하겠습니다.  

정리하면 자바스크립트에서의 상속은 프로토타입을 기반으로 상속을 구현하며, 상속을 통한 객체지향프로그래밍은 서비스의 확장성을 유연하게 하며, 개발비용도 현저히 낮출 수 있다는 엄청난 장점을 지닌 패러다임입니다.