OOP(Object Oriented Programming)

OOP(Object Oriented Programming)?

객체(object)란 말 그대로 대상을 나타내는 단어이다.

예를 들어 교실이 있으면, 교실에 있는 학생들이 모두 각각의 객체들이고, 가방이나 책, 사물함 같은 교실에 있는 물건들이 모두 객체라고 할 수 있다.

 

절차 지향 프로그래밍(Procedural Programming)

말 그대로 절차의 순차적인 처리가 중요한 프로그래밍 기법이다. 프로그램의 순서와 흐름을 세우고 필요한 자료구조, 함수를 설계하는 방식이다.

 

객체지향 프로그래밍(Object Oriented Programming)

실제 세계를 모델링하여 물건(객체)들의 상호작용을 표현하는 프로그램을 짜는 방식이다.

자료구조와 이를 중심으로 한 모듈들을 먼저 설계한 다음에 이들의 실행 순서와 흐름을 짜는 방식으로 진행된다.

 

참고: [JavaScript] OOP(Object Oriented Programming)

 

OOP의 특징

1) 캡슐화(Encapsulation)

비슷한 역할을 하는 속성, 메소들을 하나의 클래스로 모은 것을 캡슐화라고 한다. 간단하게 관련된 데이터와 함수를 묶는 장치이다.

2) 상속(Inheritance)

상위 객체의 속성, 메소드를 하위 객체에게 물려주는 것을 말한다. 즉, 코드를 재활용할 수 있기 때문에 반복된 코드의 중복을 줄여주고 상위 객체를 재사용하여 하위 객체의 개발이 빨라지므로 생산성이 높아지게 된다.

3) 추상화(Abstraction)

추상화는 목적과 관련이 없는 부분은 제외하고 필요한 부분만 포착한 특성들만 한 곳에 모으는 것을 말한다. 객체지향에서 추상화는 객체의 공통된 속성들 중 필요한 부분만 모아 인터페이스로 정의하게 된다.

4) 다형성(Polymorphism)

다형성은 같은 형태지만 상황에 따라서 다르게 동작하는 것을 말한다. 오버 로딩과 오버 라이딩이 있는데, 오버 로딩은 함수의 이름은 같으나 함수의 매개변수의 숫자, 타입 등을 달리해서 다르게 사용하는 것을 의미하고 오버 라이딩은 상속받은 하위 객체가 상위 객체의 메소드를 새롭게 재정의 하는 것이다.

 

JavaScript에서 Class를 생성하는 여러가지 방법

1) Functional

let Car = function() {
  let someInstance = {}; // 함수 실행했을 때, 찍힐 객체를 선언
  someInstance.position = 0; // position을 0으로 초기화
  someInstance.move = function() { // move라는 메소드를 추가
    this.position++;	// 실행시 position이 1 증가
  }
  return someInstance;
}

let car1 = Car();
let car2 = Car();

car1.move() // position: 1

 

2) Functional Shared

Functional 방식은 인스턴스를 생성할 때마다 모든 메소드를 someInstance에 할당하므로, 각각의 인스턴스들이 메소드 수만큼의 메모리를 더 차지하지만

 

Functional Shared 방식을 사용하면,

someMethods라는 객체에 있는 메소드들의 메모리 주소만을 참조하기 때문에 메모리 효율이 좋아진다.

let Car = function(position) { // Car 함수를 선언(position을 프로퍼티로 넣어줌)
  let someInstance = {
    position: position,
  }
  extend(someInstance, someMethods) // extend 함수 실행
  return someInstance; 
  }

let someMethods = {}; // 메소드를 담아줄 객체를 생성, 모든 메소드는 여기에 담는다.
  someMethods.move = function() {
    this.position++;
  }
  
let extend = function(to, from) { // someInstance와 someMethods를 합치는
  for (var key in from) { // extend 함수를 만들어 Car 함수 내부에서 합쳐준다.
    to[key] = from[key]
  }
}


let car1 = Car(5);
let car2 = Car(10);

car1 // position: 5

 

3) Prototypal

Object.create는 특정 객체를 프로토타입으로 하는 객체를 생성해주는 함수

let Car = function(position) { // Functional Shared 방식과 비슷하게 코드를 작성
  let someInstance = Object.create(someMethods)  // <- 여기 {} 부분만 조금 변경
  someInstance.position = position 
  return someInstance
  }

let someMethods = {}
  someMethods.move = function() {
    this.position++
  }

let car1 = Car(5)
let car2 = Car(10)

car1 // {position: 5}
car2 // {position: 10}

 

4) Pseudoclassical

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

// 메소드를 프로토타입으로
Car.prototype.move = function() {
  this.position += 1;
}

// new를 붙여서 인스턴스 선언
let car1 = new Car(5);
let car2 = new Car(10);

 

JavaScript에서 Prototype은 무엇이고 왜 사용해야 하나?

자바스크립트는 프로토타입 기반 언어라고 불린다. 프로토타입은 뭘까?

 

Prototype vs Class

클래스는 객체를 정의하는 틀이라는 의미로 자바(Java)에서는 이러한 설계도인 클래스를 가지고 여러 객체를 생성하는 데 사용된다. 클래스는 객체지향언어에서 빠질 수 없는 개념이다. 하지만 자바스크립트는 객체지향언어이지만 클래스라는 개념이 없다. 대신에 프로토타입이라는 것이 있다. 자바스크립트는 프로토타입을 이용하여 기존의 객체를 복사하여 새로운 객체를 생성하게 된다. 

 

자바스크립트에는 클래스가 없지만 함수와 new를 통해 객체를 생성할 수 있다.

function Dog() {
	this.type = "Basset Hound"
	this.name = "댕댕이"
	this.age = 4
}

let dog1 = new Dog()
let dog2 = new Dog()
...

console.log(dog1.age) // 4
console.log(dog2.age) // 4
...

보통 이런 방식으로 사용할 것이다. 여기서는 Dog라는 함수를 통해 dog1과 dog2라는 객체를 생성했다. 이 객체들은 3개의 속성을 가지고 있고 데이터 또한 동일하다. 여기서 추가적으로 객체를 더 생성한다면 객체가 추가될 때마다 3개의 변수가 메모리에 할당될 것이다.

 

바로 이러한 문제를 프로토타입으로 해결할 수 있다.

function Dog(){}

Dog.prototype.type = "Basset Hound"
Dog.prototype.name = "댕댕이"
Dog.prototype.age = 4

let dog1 = new Dog()
let dog2 = new Dog()

console.log(dog1.age) // 4
console.log(dog2.age) // 4

얼핏 보면 위의 코드와 차이가 없어 보인다. 어찌 됐든 출력되는 값은 같으니 말이다. 하지만 메모리 관점에서 살펴보면 dog1과 dog2는 자신이 위에 변수를 가지고 있는게 아니라 어딘가에 존재하는 Object에 들어있는 값을 갖다 쓰고 있는 것이다. 그러므로 각각의 객체들이 변수를 가지고 있지 않고 공유받고 있는 상태이기 때문에 프로토타입을 사용하면 메모리를 절약할 수 있다.

 

참고: [Javascript ] 프로토타입 이해하기