[개발 상식] 오버로딩과 오버라이딩(Overloading & Overriding)

오버로딩과 오버라이딩을 알아봅시다.

프론트엔드를 공부하기 때문에 타입스크립트를 기준으로 글을 적습니다.

우선 오버로딩과 오버라이딩을 알아보기 앞서 Call signature와 다형성(Polymorphism) 이 무엇인지 알아봅시다.

🤔Call signature

함수의 타입을 정의하는 방법 중 하나입니다.

type CallSignature = {(a:number, b:number): number};

const add:CallSignature = (a,b) => a+b

 

🤔다형성 (Polymorphism)

다형성은 객체 지향 프로그래밍(OOP)에서의 개념 중 하나로, 여러 객체나 클래스가 동일한 인터페이스 또는 추상 클래스를 공유하면서 각각의 객체나 클래스가 다르게 동작할 수 있는 능력을 의미합니다. 쉽게 말해서 객체나 클래스가 인자 혹은 반환값에 따라 타입을 변화할 수 있는 능력을 말합니다.

🤔오버로딩 (Overloading)

오버로딩은 함수가 여러 개의 Call signature를 가지고 있을 때 발생한다. 쉽게 말하면 함수나 메서드가 여러 개의 타입을 가질 수 있는 것을 말합니다.

오버로딩은 정적 언어에서 많이 사용됩니다. 자바스크립트는 동적 언어이기 때문에 타입이 동적으로 결정되기 때문에 오버로딩의 개념이 부각되지 않습니다.

다음은 타입스크립트에서의 오버로딩의 간단한 예입니다.

type CallSignature = {
    (a:number, b:number): number
    (a:number, b:string): number
};

const add:CallSignature = (a,b) => {
    if(typeof b === "string") return a
    return a+b
}

add 함수는 두 개의 call signature를 가지고 있다. 이에 따라서 b값의 타입은 string 혹은 number를 가질 수 있게 됩니다.

Next.js의 router는 다음과 같은 예시를 가집니다.

const router = useRouter();

router.push("/home")
router.push({
	path : "home",
	state : 1
})

Pages Router에서 router의 push메서드의 첫 번째 인자로는 object와 string을 모두 가질 수 있습니다.

🤔오버라이딩 (Overriding)

오버라이딩은 객체 지향 프로그래밍에서 하위 클래스(sub)가 상위 클래스(super)의 메서드를 재정의 하는 개념입니다.

다음은 자바스크립트에서의 오버라이딩 예시입니다.

// 슈퍼클래스
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log("Animal makes a sound");
  }
}

// 서브클래스
class Cat extends Animal {
  constructor(name) {
    super(name); // 부모 클래스 생성자 호출
  }

  makeSound() {
    console.log(`${this.name} the cat makes a meow sound`);
  }
}

const myCat = new Cat("Whiskers");

myCat.makeSound(); // "Whiskers the cat makes a meow sound"

자바스크립트에서 자식 클래스는 super()를 통해 부모 클래스를 호출하고, 오버라이딩을 사용할 수 있습니다.

다음은 타입 스크립트에서의 예시 입니다.

// 슈퍼클래스
class Animal {
  constructor(private name: string) {}

  makeSound(): void {
    console.log("Animal makes a sound");
  }
}

// 서브클래스
class Cat extends Animal {
  constructor(name: string) {
    super(name); // 부모 클래스 생성자 호출
  }

  makeSound(): void {
    console.log(`${this.name} the cat makes a meow sound`);
  }
}

const myCat: Cat = new Cat("Whiskers");

myCat.makeSound(); // "Whiskers the cat makes a meow sound"

😎결론

오버로딩과 오버라이딩은 다형성을 구현할 수 있는 방법으로, 코드를 더 유연하게 만들어 코드의 재사용성을 높히고 추상적인 방식으로 프로그래밍 할 수 있게 해주는 것입니다!