다섯 번째 Deno(JavaScript) 기초 강의에서는 객체 지향적 프로그램 설계에 관하여 설명하겠습니다.

객체 지향

객체 지향이란 프로그램의 코드를 단일화된 코드 대신 “객체”로 분리하여 운용함으로서 각 객체가 서로 상호작용하여 유기적으로 동작할 수 있도록 설계하는 패러다임입니다. 다른 프로그래밍 언어에서는 객체 지향을 위한 Class라는 개념이 도입되어 있습니다. 하지만 JavaScript에는 Class가 없었고 Class 대신 함수를 객체 지향 프로그래밍에 이용할 수 있습니다. 비교적 최신 버전에 해당하는 JavaScript ES6에서는 Class가 도입되었습니다. 그럼에도 JavaScript를 이해하기 위해서는 함수를 이용한 객체 지향과 Prototype에 대해 공부할 필요가 있습니다.

함수를 이용한 객체 지향 구현

함수를 이용하여 사람을 구현해 보겠습니다.

function greeting(person) {
    return 'Hello! ' + person.name;
}

function person() {
    this.name = null;
    this.age = -1;      // 세는 나이
    this.height = -1;   // cm
    this.weight = -1;   // kg
    this.birthday = -1; // YYYYMMdd(Ex: 20200717)
}

const gildong = new person();
gildong.name = '홍길동';
gildong.age = 577;
gildong.height = 170;
gildong.weight = 70;
gildong.birthday = 14430101;

const gilsoon = new person();
gilsson.name = '홍길순';
gilsoon.age = 575;
gilsoon.height = 150;
gilsoon.weight = 40;
gilsoon.birthday = 14450101;

console.log(greeting(gildong));
// Hello! 홍길동

console.log(greeting(gilsoon));
// Hello! 홍길순

const에 객체를 저장하면 객체 자체를 변경될 수 없더라도 객체의 자식은 변경될 수 있습니다.

예제에서는 현대에서 인간이라면 기본적으로 가지고 있는 정보 중 일부인 이름, 나이, 키, 무게, 생일을 person이라는 객체(함수도 객체입니다.)에 저장하였습니다. 그리고 미리 생성된 greeting 함수에 person 객체를 입력하여 인사하는 기능을 수행하도록 코드를 작성했습니다. 위와 같이 여러 객체를 처리하는 코드를 정립할 수 있습니다.

Prototype

방금 전에 예제로 다뤘던 person 객체에 sleep이라는 함수를 추가하여 다음과 같이 사용할 수 있습니다.

function person(name) {
    this.name = name;
    this.sleep = function() {
        console.log(this.name + '은(는) 침대에 누웠습니다.');
    }
}

const gildong = new Person('홍길동');
gildong.sleep();
// 홍길동은(는) 침대에 누웠습니다.

위와 같이 구성된 상태에서 홍길동에 이어 홍길순, 김철수, 박영희에 대한 person 객체를 생성하면 각 객체에 하위 객체로 sleep 함수가 저장됩니다. 같은 기능을 하는 함수임에도 각 person 객체마다 불필요하게 메모리에 저장되는 것입니다.

Prototype은 해당 객체에 대해 공통되는 하위 객체를 메모리에 한 번만 탑재합니다. 그리고 메모리에 탑재된 하위 객체를 링크 형태로 연결함으로서 실질적으로는 같은 기능을 수행하면서도 메모리 사용을 줄일 수 있습니다. 다음 예제에서 prototype 함수를 선언하는 것을 잘 살펴보고, 방금 전에 다룬 예제 코드와 비교해 보세요.

function person(name) {
    this.name = name;
}

person.prototype.sleep = function() {
    console.log(this.name + '은(는) 침대에 누웠습니다.');
}

const gildong = new Person('홍길동');
gildong.sleep();
// 홍길동은(는) 침대에 누웠습니다.

Prototype은 다음의 형태와 같이 선언하여 사용할 수 있습니다.

function abc() {};

abc.prototype.ate = function() {

}

위에 관한 설명입니다.

  1. abc 객체를 생성합니다.
  2. abc 객체에 대한 prototype 함수 ate를 생성합니다.

Prototype 하위 객체의 이름 규정은 기초 강의 #2에서 설명드린 변수의 이름 규정과 동일합니다.

다음과 같이 Prototype에 함수가 아닌 다른 자료형의 객체를 저장할 수 있습니다.

function program() {};

program.prototype.version = '1.0.0';

다음 강의 예고

다음 강의에서는 JavaScript ES6에서의 익명 함수와 콜백 함수에 관하여 알아보겠습니다.

질문이 있으시면 아래 댓글을 이용해 주세요. 감사합니다.