[JavaScript] 오버로딩 vs 오버라이딩 개념

JavaScript 오버로딩과 오버라이딩 개념 정리

오버로딩과 오버라이딩은 객체지향 프로그래밍에서 자주 등장하는 개념이다. 이름이 비슷해서 헷갈리기 쉽지만, 실제 의미는 다르다.

간단히 말하면 오버로딩은 같은 이름의 함수를 매개변수에 따라 다르게 사용하는 것이고, 오버라이딩은 부모에게 물려받은 메서드를 자식 클래스에서 다시 정의하는 것이다.

JavaScript에서는 Java나 C++처럼 메서드 시그니처 기준의 오버로딩은 지원하지 않는다. 하지만 매개변수 개수, 타입 검사, 기본값, rest parameter 등을 활용해서 오버로딩처럼 구현할 수 있다. 반면 오버라이딩은 class 상속 문법을 통해 자연스럽게 사용할 수 있다.

1. 오버로딩과 오버라이딩 차이

구분	오버로딩	오버라이딩
의미	같은 이름의 함수를 매개변수에 따라 다르게 사용	부모 메서드를 자식 클래스에서 다시 정의
기준	매개변수 개수, 타입, 순서	상속 관계와 같은 메서드 이름
JavaScript 지원 여부	전통적인 방식은 지원하지 않음	지원함
주 사용 목적	다양한 입력값 처리	부모 기능을 자식 상황에 맞게 변경

2. 오버로딩이란?

오버로딩은 같은 이름의 함수를 여러 개 만들고, 전달되는 매개변수에 따라 다른 동작을 하도록 만드는 방식이다.

Java 같은 언어에서는 아래처럼 같은 이름의 메서드를 여러 개 만들 수 있다.

print(String text)
print(int number)
print(String text, int count)

함수 이름은 같지만 매개변수의 타입이나 개수가 다르기 때문에 서로 다른 함수로 구분된다.

JavaScript에서는 같은 이름의 함수를 여러 번 선언하면?

JavaScript에서는 같은 이름의 함수를 여러 번 선언하면, 마지막에 선언된 함수가 앞의 함수를 덮어쓴다.

function show(value) {
  console.log("문자열 처리:", value);
}

function show(value, count) {
  console.log("문자열과 숫자 처리:", value, count);
}

show("안녕하세요");

위 코드에서 첫 번째 show 함수는 유지되지 않는다. 두 번째로 선언한 show 함수가 최종적으로 사용된다.

그래서 JavaScript에서는 Java처럼 함수 시그니처를 기준으로 자동 구분되는 오버로딩은 사용할 수 없다.

3. JavaScript에서 오버로딩처럼 구현하는 방법

JavaScript에서는 직접 조건문을 사용해서 매개변수의 개수나 타입을 확인하는 방식으로 오버로딩과 비슷한 처리를 할 수 있다.

1) 매개변수 개수로 구분하기

function introduce(name, age) {
  if (age === undefined) {
    console.log("이름:", name);
  } else {
    console.log("이름:", name + ", 나이:", age);
  }
}

introduce("건우");
introduce("건우", 27);

age 값이 전달되었는지 확인해서 동작을 다르게 처리한다. 이것은 전통적인 오버로딩은 아니지만, 사용하는 입장에서는 오버로딩처럼 보인다.

2) 타입으로 구분하기

function print(value) {
  if (typeof value === "string") {
    console.log("문자열:", value);
  } else if (typeof value === "number") {
    console.log("숫자:", value);
  } else {
    console.log("기타 값:", value);
  }
}

print("Hello");
print(100);
print(true);

typeof를 사용하면 전달된 값의 타입에 따라 다른 로직을 실행할 수 있다.

3) 기본값을 사용하기

function order(menu, count = 1) {
  console.log(menu + " " + count + "개 주문");
}

order("아메리카노");
order("라떼", 2);

매개변수가 전달되지 않았을 때 기본값을 지정하면, 함수 호출 방식을 더 유연하게 만들 수 있다.

4) rest parameter 사용하기

function sum(...numbers) {
  let total = 0;

  for (const number of numbers) {
    total += number;
  }

  return total;
}

console.log(sum(1, 2));
console.log(sum(1, 2, 3, 4));

...numbers는 전달된 인자들을 배열처럼 모아준다. 인자의 개수가 정해져 있지 않을 때 유용하다.

4. 오버라이딩이란?

오버라이딩은 부모 클래스에 있는 메서드를 자식 클래스에서 같은 이름으로 다시 정의하는 것이다.

부모의 기본 동작을 그대로 사용하지 않고, 자식 클래스의 목적에 맞게 바꾸고 싶을 때 사용한다.

class Animal {
  sound() {
    console.log("동물이 소리를 냅니다.");
  }
}

class Dog extends Animal {
  sound() {
    console.log("멍멍!");
  }
}

const dog = new Dog();
dog.sound();

Dog 클래스는 Animal 클래스를 상속받았다. 하지만 sound() 메서드를 다시 정의했기 때문에, dog.sound()를 호출하면 부모의 메서드가 아니라 자식의 메서드가 실행된다.

5. super를 사용한 부모 메서드 호출

오버라이딩을 하더라도 부모 클래스의 기능을 완전히 버리고 싶지 않을 때가 있다. 이럴 때는 super를 사용해서 부모 메서드를 호출할 수 있다.

class Member {
  login() {
    console.log("기본 로그인 처리");
  }
}

class Admin extends Member {
  login() {
    super.login();
    console.log("관리자 권한 확인");
  }
}

const admin = new Admin();
admin.login();

위 코드에서는 Admin 클래스가 login() 메서드를 오버라이딩했다. 하지만 super.login()을 사용했기 때문에 부모 클래스의 로그인 처리도 함께 실행된다.

실무에서는 기존 공통 로직은 부모 메서드에 두고, 자식 클래스에서는 추가 검증이나 다른 화면 처리만 덧붙이는 방식으로 많이 사용한다.

6. 프로토타입 기반 오버라이딩

JavaScript는 class 문법이 생기기 전부터 prototype 기반으로 객체를 다뤘다. 그래서 prototype을 이용해서도 메서드를 재정의할 수 있다.

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

User.prototype.sayHello = function() {
  console.log("안녕하세요. 저는 " + this.name + "입니다.");
};

function Admin(name) {
  User.call(this, name);
}

Admin.prototype = Object.create(User.prototype);
Admin.prototype.constructor = Admin;

Admin.prototype.sayHello = function() {
  console.log("관리자 " + this.name + "입니다.");
};

const admin = new Admin("건우");
admin.sayHello();

위 코드에서는 Admin.prototype.sayHello를 새로 정의해서 부모 역할을 하는 User의 sayHello 동작을 바꿨다.

요즘은 class 문법을 더 많이 사용하지만, JavaScript 내부 동작을 이해하려면 prototype 기반 구조도 알아두는 것이 좋다.

7. 오버로딩과 오버라이딩 예시 비교

오버로딩처럼 구현한 예시

function search(keyword, option) {
  if (option === undefined) {
    console.log("기본 검색:", keyword);
  } else {
    console.log("상세 검색:", keyword, option);
  }
}

search("영화");
search("영화", "최신순");

같은 search 함수지만 전달되는 값에 따라 기본 검색과 상세 검색을 다르게 처리한다.

오버라이딩 예시

class Board {
  write() {
    console.log("일반 게시글 작성");
  }
}

class NoticeBoard extends Board {
  write() {
    console.log("공지사항 작성");
  }
}

const notice = new NoticeBoard();
notice.write();

NoticeBoard는 Board의 write() 메서드를 다시 정의했다. 이것이 오버라이딩이다.

8. 자주 헷갈리는 부분

Q. JavaScript는 오버로딩을 지원하나요?

JavaScript는 Java처럼 매개변수 타입이나 개수에 따라 함수를 자동으로 구분하는 전통적인 오버로딩은 지원하지 않는다.

같은 이름의 함수를 여러 번 선언하면 각각 따로 존재하는 것이 아니라, 마지막에 선언된 함수가 앞의 함수를 덮어쓴다.

function test(value) {
  console.log("첫 번째 함수");
}

function test(value, count) {
  console.log("두 번째 함수");
}

test("hello");

위 코드에서는 첫 번째 test 함수가 유지되지 않고, 두 번째 test 함수가 실행된다.

Q. 그럼 JavaScript에서는 오버로딩을 아예 못 쓰나요?

정확히 말하면 JavaScript는 문법적으로 오버로딩을 직접 지원하지 않는다. 하지만 함수 내부에서 매개변수 개수, 타입, 기본값 등을 확인해서 오버로딩과 비슷한 흐름을 만들 수 있다.

function getUserInfo(name, age) {
  if (age === undefined) {
    return name + "님의 정보입니다.";
  }

  return name + "님은 " + age + "살입니다.";
}

console.log(getUserInfo("건우"));
console.log(getUserInfo("건우", 27));

하나의 함수 안에서 전달된 값이 있는지 없는지를 확인하고, 상황에 따라 다른 결과를 반환하는 방식이다.

Q. JavaScript에서 오버라이딩은 가능한가요?

가능하다. 부모 클래스에 있는 메서드와 같은 이름의 메서드를 자식 클래스에서 다시 정의하면 오버라이딩이 된다.

class Animal {
  sound() {
    console.log("동물이 소리를 냅니다.");
  }
}

class Cat extends Animal {
  sound() {
    console.log("야옹");
  }
}

const cat = new Cat();
cat.sound();

Cat 클래스는 Animal 클래스를 상속받았지만, sound() 메서드를 다시 정의했다. 그래서 cat.sound()를 호출하면 부모 메서드가 아니라 자식 클래스의 메서드가 실행된다.

Q. 오버로딩과 오버라이딩은 어떻게 구분하면 좋을까요?

오버로딩은 같은 함수 이름을 다양한 입력 방식으로 사용하는 개념이고, 오버라이딩은 상속받은 메서드를 자식 클래스에서 다시 정의하는 개념이다.

구분	핵심 기준	JavaScript에서의 특징
오버로딩	매개변수 개수, 타입, 기본값	직접 지원하지 않지만 비슷하게 구현 가능
오버라이딩	상속 관계와 메서드 재정의	class와 extends로 구현 가능

9. 핵심 정리

오버로딩은 같은 이름의 함수를 매개변수에 따라 다르게 사용하는 개념이다.
JavaScript는 전통적인 함수 오버로딩을 지원하지 않는다.
같은 이름의 함수를 여러 번 선언하면 마지막 함수가 앞의 함수를 덮어쓴다.
JavaScript에서는 조건문, 타입 검사, 기본값, rest parameter로 오버로딩처럼 구현한다.
오버라이딩은 부모 클래스의 메서드를 자식 클래스에서 다시 정의하는 것이다.
JavaScript의 class와 extends를 사용하면 오버라이딩을 구현할 수 있다.
부모 메서드를 함께 사용하고 싶다면 super를 사용한다.

정리하면,
JavaScript에서 오버로딩은 언어 차원에서 직접 지원되는 기능이라기보다는 개발자가 조건문과 매개변수 처리를 통해 비슷하게 구현하는 방식이다. 반면 오버라이딩은 상속 구조에서 부모 메서드를 자식 클래스가 다시 정의하는 방식으로 사용할 수 있다.

GWDevelBlog

'Computer Science > JavaScript' 카테고리의 다른 글

[JavaScript] 개념노트 8편: 화살표 함수와 함수 표현식 (0)	2026.06.04
[JavaScript] 개념노트 7편: 함수 기본 개념 (0)	2026.06.02
[JavaScript] 개념노트 6편: 반복문 for, while, for...of (0)	2026.02.13
[JavaScript] 개념노트 5편: 조건문 if, else, switch (0)	2026.02.13
[JavaScript] 개념노트 4편: 연산자와 형 변환 (0)	2026.02.13