Code States TIL - OOP

OOP(Object-Oriented Programming, 객체지향프로그래밍)은 말 그대로 객체 위주로 프로그램을 짜는 프로그래밍 방법입니다. 여기서 객체는 프로그램에서 비슷한 데이터와 처리방식을 갖는 부분들을 추상화해서 묶은 것입니다.

OOP라는 개념 이전에는 우선 초기에는 절차적 프로그래밍이라는 방식이 있었습니다. 프로그램을 단순한 명령어를 순서대로 실행하는 방식이었는데, 이때 비슷한 데이터의 처리방식을 갖는 부분들이 반복되어 메모리가 낭비되는 부분이 있고, 어느 부분이 정확히 어떤 역할을 수행하는지 알기 힘든 문제가 있었다고 합니다. 이를 해결하기 위해 도입된 것이 함수(procedure)라고 합니다. 비슷한 데이터의 처리방식을 하나로 묶어서 반복될 때마다 이 부분을 불러오면 반복을 줄일 수도 있고, 동작을 수정할 때도 함수 부분을 수정하면 되어 좀 더 발전된 프로그래밍이 가능해졌습니다.

함수가 데이터의 처리 방식을 구조화한 것처럼 데이터와 처리방식까지 구조화한 것이 객체입니다. 비슷한 자료들을 처리할 때마다 매번 그 자료들에 어떤 요소가 있는지 선언하는 것이 아니라 미리 만들어둔 구조인 객체를 가져오면 되기 때문에 위의 함수의 이점처럼 반복을 줄일 수 있고, 구조를 이해하기 쉽고, 수정하기 쉬워집니다. 어떻게 보면 사람이 세상을 이해할 때 비슷한 것들을 묶어 추상화하는 것과 비슷하기 때문에 사람에게 좀 더 직관적인 프로그래밍 방식으로도 볼 수 있겠습니다.

이 추상화된 자료구조가 class, 이 class로 선언된 자료형이 객체, 코드가 실행되면서 메모리에 적재된 객체가 인스턴스라고 합니다.

# 예시는 제가 이해한 방식대로 코드를 재구성한 것입니다. 그 당시에 실제로 가능한 문법이었는지는 모르겠습니다. 요즈음에 옛날 방식으로 구현한다면 이런 느낌이겠구나 정도로 생각해주세요.

자바스크립트에서는 ES6부터 class 키워드가 등장했는데, 그 이전부터 자바스크립트를 함수를 이용해 객체지향적으로 다루는 방법이 있었다고 합니다. 다음과 같이 함수를 실행할 때마다 같은 구조를 갖는 객체를 되돌려주는 식으로 말이죠.

//Functional instantiation
function Obj(value){
  return {
    property : value,
    func1 : function(){
      dosomething1
    }
    func2 : function(){
      dosomething2
    }
  };
}
var obj1=Obj(val);

하지만 이 방식은 Obj가 생성될 때마다 같은 함수부분을 생성해 메모리가 낭비되는 문제가 있다고 합니다. 그래서 이 공유되는 부분을 해결한 방식이 다음과 같습니다.

const objectOfFunctions={};
objectOfFunctions.func1=function(){
  dosomething1
};
objectOfFunctions.func2=function(){
  dosomething2
};
const extend=function(objTo,objFrom){
  for(let key in objFrom){
    objTo[key]=objFrom[key];
  }
};
//Functional Shared instantiation
function ObjFunctionalShared(value){
  const res={
    property : value;
  };
  extend(res,objectOfFunctions);
  return res;
}
 
//Prototypal instantiation
function ObjFunctionalShared(value){
  const res=Object.create(objectOfFunctions);
  res.property=value;
  return res;
}   

마지막으로는 Pseudoclassical한 방식입니다. Pseudo-는 사전적 의미는 허위의, 가짜의 라는 뜻으로 class가 아니긴 하지만 비슷한 방식이라는 뜻인가봅니다.

var Obj=function(value){
  this.property=value;
}
Obj.prototype.func1=function(){
  dosomething1
}

같은 식으로 구현하고 호출할 때는

var obj1=new Obj(val);

같은 식으로 호출한다고 합니다.
객체는 처음 생성될 때 이 객체가 어떻게 생성되었는지에 대한 정보를 __proto__ 이라는 부분에 저장합니다. 개발자도구에서 __proto__: 부분을 눌러보시면 확인할 수 있습니다. new 키워드를 쓰는 pseudoclassical방식으로 생성된 객체는 이 __proto__에 생성자함수의 prototype이 들어가게 됩니다. 즉

obj1.__proto__===Obj.prototype

은 true입니다. 그리고 이 안에는 상속받은 함수들이 있는데 이것들도 객체에서 사용가능합니다.