OverRiding(오버라이딩)과 OverLoading(오버로딩) 간단 정리

OverRiding(오버라이딩)

부모 Class로 부터 받은 메서드와 같은 이름의 내용이 다른 매서드를 재정의해 덮어 씌우는 방식.

[경우]

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

[조건]

• 매서드의 이름이 같아야 한다.
• 매서드가 받는 매개변수(parameter)가 같아야 한다.
• 매서드의 반환 타입이 같아야 한다.

class greet { constructor() {}; hello() { return "안녕하세요"; } bye() { return "ㅃ2ㅃ2"; } } class greet_new extends greet{ hello() { return "ㅎㅇㅎㅇ"; } } const foo = new greet_new(); console.log(foo.hello()); // ㅎㅇㅎㅇ console.log(foo.bye()); // ㅃ2ㅃ2

---

OverLoading (오버로딩)

한 Classs 내에서 같은 이름의 다른 매개변수를 받는 매서드를 선언하여 구별하여 호출할 수 있도록 하는 방식.

[조건]

• 매서드의 이름이 같아야 한다.
• 매서드가 받는 매개변수(parameter)의 개수 혹은 타입이 달라야 한다.

[주의]

• 자바스크립트는 문법적으로 오버로딩을 제공하지 않는다. (타입스크립트는 오버로딩을 제공한다.)
• (Java와 같이 오버로딩을 하게되면, 맨 아래에 쓴 매서드가 기존의 작성된 매서드들을 다 덮어 씌울 뿐이다. 즉, 매서드가 매개변수에 따라 구별되지 않는다.)
• 하지만, 매개변수 정보를 담고 있는 arguments 객체를 이용해 오버로딩을 흉내낼 수는 있다.

(arguments 객체는 함수를 호출할 때 넘긴 인자들이 배열 형태로 저장된 객체를 의미하며, 유사 배열 객체이다.)

// JS로 흉내낸 오버로딩 function sum() { let stringResult = ''; let numberResult = 0; for(let i = 0; i < arguments.length; i++) { if (typeof(arguments[i]) == "string") { stringResult += arguments[i] + ","; } else if (typeof(arguments[i]) == "number") { numberResult += arguments[i]; } } if (stringResult != '') { return stringResult; } else { return numberResult; } }

// TS Array API 문서 中 (오버로딩이 사용되고 있음을 알 수 있음.) concat(...items: ConcatArray<T>[]): T[]; /** * Combines two or more arrays. * This method returns a new array without modifying any existing arrays. * @param items Additional arrays and/or items to add to the end of the array. */ concat(...items: (T | ConcatArray<T>)[]): T[]; /** * Adds all the elements of an array into a string, separated by the specified separator string. * @param separator A string used to separate one element of the array from the next in the resulting string. If omitted, the array elements are separated with a comma. */