네이티브 프로토타입이란?
프로토타입(prototype) 속성은 자바스크립트의 핵심 개념입니다. 자바스크립트가 프로토타입 기반 언어이기 때문입니다. 프로토타입은 자바스크립트에서 상속(inheritance)을 구현하는 핵심 메커니즘으로 작동합니다.
개발자가 직접 생성한 커스텀 객체뿐만 아니라 String, Array, Object 등 모든 내장 네이티브 객체 역시 prototype 속성을 가지고 있습니다. 이 속성에 새로운 속성이나 메서드를 추가하면 기존 객체의 기능을 손쉽게 확장할 수 있습니다.
다만 네이티브 프로토타입은 수정하거나 새롭게 추가하는 것만 가능하며, 이미 존재하는 프로토타입 멤버를 삭제할 수는 없습니다.
네이티브 프로토타입 활용 예제
다음 예제는 String 객체의 네이티브 프로토타입에 alternateCase()라는 커스텀 메서드를 추가하여, 문자열의 대소문자를 번갈아 변환하는 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result,.sample {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
.sample {
color: red;
}
</style>
</head>
<body>
<h1>Native Prototypes in JavaScript</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to convert the above string to alternate case using prototype
</h3>
<script>
let resEle = document.querySelector(".result");
let sampleEle = document.querySelector(".sample");
let BtnEle = document.querySelector(".Btn");
String.prototype.alternateCase = function () {
let newString = "";
for (let i = 0; i < this.length; i++) {
if (i % 2 == 0) {
newString += this[i].toUpperCase();
}
else {
newString += this[i].toLowerCase();
}
}
return newString;
};
let a = "HELLO WORLD";
sampleEle.innerHTML += a;
BtnEle.addEventListener("click", () => {
resEle.innerHTML += a.alternateCase();
});
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
'CLICK HERE' 버튼을 클릭하면 원본 문자열 'HELLO WORLD'가 아래와 같이 대소문자가 번갈아 나오도록 변환되어 표시됩니다.
참고: 네이티브 프로토타입 수정 시 주의사항
예제처럼 내장 프로토타입을 확장하면 편리하지만, 실무 환경에서는 신중하게 접근해야 합니다. 커스텀 메서드 이름이 향후 자바스크립트 표준에 추가되는 메서드와 충돌할 수 있고, 서드파티 라이브러리와의 호환성 문제가 발생할 수 있기 때문입니다. 따라서 프로덕션 코드에서는 가능한 한 유틸리티 함수나 클래스를 활용하는 것이 권장됩니다.