[TIL] OOP with Java Script before ES6

June hyoung Park·2020년 10월 28일

JavaScript

목록 보기

17/18

객체 지향 프로그래밍의 원초적 개념과 프로토타입 기반 언어인 자바 스크립트에서 객체 지향 프로그래밍의 패러다임을 구현하기위해 사용되는 여러 문법들이나, 개념들을 다시 한번 되짚고자 작성해본다.

객체 지향 프로그래밍(OOP) 🤷🏻‍♂️

OOP (Object-Oriented Programming)란 컴퓨터 프로그래밍 패러다임중 하나로, 프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고 그 객체들 간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법이다. 즉 객체의 관점에서 프로그래밍 하는 것을 의미하는데, 재사용이 용이하다는점. 상속성을 이용한 확장성 용이 및 유지보수가 수월하다는 장점을 갖고있다.

OOP Basic Concepts 📚

1. Encapsulation

캡슐화란 하나의 객체에 대해 그 객체가 특정한 목적을 위한 필요한 변수나 메소드를 하나로 묶는 것을 의미한다. 즉 캡슐화의 주 목적은 코드를 재수정 없이 재활용하기 위함인데, 캡슐화를 통해 해당 객체와 관련된 기능과 특성들이 분산되어 있지않고, 한 곳에 위치하고 분류되기 때문에 재활용이 수월하다.

2. Abstraction

추상화는 목적이나 기능과는 관련이 없는 불필요한 정보는 숨기고구체적인 사물들의 공통적인 특징을 파악해서 이를 하나의 개념 혹은 집합으로 다루는 것이다.

3. inheritance

상속성은 말 그래도 상속을 통해 기능을 확장하거나 변경하는 것을 가능하게 해준다. 즉 기존 상위클래스에 근거하여 새롭게 클래스와 행위를 정의할 수 있으며, 기존 클래스에 기능을 가져와 재사용할 수 있으면서도 동시에 새롭게 만든 클래스에 새로운 기능을 추가할 수 있게 만들어 준다. 또한 결정적으로 코드의 중복을 줄여준다.

4. Polymorphism

다형성은 변수나 함수 등이 상황에 따라 다른 의미로 해석될 수 있는 것을 의미한다. 즉 상속을 통해 상속받은 기능 및 특징(함수나 변수)을 확장하거나 변경하는 것을 의미한다. 자바의 오버라이딩과 오버로딩이 이에 해당한다.

OOP in JavaScript 🕺

원래 자바스크립트는 ES6(ECMAScript 6) 전까지 Class 키워드를 사용 할 수 없었다. 그렇다면 class 키워드가 없었을땐 어떤 방법을 사용해서 class를 구현했을까?

functional instantiation

const Car = function(position) {
  const newInstance = {};
  newInstance.position = position;
  newInstance.move = function(){
    this.position += 1;
    return "Posision Change!"
}
return newInstance
  };

  const car1 = Car(1);

car1.move() // Posision Change!
car1.move() // Posision Change!
console.log(car1) 
/* 
{
position:3,
move: {...}
}
*/

functional instantiation 방식으로 생성한 함수는 호출 될 때마다 새로운 인스턴스(객체)를 반환한다. 클래스의 기능과는 유사하지만 새 인스턴스를 만들 때 마다 모든 메소드를 새롭게 할당하므로 메모리적으로 비효율적이다.

functional shared

const extend = (to, from) => {
  for(let key in from){
    to[key] = from[key];
  }
}

const methods = {};
methods.move = function(){
  console.log(`current Position is ${this.position += 1}`)
}

const Car = function(position){
  const newInstance = {
    position : position
  };
  extend(newInstance, methods);
  return newInstance;
}

const car1 = Car(1);
car1.move(); // current Position is 2
console.log(car1);
/* 
{
position:2,
move: {...}
}
*/

새 인스턴스를 만들 때 마다 모든 메소드를 새롭게 할당해야했던 functional instantiation와는 달리 메서드들이 모여있는 객체를 따로 만들고, extend를 통해 인스턴스가 생성될때마다 메서드의 주소값을 참조하도록 해줬기 때문에 위 방식보다 메모리 효율성이 좋다.

prototypal

const methods = {};
methods.move = function() {
  console.log('Position Changed!')
  return this.position += 1;
  
};

const Car = function(position){
  const newInstance = Object.create(methods);
  newInstance.position = position;
  return newInstance;
}

const car1 = Car(1);

console.log(car1.move()); // Posision Changed!
console.log(car1) 
/*
{
position:2
}
*/

전체적으로 functional shared와 큰 차이는 없지만 Object.create라는 메서드가 추가된것을 알 수 있다. Object.create란 자바 스크립트 내장 api로 특정 객체를 prototype 객체로 지정해주는 메서드이다.

psuedo classical

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

Car.prototype.move = function(){
  this.position += 1;
  return 'moved!'
}

const car1 = new Car(1);

console.log(car1.move()) // moved!
console.log(car1)
/* {
position:2
} */