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

keypoint

 

• inheritance
• prototype

 

OOP (Object Orientered Programming)

 

OOP는 객체 지향적 프로그래밍을 의미한다. 인간의 말과 비슷한 언어로 컴퓨터가 동작하게 만드는 프로그래밍 하는 것이다. 이러한 객체 지향적 프로그래밍은 고차원 언어라고 한다. 이와 반대인 절차 지향 언어는 순서를 중요하시는 프로그래밍이다. 인간의 말과 비슷한 고차원 언어와 반대로 저차원으로 컴퓨터의 말로 입력하여 동작을 처리할 때 객체 지향 언어보다 빠르게 처리된다. 절차 지향 언어는 빠르게 처리되지만 컴퓨터의 언어와 가까울수록 프로그래밍 하기는 어렵다. 현재에는 컴파일러의 발달로 객체 지향으로 프로그래밍을 해도 빠른 속도가 나오기 때문에 OOP를 한다.

 

객체지향적 프로그래밍은 사용하려는 객체의 청사진과 그것에 대한 속성을 정의하여 프로그래밍 전반적으로 사용할 수 있게 만들어준다. 이렇게 생성된 객체는 재사용성과 유지성이 높다. 객체라는 구현 대상을 만들기 위해 클래스라는 설계도를 만들고 이 설계도로 구현된 것을 인스턴스라고한다.

 

객체가 무슨말일까?

 

학교에서 교실을 떠올려보자. 교실 안에 학생들이 있다. 안경을 쓰고 검정 패딩을 입은 남학생이 있다. 그리고 다른 여러 학생들 또한 서로 다른 특징을 가지고 있을것이다. 여기서 안경을 쓰고 검정 패딩을 입은 남학생은 객체가 아니다. 하지만, 학생은 객체이다. 이와같이 공통점을 가진 물체들을 하나로 묶을 수 있는 포괄적인 개념을 객체라고 한다.

 

 

자바스크립트에서 인스턴스(Instance)는 무엇인가?

 

비슷한 성질을 가진 여러가지 객체를 만들기 위해서 생성자함수(constructor)를 만들어 붕어빵 찍어내듯 사용하는데, 이렇게 생성된 객체를 인스턴스라고 부른다. 클래스나 프로토타입을 이용해서 만들어낸것이 인스턴스라고 볼 수 있다.

 

클래스와 인스턴스의 차이는?

 

이 블로그의 설명에 따르면 객체(Object)는 소프트웨어 세계에 구현할 대상이고, 이를 구현하기 위한 설계도가 클래스(Class)이며, 이 설계도에 따라 소프트웨어 세계에 구현된 실체가 인스턴스(Instance)이다.

 

객체(Object)는 현실의 대상(Object)과 비슷하여, 상태나 행동 등을 가지지만, 소프트웨어 관점에서는 그저 콘셉(concept), 즉 사유의 결과일 뿐이다. 소프트웨어에서 객체를 구현하기 위해서는 콘셉 이상으로 많은 것들을 사고하여 구현해야 하므로, 이를 위한 설계도로 클래스를 작성한다. 설계도를 바탕으로 객체를 소프트웨어에 실체화 하면 그것이 인스턴스(Instance)가 되고, 이 과정을 인스턴스화(instantiation)라고 한다. 실체화된 인스턴스는 메모리에 할당된다. 

출처: https://cerulean.kkennib.com/149 [깬닙습작소]

 

OOP의 특징

 

• Encapsulation 캡슐화하다. 영어로도 생소한 단어인데 한글로도 생소하다. 자바스크립트 말로 해석하면, class안에 캡슐화 해서 모아둔다란 말인데 이 말 또한 어렵다. 쉽게 이해하자면 회사를 떠올리면 되겠다. 정해진 틀이 있고 틀 안에 목록들은 고정되있다고하자. 회사에서 월급을 받는다고 할 때 각각의 월급은 서로 다를것이다. 하지만, 고정임금, 추가수당, 4대보험, 인센티브 등 정해진 틀은 있다. 그 안에서 받는 금액만 서로 다를뿐이다. 서로 같은 회사에 다니지만 직급, 인센, 초과근무에 따라 서로 월급이 다른것을 떠오르면 이해하기 쉽다. 만약, 위와같이 객체지향적이 아니라 절차 지향적 프로그래밍으로 동작한다면 사원 1, 2, 3.. 을 입력할 때 마다 안에있는 내용을 바꿔주면서 입력해야 할 것이다.

 

• inheritance 상속받다. 재산을 상속받는다가 먼저 떠오르겠지만, 자바스크립트에서는 부모의 특징을 물려받는다는 말이다. 맥북 일반형과 고급형의 성능의 차이를 떠올려보자. 기본적으로 같은 2020년형 맥북이라는 특징을 가지고 있지만, 일반형과 고급형이라는 점에서 고급형은 SSD의 용량이 크다던지, 음향이 좀더 좋다던지 하는 좀더 업그레이드된 특징을 가지고 있다. 나머지는 다 똑같은데 특정 부분만 업그레이드 된다는 것이다.

 

• Abstraction 추상화하다. 미술작품 이런게 떠오르겠지만, 자바스크립트에서는 안에 내용은 복잡하게 되어있으나 사용자가 사용하기에는 간단한 것을 말한다. 계산기를 사용한다고 생각해보자. 우리 눈에는 1 + 1 = 누르면 2라는 값이 바로 나오겠지만, 안에 돌아가는 동작은 보이지는 않지만 눈에 보이는 것과 다르게 복잡하게 동작한다는 것이다. 사용자는 이 안에 돌아가는 복잡한 구조를 알 필요가 없다. 이러한 복잡한 동작이 사용자의 눈에는 보이지는 않지만 추상화되어 간단하게 보이는 것이다.

 

• Polymorphism 다형성. 여러가지 형태를 가지고 있다는 말이다. 여러가지 형태를 가지고 있지만 다형성 덕분에 동일하게 동작한다는 것인데, 예를들어 동물들이 사람의 말을 알아듣는다고 가정해보자. 강아지, 고양이, 사자 서로 다른 동물들이 있다. 각자의 동물들에게 말해봐라고 하면 다른 울음소리를 낼것이다. 하지만 말해봐라는 단어 하나로 동일하게 울음을 낸다. 강아지는 멍멍소리로 짖어봐. 고양이는 야옹으로 울어봐, 사자는 으르렁으로 울어봐라고 각각 명령할 필요가 없이 말해봐라는 하나의 단어를 이해한다. 형태는 서로 다르나 동물이라는 같은 특징을 가지고있는 동물들을 동일하게 말을한다.

 

Instantiation Patterns (인스턴스를 만드는 방법)

 

class가 나오기 전에 사용하던 4가지 class 선언방식.

 

• Functional : 함수 내부에서 인스턴스에 대한 속성을 정의해주는 방법. 정의되는 모든 인스턴스에 대한 메모리를 가지고 있어야하기 때문에 메모리의 할당이 많이 된다.

var Car = function (position) {
  // 클래스에서 찍어낼 인스턴스 정의
  var someInstance = {};

  // 초기값 부여
  someInstance.position = position;

  // 메소드 부여
  someInstance.move = function () {
    this.position += 1;
  };

  return someInstance;
};

• Functional Shared : 메소트와 인스턴스를 각각 정의해주어 메모리의 참조만 하는 방법. 메소드를 가지고 있는 객체를 만들어주는 함수와 인스턴스를 생성하는 함수를 따로 사용하여, 두 객체를 연결해주는 방식.

// someInstance와 someMethod를 연결하는 extend 함수 생성
var extend = function (to, from) {
  for (var key in from) {
    to[key] = from[key];
  }
};

// 메소드를 담는 객체 생성
var someMethod = {};
someMethod.move = function () {
  this.position += 1;
};

// 객체 생성
var Car = function (position) {
  var someInstance = {
    position: position,
  };

  extend(someInstance, someMethod);
  return someInstance;
};

• Prototypal : Object:create() 함수를 사용하여 인스턴스를 생성하는 방법.

var someMethod = {};
someMethod.move = function () {
  this.position += 1;
};

var Car = function (position) {
  // Object.create 함수를 사용해서 someMethod를 가진 인스턴스 생성
  var someInstance = Object.create(someMethod);
  someInstance.postion = postion;

  return someInstance;
};

• Pseudoclassical : 프로토타입을 사용하여 메소드를 지정해주는 방법. new키워드를 통해 새로운 인스턴스 생성. prototype을 이용하여 객체와 메소드를 연결.

var Car = function (position) {
  this.position = position;
};

// prototype으로 객체와 메소드를 연결
Car.prototype.move = function () {
  this.position += 1;
};

// new 키워드를 사용해주어야 한다.
var car1 = new Car(5);

 

프로토타입 (prototype)

 

자바스크립트에서는 존재하고있는 모든 객체를 프로토타입으로  사용한다. 해당하는 객체를 복사하여 다시 사용하는 것을 상속이라 한다. 자바스크립트의 모든 객체는 프로토타입으로부터 프로퍼티와 메소드를 상속 받는다. 즉, 프로토타입은 상속되는 정보를 제공하는 개체라고 할 수 있다.

Object.prototype 객체는 이러한 프로토타입 중에서도 가장 상위에 존재하는 프로토타입. 따라서, 자바스크립트의 모든 객체는 Object.protorype 객체를 상속받는다.