[Modern Javascript Deep Dive] 19장 인사이트 정리

19장을 읽으며 얻은 인사이트를 추가로 공부하면서 정리해 보자.

• 19장: 프로토타입

---

자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다.

클래스 class

ES6에서 class가 도입되었다.

클래스도 함수이고, 기존 프로토 타입 기반 패턴의 문법적 설탕으로 도입되었지만, 새로운 객체 생성 메커니즘으로 보는 것이 낫다.

객체지향 프로그래밍(OOP)

객체지향 프로그래밍 vs 절차지향 프로그래밍

먼저 절차지향이란 물이 위에서 아래로 흐르는 것과 같이 코드가 순서대로 동작하는 것을 말한다.

이는 컴퓨터의 작업 처리 방식과 유사해, 객체지향 언어를 사용하는 것보다 더 빨리 처리된다(ex. C)

옛날에는 하드웨어와 소프트웨어의 개발 속도 차이가 크지 않았는데, 하드웨어가 빠르게 발전하면서 컴퓨팅 환경 속도가 급속도로 증가했지만, 소프트 웨어 개발 시간이 따라가지 못하게 되고 이러한 상황에 소프트웨어의 개발시간을 단축하되, 하드웨어의 기본사향을 잡아먹어도 큰 단점이 아니게 되어, 모듈화, 캡슐화등의 개념적 접근의 형태를 갖춘 객체지향 프로그래밍이 등장하게 되었다.

객체지향 프로그래밍은 개발하고자 하는 것을 기능별로 묶어 모듈화를 함으로써 같은 기능을 중복으로 연산하지 않거나 모듈을 재활용할 수 있어 유지보수에 유리하다.

 

객체지향의 반대는 절차지향❌

절차지향의 반대는 객체지향❌

절차지향은 순차적으로 실행에 초점이 되어 있고 객체지향은 객체 간의 관계/조직에 초점을 두고 있는 것이다.

 

객체지향 프로그래밍의 특징 4가지

- 추상화 

- 상속

- 다형성

- 캡슐화

React 개발자(웹 개발자)를 위한 OOP: 객체지향 프로그래밍의 핵심 개념 및 필요성

자바스크립트에서 객체지향 프로그래밍 

자바스크립트는 객체지향 언어지만, 다른 언어들과는 다르다. 

• C++, JAVA: class 기반 언어
• Javascript: prototype 기반 언어

ES6와 함께 JavaScript로 OOP하기: 자바스크립트의 OOP는 진정한 OOP가 아닌가?

상속과 프로토 타입

상속: 어떤 객체의 프로퍼티 도는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것

 

자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거한다.

function Circle(radius) {
	this.radius = radius;
	this.getArea = function() {
		return Math.PI * this.radius ** 2;
	}
}

const circle1 = new Circle(1);
const circle2 = new Circle(2);

console.log(circle1.getArea === circle2.getArea); // false

생성자 함수는 동일한 프로퍼티 구조를 갖는 객체를 여러개 생성할 때 유용하다.

하지만 위 생성자 함수는 문제가 있다.

[19-1] 메서드 중복 생성

위 예제에서는 Circle 생성자 함수가 생성하는 모든 객체(인스턴스)는 radius 프로퍼티와 getArea 메서드를 갖는다.
같은 상태를 갖는 인스턴스가 필요한 것이 아니라면 각 인스턴스마다 radius 프로퍼티 값은 일반적으로 다르다.
하지만 getArea는 동일한 내용이므로 모든 인스턴스가 중복 소유한다.

 

동일한 메서드를 중복 생성하게 된다면 메모리가 낭비될것이다.

 

function Circle(radius) {
  this.radius = radius;
}
// 모든 인스턴스가 getArea 메서드를 사용할 수 있도록 프로토타입에 추가
// 프로토타입은 Circle 생성자 함수의 prototype 프로퍼티에 바인딩되어 있음
Circle.prototype.getArea = function () {
  return Math.PI * this.radius ** 2;
};

const circle1 = new Circle(1);
const circle2 = new Circle(2);
// Circle 생성자 함수가 생성하는 모든 인스턴스는 하나의 getArea 메서드를 공유한다.
console.log(circle1.getArea === circle2.getArea);	// true
console.log(circle1.getArea()); // 3.14159...
console.log(circle2.getArea());	// 12.56637...

Circle 생성자 함수가 생성한 모든 인스턴스는 상위(부모) 객체 역할을 하는 Circle.prototype의 모든 프로퍼티와 메서드를 상속받는다.
위 예제에서 생성된 모든 인스턴스는 radius 프로퍼티만 개별적으로 소유하고 동일한 메서드는 상속을 통해 공유하여 사용하게 된다.

 

상속에 의한 메서드 공유

---

프로토타입 객체 

프로토타입 객체(줄여서 프로토타입)은 객체 지향의 근간을 이루는 객체간 상속을 구현하기 위해 사용된다.모든 객체는 하나의 프로토타입을 가진다.

프로토타입은 객체의 상위 객체의 역할을 하는 객체로서 다른 객체에 공유 프로퍼티(메서드 포함)을 제공한다.

프로토 타입을 상속받은 하위 객체는 상위 객체의 프로퍼티를 자신의 프로퍼티처럼 사용할 수 있다.

모든 객체는 하나의 프로토타입을 갖는다. 그리고 모든 프로토타입은 생성자 함수와 연결되어있다.

모든 객체는 하나의 프로토타입을 갖는다.

 

프로토타입의 생성 시점 

프로토타입은 생성자 함수가 생성되는 시점에 더불어 생성된다.

생성자 함수는
1.사용자가 직접 정의한 생성자 함수
2. 자바스크립트가 기본 제공하는 빌트인 생성자함수
로 구분할 수 있다.

 

 

 

 

이미지 출처: https://velog.io/@sonwj0915/%ED%94%84% EB% A1% 9C% ED%86% A0% ED%83%80% EC% 9E%85% EC% 9D% B4% EB% 9E%80