[JavaScript] 객체지향과 프로토타입

학습목표

자바스크립트의 프로토타입(Prototype)에 대한 단어는 많이 들어봤으나, 정확한 개념과 용도를 알지 못하였습니다.💦

그래서, 프로토타입의 의미와 사용하는 이유가 무엇인지에 대해 알아보았습니다.

 

 

---

 

객체지향 언어

먼저, 객체지향언어와 짝을 이루는 절차지향언어. 이 두 언어의 특징부터 알아보도록 하겠습니다.

 

 

절차지향 언어

순차적으로 처리하는 절차지향 프로그래밍(POP)에 쓰이는 언어를 절차지향언어 라고하며, 대표적인 예로 C언어가 있습니다.

컴퓨터의 작업 처리방식(Top-down 방식)과 유사하기 때문에 비교적 실행속도가 빠른 장점이 있습니다.

하지만, 코드 전체가 유기적으로 연결되어 있기 때문에 코드 중간에 이슈가 발생한다면 전체를 수정해야 할 수 있어 유지보수에 어려움을 겪을 수 있습니다.

또한, 코드의 순서를 바꾸면 실행 결과가 달라질 수 있기 때문에 언어의 융통성이 부족하다고 표현하기도 합니다.

 

 

객체지향 언어

현실 세계를 모델링한 객체지향 프로그래밍(OOP)에 쓰이는 언어를 객체지향언어 라고하며, 대표적인 예로 Java, Python, C++ 등이 있습니다.

절차지향 언어보다 비교적 실행속도가 느리고 설계에 시간이 많이 걸릴 수 있다는 단점이 있지만, Bottom up 방식을 가지며 다음과 같은 특징을 가지고 있습니다.

 

1. 캡슐화(Encapsulation) : 데이터와 알고리즘을 하나의 묶음으로 만들어 정보은닉 효과
2. 상속(Inheritance) : 상위 클래스의 내용을 하위 클래스가 물려받아 재사용 효과
3. 다형성(Polymorphism) : 상속을 통해 기능을 다양하게 재구성할 수 있는 효과
4. 추상화(Abstraction) : 공통의 특성 혹은 기능을 묶어 표현 (클래스를 정의하는 것을 추상화 라고 할 수 있음)

 

즉, 재사용성이 뛰어나며 생산성을 높여줄 수 있다는 장점이 있습니다.

 

 

절차지향 언어와 객체지향 언어를 서로 반대되는 개념으로 이해하기 보다는 각각의 특징을 인지하고 프로그램 작성시에 더 유리한 방식을 도입하는 것이 중요하다 정도로 정의할 수 있습니다.

(추후 프로그래밍 패러다임에 대해 다시 자세하게 다뤄보도록 하겠습니다.👍)

 

 

---

 

 

프로토타입 생성

자바스크립트는 프로토타입 기반 객체지향 언어라고 설명할 수 있습니다.

그렇다면, 프로토타입이 어디 존재하고 있는지에 대해 예시를 통해 알아보도록 하겠습니다.

 

프로토타입이라는 단어를 직역하면, 원형(유전자) 이라는 뜻을 가지고 있습니다.

짧은 코드를 작성하여 프로토타입을 찾아보도록 하겠습니다.

function create(name, phone) {
  this.name = name;
  this.phone = phone;
}

let personObject = new create('홍길동', '01000000000');

console.log('결과 ==> ', personObject);

 

 

create() 함수를 만들어 이름은 '홍길동', 전화번호는 '01000000000' 을 내용으로 하는 객체(Object)를 생성한 코드입니다.

따라서 다음과 같은 결과를 얻을 수 있습니다.

 

 

또 다른 예시를 들어보도록 하겠습니다.

let arr = [8, 1, 9]; // let arr = new Array(8, 1, 9); 와 같음

console.log('결과 ==> ', arr);

 

 

8, 1, 9 원소를 가지는 배열을 생성한 모습입니다.

 

 

두 코드를 보면, 공통적으로 보이는 내부 요소를 발견할 수 있습니다.

이는 Prototype 인데, 제가 임의로 생성한 적이 없으며 자바스크립트가 자동으로 만들어주는 것을 확인할 수 있습니다.

 

앞서 작성했던 코드(객체 생성 코드)에 prototype을 활용하여 출력값을 확인해보도록 하겠습니다.

function create(name, phone) {
  this.name = name;
  this.phone = phone;
}

let personObject = new create('홍길동', '01000000000');

create.prototype.address = '서울특별시 동작구';

console.log('결과 ==> ', personObject);

 

 

또한, Array.prototype에 선언되어있는 메소드를 사용하여 배열을 정렬 시켜보겠습니다.

 

let arr = new Array(8, 1, 9);

arr.sort();

console.log('결과 ==> ', arr);

 

 

간단한 코드 작성을 통해 프로토타입이 어디에 존재하고 있는지, 어떻게 활용하는지에 대해 알아보았습니다.

다음번에는 프로토타입를 활용하는 이유에 대해 알아보도록 하겠습니다.

 

 

---

 

 

리뷰

• 프로토타입 개념을 처음으로 학습
• 프로그래밍 패러다임에 대한 심화 학습 필요