자바스크립트 메서드 오버라이드와 오버로딩

JavaScript Method Override & Overloading

생성자 함수(클래스)를 이용하여 상속을 하다보면 종종 물려받은 부모의 기능을 그대로 사용하지 않고 재정의해야 할 경우가 발생할 수 있습니다.

이 경우를 메서드 오버라이드라고 하는데 이 글에서는 자바스크립트 오버라이드하는 방법에 대해 알아봅니다.

그리고 마지막에서는 오버로딩(overloading)에 대해서도 간단히 소개합니다.

메서드 오버라이드란?

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

오버라이드는 다음과 같은 경우에 주로 사용합니다.

• 부모 클래스의 기능을 사용하지 않고 자식 클래스에서 구현한 기능을 사용하고 싶은 경우
• 부모 클래스의 기능을 자식 클래스에서 확장하고 싶은 경우

그럼 이 두가지 경우에 대해 좀더 알아보도록 합니다.

부모 클래스의 기능을 자식 클래스에서 재정의

MyParent.prototype.부모메서드 = function() {}

MyChild.prototype.부모메서드 = function() {}

부모 클래스의 기능을 자식 클래스에서 재정의(오버라이드)하는 것은 간단합니다.

위의 문법처럼 부모 클래스의 기능 중 재정의(오버라이드)하고자 하는 기능을 자식 클래스에서 똑같은 이름으로 만들어 주면 됩니다.

다음의 예를 살펴봅니다.

javascript

// 부모 클래스
function MyParent() {
    this.property1 = 'data1';
    console.log('MyParent');
}

MyParent.prototype.method1 = function () {
    console.log('property1 = ' + this.property1);
};

// 자식 클래스
function MyChild() {
    console.log('MyChild');
}

// 부모 클래스 상속하기
MyChild.prototype = new MyParent();
// 생성자 설정
MyChild.prototype.constructor = MyChild;

/**
 * ------------------
 * 메서드 오버라이드
 * ------------------
 **/
MyChild.prototype.method1 = function () {
    console.log('프로퍼티 1은 = ' + this.property1 + ' 입니다.');
};

// 자식 인스턴스 생성
var child = new MyChild();
// 메서드 호출
child.method1();


// 콘솔창 결과
// MyParent
// MyChild
// 프로퍼티 1은 = data1입니다.

위 코드를 실행해 보면 더이상 부모 클래스의 method1() 메서드가 동작하지 않고 자식 클래스에서 작성한 method1() 메서드가 동작하는 것을 확인할 수 있을 것입니다.

이처럼 부모의 기능을 직접 수정하지 않고 부모의 기능을 재정의할 때 메서드 오버라이드를 사용합니다.

부모 클래스의 기능을 자식 클래스에서 확장

실무를 진행하다 보면 부모의 기능을 완전히 새롭게 재정의하는 것이 아니라 부모의 기능을 그대로 사용하면서 동시에 기능을 약간 추가하고 싶은 경우가 있습니다.

이런 경우에도 메서드 오버라이드를 활용할 수 있습니다.

Syntax

MyChild.prototype.부모메서드 = function ([param1, param2, ...]) {
    부모클래스.prototype.부모메서드.call(this[,param1, param2, ...])

    // 추가 확장 구문
}

기본은 오버라이드하고자 하는 부모 클래스의 기능(메서드)를 자식 클래스에서 동일한 이름으로 만들어 주는 것입니다.

이후 메서드 내부에는 함수객체(Fucntion)에서 제공하는 call() 메서드를 활용해 부모의 기능을 호출해 줍니다.

다음으로 추가하고자 하는 구문을 작성해 주면 됩니다.

이해를 돕기 위해 오버라이드를 활용한 기능 확장 예제를 살펴보도록 합니다.

javascript

// 부모 클래스
function MyParent() {
    this.property1 = '문자열 데이터';
    console.log('MyParent()');
}
    
    MyParent.prototype.info = function () {
        console.log('property1 = ' + this.property1);
    };

    // 자식 클래스
function MyChild() {
    console.log('MyChild()');
    this.property2 = '데이터이지롱';
}

// 부모 클래스 상속
MyChild.prototype = new MyParent();
// 생성자 설정
MyChild.prototype.constructor = MyChild;

/**
 * -----------------------------------
 * 메서드 오버라이드를 활용한 기능 확장
 * -----------------------------------
 **/
MyChild.prototype.info = function () { // 확장할 기능인 info() 메서드를 자식 클래스에서 오버라이드 한다.
    MyParent.prototype.info.call(this); // call() 을 이용해 부모 클래스의 info()메서드를 호출한다.
    console.log('프로퍼티 두번째는 ' + this.property2); // 확장하려는 기능을 추가한다.
};

// 자식 인스턴스 생성
var child1 = new MyChild();

// 자식 정보 출력
child1.info(); // '프로퍼티 두번째는 데이터이지롱' 을 출력

위와 같이 메서드 오버라이드를 활용하면 부모의 기능을 확장할 수 있습니다.

자바스크립트에서 메서드 오버로딩

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

하지만 아쉽게도 자바스크립트는 문법적을 오버로딩을 제공하지 않습니다.

대신 생성자 함수를 이용해 일반 객체지향 언어의 클래스를 흉내 내듯이 오버로딩 또한 흉내낼 수 있습니다.

Syntax

javascript

function 함수 또는 메서드이름() {
    arguments 객체 활용
}

자바스크립트에서는 매개변수 정보를 담고 있는 arguments를 이용해 오버로딩을 흉내낼 수 있습니다.

오버로딩은 함수와 메서드에서 동일하게 사용할 수 있습니다.

다음의 예제를 이용해 좀더 알아봅니다.

이 예제는 여러 개의 숫자 값을 더하는 함수입니다.

javascript

function sum() {
    var result = 0;
    for (var i = 0; i < arguments.length; i++) {
        result += arguments[i];
    }
    return result;
}

console.log(sum(10, 20)); // 30
console.log(sum(10, 20, 30)); // 60
console.log(sum(10, 20, 30, 40)); // 100
console.log(sum(10, 20, 30, 40, 50)); // 150

arguments 객체에 담긴 매개변수 값을 매개변수 개수만큼 반복해서 더해주고 있습니다.

오버로딩은 특히 여러분만의 라이브러리를 만들 때 유용하게 사용할 수 있을 것입니다.

Jaehee's WebClub