[Web/Javascript] 프로토타입 (Prototype)에 대해서

안녕하세요.

오늘은 자바스크립트의 프로토타입(Prototype)에 대해 알아보도록 하겠습니다.

 

들어가며

자바스크립트는 다양한 애플리케이션을 만드는 데 사용할 수 있는 유연한 언어입니다. 여기에는 프토토타입이라는 개념이 기반이 되어 있습니다. 흔히 자바스크립트를 프로토타입 기반 언어(prototype-based language)라고도 불리는 이유 중 하나입니다. 그래서 프로토타입이 무엇일까요? 객체 생성에는 어떠한 영향을 줄까요? 천천히 알아 보도록 하겠습니다.

프로토타입(Prototype)이란?

프로토타입은 자바스크립트 객체의 구성 요소로, 객체 상속과 속성 위임을 가능하게 합니다. 즉, 자바스크립트에서 프로토타입은 객체를 만들기 위한 청사진 역할을 하며 재사용이 가능한 속성과 메서드를 가지고 있으며 다른 객체에 의해 상속될 수 있습니다.

 

 

프로토타입을 이해하는 것은 견고하고 확장 가능한 자바스크립트 애플리케이션을 만드는 데 필수적입니다.

 

자바스크립트에서의 프로토타입

자바스크립트에서는 모든 함수가 객체입니다. 함수를 생성하면 자바스크립트가 자동으로 해당 함수에 프로토타입 객체를 상속합니다. 이 프로토타입 객체에는 해당 함수의 인스턴스가 액세스 할 수 있는 속성과 메서드가 포함되어 있습니다.

프로토타입 생성

자바스크립트에서 생성자 함수를 사용하거나 객체 리터럴을 사용하여 명시적으로 프로토타입을 생성할 수 있습니다. 생성자 함수를 사용하면 사용자 정의 객체에 대한 프로토타입을 정의할 수 있으며, 객체 리터럴은 간단한 프로토타입을 만드는 더 간결한 구문을 제공합니다.

constructor (생성자 함수) 사용

기본적으로 자바스크립트 함수는 prototype 속성을 가지고 있습니다. 함수가 new 키워드 또는 Object.create() (생성자 역할)와 함께 호출되면 새로 생성된 객체는 함수의 prototype 속성에서 속성과 메서드를 상속합니다.

객체 리터럴 표기법 사용

객체 리터럴 표기법을 사용하여 함수의 prototype 속성 내에 직접 속성과 메서드를 정의할 수 있습니다. 이러한 속성과 메서드는 해당 함수를 생성자로 사용하여 생성된 모든 인스턴스에서 액세스할 수 있습니다.

예제와 함께 보는 프로토타입 생성

아래의 예제는 person1 변수에 new 키워드를 통해 Person 인스턴스를 생성해 속성과 메서드를 상속받은 greet() 함수를 통해 인사메시지를 출력하는 예제입니다.

function Person(name) {
	this.name = name;
}
  
Person.prototype.greet = function() {
	return "안녕하세요, 제 이름은 " + this.name + "입니다.";
};

const person1 = new Person("Poki");
console.log(person1.greet());

Result

안녕하세요, 제 이름은 Poki입니다.

 

프로토타입 상속

자바스크립트의 프로토타입 기반 프로그래밍은 상속에 프로토타입을 활용합니다. 생성자 함수의 프로토타입 속성을 다른 객체로 설정하면 상속 관계(부모-자식)가 결정됩니다. 자식 생성자는 부모 생성자의 프로토타입에서 속성과 메서드를 상속합니다. 이때 자바스크립트는 상속을 위해 프로토타입 체인을 활용합니다. 객체에서 속성이나 메서드에 액세스 하면 자바스크립트는 먼저 해당 객체 자체에서 찾습니다. 찾지 못하면 객체의 프로토타입에서 찾습니다. 이 과정은 속성이나 메서드가 찾거나 프로토타입 체인의 끝에 도달할 때까지 계속됩니다.

 

프로토타입 체인(prototype chain)
프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메서드와 속성을 상속받을 수도 있고 그 상위 프로토타입 객체도 동일하게 상속받을 수 있는 것을 말합니다

 

예제와 함께 보는 프로토타입 상속

아래의 예제는 Object.create()를 통해 Perseon의 Prototype을 상속받은 student1 인스턴스를 생성하고 상속받은 메서드 greet()을 통해 인사메시지를 출력하는 예제입니다.

function Person(name) {
	this.name = name;
}
  
Person.prototype.greet = function() {
	return "안녕하세요, 제 이름은 " + this.name + "입니다. " + this.grade +"학년 입니다.";
};
  
function Student(name, grade) {
	Person.call(this, name);
	this.grade = grade;
}
  
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

const student1 = new Student("Poki", 1);
console.log(student1.greet());

Result

안녕하세요, 제 이름은 Poki입니다. 1학년 입니다.

 

프로토타입의 장점

코드 재사용성
프로토타입은 객체가 다른 객체로부터 속성과 메서드를 상속하여 코드의 중복을 줄이고 유지 보수성을 향상시킵니다.
메모리 소모 감소
프로토타입에 속성과 메서드를 정의하면 각 객체 인스턴스 내에 코드를 복제할 필요가 없습니다. 이것은 메모리 소모를 줄입니다. 속성과 메서드가 단일 위치(프로토타입)에 저장되어 모든 인스턴스에서 공유되기 때문입니다.

프로토타입의 단점

혼동 가능성
자바스크립트 프로토타입의 특성으로 인해 클래스 기반 상속에 익숙한 개발자 또는 처음 소스를 확인하는 개발자에게 혼란을 줄 수 있습니다. 
메모리 소비 증가
장점에도 적었지만 잘못된 사용으로 인해 단점으로 될 수 있는 부분입니다. 복잡한 프로토타입 체인을 가진 객체를 여러 개의 인스턴스를 생성하여 사용하게 되면 오히려 메모리 사용량이 증가할 수 있습니다. 
프토토타입의 오염
복잡한 수준의 프로토타입 체인에 속성을 추가하면 이미 사용 중인 다른 객체 중 동일한 이름을 가진 자식 객체의 속성을 덮어쓸 가능성이 있습니다. 이는 예상치 못한 동작과 보안 취약점으로 이어질 수 있습니다.

 

프로토타입을 꼭 활용하며 개발해야 할까?
당연히 아닙니다. 최근 많이 사용 중인 함수형 프로그래밍에서는 프로토타입이 적합하지 않을 수 있습니다.

결론

프로토타입은 자바스크립트 객체 지향 프로그래밍의 핵심입니다. 프로토타입을 잘 이해하고 활용한다면 코드 재활용성과 유지 보수에 있어 높은 이점을 가져갈 수 있을 것입니다. 프로토타입을 혼자가 아닌 다른 개발자들과 함께 사용하는 경우 적절한 네이밍 규칙을 정하고 꾸준한 문서화를 통해 다른 개발자들과의 이해를 도우며 활용할 수 있을 것이라 생각합니다. 

 

FAQ

프로토타입 기반 상속과 클래스 기반 상속의 차이점은 무엇인가요?

두 가지 모두 상속에 있어서는 동일하지만 접근 방식이 다릅니다. 자바스크립트에서 볼 수 있는 프로토타입 기반 상속은 객체와 해당 프로토타입에 중점을 둡니다. 즉, 객체가 직접 다른 객체로부터 상속받는 방식입니다.  Java 및 C++와 같은 다른 언어에서 흔히 볼 수 있는 클래스 기반 상속은 객체를 만드는 데 사용되는 클래스를 중심으로 합니다.

자바스크립트에서 프로토타입과 생성자 함수의 차이점은 무엇인가요?

자바스크립트에서 생성자 함수는 객체를 생성하는 데 사용되는 반면, 프로토타입은 다른 객체로부터 속성을 상속하는 객체입니다. 생성자 함수는 객체의 구조를 정의하고, 프로토타입은 상속을 위한 청사진을 제공합니다.

자바스크립트에서 프로토타입을 사용할 때 자주 하는 실수는 무엇인가요?

자바스크립트에서 프로토타입을 다룰 때 자주 하는 실수는 내장된 프로토타입을 수정하는 것입니다. 이는 예상치 못한 동작을 유발할 수 있으므로 주의가 필요합니다. 또한 프로토타입 체인을 과도하게 활용하여 성능 문제가 발생할 수 있습니다.

자바스크립트에서 프로토타입과 클로저의 관계는 무엇입니까?

간단히 말해서, 프로토타입은 객체를 위한 청사진 역할을 하고 클로저는 함수를 위한 청사진 역할을 합니다. 프로토타입은 객체에 속성과 메서드를 정의하는 반면 클로저는 함수에 액세스 할 수 있는 변수와 함수 자체를 정의합니다.

마치며

이렇게 자바스크립트의 프로토타입에 대해 알아보았습니다. 이 글이 자바스크립트에서 프로토타입을 사용하는 데 도움이 되었기를 바랍니다. 

 

긴 글 읽어주셔서 감사합니다.

레퍼런스

mdn web docs - Prototype

w3school - javascript - Prototype

 

 

오타 혹은 잘못된 내용이 있다면 부담 없이 댓글로 알려주세요 :)
문장을 다듬는데 ChatGPT의 도움을 받았습니다.