[OOP] JavaScript 객체 지향 프로그래밍 - 7. prototype

 

들어가며

어느 정도 개발에 대한 감을 익혔다고 생각했습니다. 코드를 순서에 맞게 작성하는 능력들을 아주 조금이지만 쌓아 올릴 수 있었습니다. 하지만 시간이 지나면서 제 코드를 봤을 때 너무 더럽다고 느껴졌습니다. 중복되는 코드가 많았고, 비효율적인 코드들도 많이 볼 수 있었습니다. 코드를 조금 더 재사용성이 높게 작성한다면 더 효율적으로 시스템이 동작할 수 있었을 텐데, 아쉬움이 남았습니다. 이런 고민을 하면서 객체지향 프로그래밍에 대해 배워야겠다고 생각했습니다. 앞으로 객체지향을 배우면서 공부하고 느낀 점들을 정리해나가고자 합니다. 아래 내용은 생활코딩의 OOP 수업을 듣고 정리한 내용입니다.

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

prototype이 필요한 이유

자바스크립트는 다른 말로 prototype based language라고 부릅니다. 즉, 프로토타입이라는 것은 자바스크립트를 지탱하는 기반이라고 할 수 있습니다. 그렇다면 prototype이란 무엇인지 자세히 살펴보겠습니다.

 

 

 

만약 kim이라는 객체를 생성하고 싶다면, person이라는 함수를 생성자로서 동작시켰습니다. 그런데, 여기서 this.sum이 거슬립니다. 왜냐하면 생성자가 실행될 때마다 우리가 생성하려고 하는 객체에 sum이라는 이름의 함수가 생성될 때마다 새로 만들어지고 있습니다. 그러면 컴퓨터의 메모리라는 것이 그만큼 낭비되는 것입니다. 당장 만들고 싶은 객체가 적다면 상관없겠지만, 만약 1억 개의 객체가 만들어진다면, 1억 개의 함수가 생성될 것이며, 함수가 생성되는데 많은 메모리가 사용될 것입니다. 그럼 성능을 저하시키는 요소가 됩니다.

 

그리고 만약 생성자가 객체가 만들어진 이후에 객체에 sum이라는 함수의 동작방법을 바꾸고 싶다면 어떻게 해야 할까요? kim.sum에 함수를 다시 할당합니다. 

 

 

 

 

kim과 lee에 sum이라는 변수에 다시 함수를 할당하면, 밑의 코드가 동작해서, 출력 결과 앞에는 modified가 생성됩니다.

 

이러한 점이 내가 원했던 것이면 상관없지만, 만약 Person이라는 객체, 생성자를 사용하는 모든 객체의 sum이라는 함수를 다 바꾸고 싶다면, 이런 작업을 1억 번 해야 합니다. 바로 이것이 생성자 안에서 메서드를 만드는 것이 갖는 단점이라고 할 수 있습니다. 즉 이러한 점은 생산성이 많이 떨어뜨리는 요인이 됩니다. 그럼 person이라는 생성자를 이용해서 만든 모든 객체가 공통적으로 사용하는 함수를 만들 수 있으면 얼마나 좋을까요? 어떻게 하면 이런 문제를 해결할 수 있을지 알아보겠습니다.

 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

 

 

prototype을 이용해서 재사용성을 높이기

시작하기 전, 생성자를 통해 만든 객체에서 kim과 lee가 공통적으로 사용하는 속성을 만드는 방법을 먼저 살펴보겠습니다.

 

 

먼저 sum이라는 함수를 잘라내기 해서 밖으로 빼겠습니다. 그리고 Person이라는 생성자 함수에서 공통적으로 사용할 sum이라는 메서드를 만들겠습니다. 이를 위해 prototype을 사용해보겠습니다.

 

 

 

 

Person.prototype.sum이라고 작성하고, 여기에 함수를 값으로 할당합니다. 즉, Person이라는 생성자 함수에 prototype이라는 원형을 정한다는 뜻입니다.

 

 

 

프로토타입을 사용한다면, Person이라는 생성자 함수 안에 함수를 정의하는 것이 아니기 때문에 객체가 만들어질 때마다 함수가 생성되지 않습니다. 이렇게 된다면 한 번만 정의되기 때문에 메모리를 절약할 수 있고, 성능도 훨씬 좋아집니다. 만약 kim이라고 하는 객체에 sum만 다르게 동작하게 하고 싶다고 한다면 어떻게 해야 할까요?

 

 

 

 

kim이라고 하는 객체의 sum 함수의 값을 바꿔주면 됩니다. 이를 통해 프로토타입의 특징을 살펴볼 수 있었습니다.

 

 

정리해보자면, 자바스크립트는 kim의 sum 메서드를 호출할 때, 객체 자신이 sum이라는 속성을 갖고 있는지 먼저 확인합니다. 만약 객체 자신이 갖고 있지 않으면, 객체 생성자인 Person의 프로토타입에서 sum이라는 메서드가 정의되어있는지 찾습니다. 만약 찾아진다면 그것을 실행합니다. 

 

자바스크립트를 이용해서 객체를 만들 때, 변수들은 생성자 안에 넣는 것이 일반적이지만, 함수는 프로토타입을 이용해서 생성해주는 것이 객체를 생성할 때 사용되는 패턴입니다. 

 

그렇다면 지금까지 배운 내용을 토대로 질문에 답해봅시다.

 

 

 

Q1. 프로토타입은 어떤 의미가 있을까요?
객체들이 공통으로 사용하는 속성 값입니다. 생성자의 프로토타입에 정의함으로써 다른 모든 객체들이 참조하여 사용할 수 있도록 하여 메모리를 효율적으로 사용할 수 있도록 합니다. 그리고 메서드의 재정의가 필요한 객체들은 상황에 맞게 자신만 사용 가능한 메서드를 재정의할 수 있어 유지보수에도 많은 도움이 됩니다.

 

 Q2. 프로토타입을 사용하지 않고 생성자 함수 안에서 메서드를 직접 정의하면 어떤 비효율이 발생하나요? 
객체가 생성될 때마다 해당 객체의 메서드를 만들어 메모리에 할당해야 합니다. 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

마치며

객체지향에 대한 기본을 쌓아가고 있습니다. 앞으로 포기하지 않고, 하나씩 지식을 쌓아 가다 보면 언젠가는 기초가 튼튼한 개발자가 될 수 있을 것이라 믿습니다. 제대로 된 방향으로 하나씩 공부하고 싶습니다.

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

출처