[모딥다] 번외 ) 우리는 왜 프로토타입에 대해서 알아야할까?

16장 ~  18장 을 읽으며

객체가 JS 의 기반이라 중요한 거 알겠는데, 

우리가 실질적으로 어디에 프로토타입을 쓸 수 있다는거지..? 내부 구조를 어디에 써먹지..? 등의 의문이 들었다.

 

의문이 들긴 했으나, 

뒤에서 알려주지 않을까? & 우선 스터티 진도부터 나가자! 라는 생각에 찾아볼 생각은 안했었다.

 

 

모딥다 스터디 스레드에 올라온 질문

 

그르게용

 

이렇게 아쉬운 부분에 대해 이야기가 나왔다.

 

 

GPT 한테 물어볼까란 생각이 불현듯 들었다.

 

자바스크립트에서 프로토타입(Prototype)은 객체지향 프로그래밍에서 매우 중요한 개념 중 하나입니다. 자바스크립트는 객체지향 언어이며, 모든 객체는 프로토타입을 가집니다. 이 프로토타입은 해당 객체의 기능과 속성을 정의합니다. 프로토타입은 객체 간에 상속을 구현하는 데 사용됩니다. 객체는 자신의 프로토타입에서 속성과 메서드를 상속하고, 프로토타입은 다른 프로토타입에서 상속받을 수 있습니다. 이는 객체지향 프로그래밍에서 중요한 상속 개념을 자바스크립트에서도 구현할 수 있도록 해줍니다. 또한, 자바스크립트에서는 함수도 객체이며, 함수 역시 프로토타입을 가집니다. 이를 이용하여 함수를 생성자로 사용해 객체를 생성하거나, 프로토타입 체인을 이용하여 함수에서 상속을 받을 수 있습니다. 따라서, 자바스크립트에서 객체지향 프로그래밍을 제대로 이해하고 활용하기 위해서는 프로토타입에 대한 이해가 필수적입니다. 

 

흠..

 

https://medium.com/@limsungmook/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%8A%94-%EC%99%9C-%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85%EC%9D%84-%EC%84%A0%ED%83%9D%ED%96%88%EC%9D%84%EA%B9%8C-997f985adb42#:~:text=%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%20%E2%80%94%20%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85&text=%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85%20%EC%B2%B4%EC%9D%B8%EC%97%90%20%EC%9D%98%ED%95%B4,%EC%97%90%20%EC%A0%91%EA%B7%BC%ED%96%88%EA%B8%B0%20%EB%95%8C%EB%AC%B8%EC%9E%85%EB%8B%88%EB%8B%A4

자바스크립트는 왜 프로토타입을 선택했을까

 

이 글을 스터디원 중 한 분이 보내주셨고, 

어렵지만 재밌게 읽었다.

 

현실에 존재하는 것 중 가장 좋은 본보기를 원형(prototype)으로 선택한다.

문맥(컨텍스트)에 따라 ‘범주’, 즉 ‘의미’가 달라진다.

...

프로토타입 언어에서는 ‘분류’를 우선하지 않는다. 생성된 객체 위주로 유사성을 정의한다.

어휘, 쓰임새는 맥락(context)에 의해 평가된다.

 

 

그림으로 보니 그 개념이 조금 더 와닿았다.

 

 

결국 공통되는 가장 작은 부분을 재사용 하기 위한 것이고, 

재사용을 하는 방법들이 여러가지가 있는 거라 이해했다. 

 

 

 

 

아래는 또 다른 예시로 보내주신 글귀. 

예시를 보니 어떻게 활용하는지 조금더 와닿는 느낌이다.

 

 

자바스크립트의 프로토타입(prototype)은 객체 지향 프로그래밍에서 중요한 개념이며, 상속 및 코드 재사용을 가능하게 해줍니다. 프로토타입을 이해하면, 객체 간 상호작용을 더 효율적으로 구현할 수 있으며 코드를 간결하고 관리하기 쉽게 만들 수 있습니다. 아래 코드 예시를 통해 프로토타입을 이해해 봅시다. 1. 생성자 함수를 정의하고, 이를 통해 객체를 생성합니다.

 

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person1 = new Person("Alice", 30);
const person2 = new Person("Bob", 25);

2. 생성자 함수의 프로토타입 객체에 메서드를 추가합니다. 이 메서드는 모든 Person 객체가 공유하게 됩니다.

Person.prototype.introduce = function () {
  console.log(`안녕하세요! 저는 ${this.name}이고, 나이는 ${this.age}살입니다.`);
};

person1.introduce(); // 안녕하세요! 저는 Alice이고, 나이는 30살입니다.
person2.introduce(); // 안녕하세요! 저는 Bob이고, 나이는 25살입니다.

프로토타입을 사용하면, introduce 메서드와 같은 공통 기능을 모든 객체가 공유할 수 있으므로 메모리 사용량을 줄일 수 있습니다. 만약 프로토타입을 사용하지 않고 메서드를 각 객체에 직접 추가한다면, 메모리 낭비가 발생하게 됩니다. 3. 프로토타입 체인을 통한 상속 구현

function Employee(name, age, position) {
  Person.call(this, name, age);
  this.position = position;
}

Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

Employee.prototype.introduce = function () {
  Person.prototype.introduce.call(this);
  console.log(`제 직책은 ${this.position}입니다.`);
};

const employee1 = new Employee("Charlie", 40, "개발자");
employee1.introduce();
// 안녕하세요! 저는 Charlie이고, 나이는 40살입니다.
// 제 직책은 개발자입니다.

위 예시에서 Employee 생성자 함수는 Person의 프로토타입을 상속받아 새로운 객체를 생성합니다. 이를 통해 코드를 재사용하고 상속을 구현할 수 있습니다. 프로토타입을 공부하는 이유는 이러한 장점들 때문입니다. 프로토타입을 이해하면 자바스크립트를 더 효과적으로 사용할 수 있으며, 코드를 더 간결하게 작성하고 관리할 수 있습니다. 또한, 프로토타입을 사용하여 아래와 같은 다양한 작업을 수행할 수 있습니다. 1. 기존 객체에 새로운 메서드 추가:

Person.prototype.sayGoodbye = function () {
  console.log(`${this.name}이(가) 안녕히 계세요! 라고 인사합니다.`);
};

person1.sayGoodbye(); // Alice이(가) 안녕히 계세요! 라고 인사합니다.

2. 프로토타입을 통해 기존 메서드를 수정하거나 덮어쓰기:

Person.prototype.introduce = function () {
  console.log(`안녕하세요! 제 이름은 ${this.name}이고, 제 나이는 ${this.age}살입니다.`);
};

person1.introduce(); // 안녕하세요! 제 이름은 Alice이고, 제 나이는 30살입니다.

 

 

 

 

3. 프로토타입 체인을 사용하여 다중 상속 구현:

function Student(name, age, major) {
  Person.call(this, name, age);
  this.major = major;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

Student.prototype.introduce = function () {
  Person.prototype.introduce.call(this);
  console.log(`전공은 ${this.major}입니다.`);
};

const student1 = new Student("David", 22, "컴퓨터 공학");
student1.introduce();
// 안녕하세요! 제 이름은 David이고, 제 나이는 22살입니다.
// 전공은 컴퓨터 공학입니다.

이처럼 프로토타입은 자바스크립트에서 객체 상호 작용과 상속을 구현하는 데 필수적인 역할을 합니다. 프로토타입을 이해하면 코드의 재사용성을 높이고, 성능을 최적화하며, 더욱 체계적인 프로그래밍을 할 수 있습니다. 이러한 이유로 프로토타입을 공부하는 것은 매우 중요한 부분이며, 자바스크립트를 더 깊이 이해하는 데 도움이 됩니다.

 

 

 

 

우선 이해한 만큼만 결론을 내려보면, (분명 수정하러 올 듯)

결론:

프로토타입은 코드를 효율적으로 쓸 수 있는 방법이고, 이걸 베이스로 하는게 JS 의 기반인 객체다. 이 객체의 내부적인 구조 덕분에 상속 등이 가능하다.