자바스크립트와 객체지향 프로그래밍(OOP) 란 무엇인가?

자바스크립트와 객체지향 프로그래밍 (OOP)란

오늘날 유명한 많은 프로그래밍 언어 (Java, C#,  C++, Python, PHP)등 은 객체 지향 프로그래밍을 지원한다. 자바스크립트(Es5)에서는 클래스를 지원하지는 않지만 자바스크립트 객체를 생성하는 생성자 함수를 제공하고 있다.

객체지향 프로그래밍은 보다 유연하고 유지보수성이 높은 프로그래밍을 하도록 의도되었고, 대규모 소프트웨이 공학에서 널리 알려져 있다.

다른 객체 지향 프로그래밍과는 다르게 자바스크립트에서의 객체지향 프로그래밍이란 , 모든것이 다 Object로 되어있고 Object로 설명이 가능하다고 할수 있다

 

자바스크립트에서는 Class를 지원하고 있지 않지만 자바스크립트 객체를 생성하는 생성자 함수를 이용할수 있다.

 

객체지향 프로그래밍의 특징

1.  재 사용성이 높음
2.  보다 유연하고 유지보수성이 높음

---

Object 생성 방법을 알아보기 전에 각각의 개념을 한번 보고 넘어가도록 하자.

1.캡슐화

1. 데이터를 외부에서 직접 접근을 하면 안되고 오로지 함수를 통해서만 접근해야하는데 이를 가능하게 해주는 것이 캡슐화
2. 내부의 구현이 어떻게 되어있는지 어떻게동작을 하는지는 사용자에게 숨겨져 있다.
3. 캡슐화는 OOP의 대표적인 특징 중 하나로 정보 은닉의 개념을 포함한다.
4. 객체가 맡은 역할을 수행하기 위해 하나의 목적을 한데 묶는것

2.상속성(inheritance)

 

1. 객체지향 프로그래밍에서 상속이란 이미 존재하는 코드를 재사용하거나 기존 코드를 확장 하는 좋은 방법이다.
2. 대신 프로토타입을 이용한 객체 차원의 상속을 지원한다
3. 상위 개념의 특징을 하위 개념이 물려받는 것

 

상속의 장점

1. 재사용으로 인해 코드가 줄어듬 범용성있게 사용 가능

3.추상화(Abstraction)

컴퓨터프로그래밍 에서의 추상화란 복잡한 소프트웨어 시스템을 효율적으로 설계하고 구현할 수 있는 방법입니다.
속은 복잡한데 사용자가 쓰기에는 간단한것 즉, 우리가 만든 객체를 사용자들이 쉽게 쓰도록 해주는 것이다.

추상화의 장점 

1. 사용자가 낮은 수준의 코드를 작성하지 않도록 도움.
2. 코드 중복 방지 및 재사용성 향상.
3. 사용자에게 영향을 끼치지 않은 채로 독립적으로 클래스의 내부 구현 변경 가능
4. 중요한 세부 정보만 사용자에게 제공하므로 응용 프로그램 또는 프로그램의 보안 향상에 도움

4.다형성(Polymorhism)

부모클클래스 에서 물려받은 가상 함수를 자식 클래스 내에서 오버라이딩 되어 사용하는것이다.

다형성은 같은 타입이지만 실행 결과가 다양한 객체를 대입(이용)할 수 있는 성질을 말합니다.

다형성은 객체를 부품화시킬 수 있습니다.

 

---

2. instantiation Patterns

1.Functional

var User = function() {
 var getItem = {};
 getItem.itemCount = 0;
 getItem.dropItem = function () {
    this.itemCount += 1;
 }
 return getItem;
}
var user1 = User();
var user2 = User();
//user1.dropItem     +1
//user1.itemCount     1

위 예제는 아이템을 획득하면 itemCount가 1씩 증가하게 코드를 짜 봤다. 위는 Instantiation Patterns의 가장 기본적인 방법이다.

 

2. Functional Shared

var extend = function(to, from) {
  for (var key in from) {
    to[key] = from[key];
    }
  };

var someMethods = {};
someMethods.meve = function() {
  this.position += 1;
};

var Car = function(position) {
 var someInstance = {
    position: position,
  };
    extend(someInstance, someMethods);
    return someInstance;
};

 

위에 Functional과 비슷한데 왜 이렇게 더 복잡한 방법을 사용할까? 이유는 이전의 Functnion 방식은 인스턴스를 생성할 때 마다 모든 메소드를 someInstance에 할당하므로 각각의 인스턴스들이 메소드의 수 만큼 메모리를 더 차지하기 때문이다.

그러나 Function Shared방식은 someInstance라는 객체에 있는 메소드들의 메모리 주소만을 참조하기 때문에 메모리 효율이 좋아진다.

 

Prototypal

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

var Car = function(position) {
  var someInstance = Object.create(someMethods);
  someInstance.position = position;
  return someInstance;
};

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

Prototypal에서는 전에 쓰지지 않던 Object.create가 보인다. Obect.create는 특정 객체를 프로타입으로 하는 객체를 생성해 주는 함수다.

4. Pseudoclassical

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

Car.prototype.move = function() {
  this.position += 1;
};

이렇게 찍어낼 때는 newoperator을 붙여야 함
var car1 = new Car(5);

가장 많이 사용되는 방식으로 프로토타입을 만들고 변수를 선언할때 new operator을 붙이는게 특징이다

 

 

3. Javascript에서 prototype은 무엇이고 왜 사용해야 하는가

자바스크립트는 프로토타입 기반 객체지향 언어라고 표현한다. 그렇다면 대체 프로토타입은 무엇을 의미하는 걸까? 먼저 자바스크립트에서 객체를 만드는 두 가지 방법을 보자.

 

let obect = {}

let obect2 = new Obect();

콘솔로 둘을 찍어냈는데 둘다 같은 부모를 참조하고 있는 모습을 보여줌

 

우리는 전에 배운 this를 이용해 아래와 같은 코드를 작성할수 있다. 이 코드에서 Characters라는 함수를 통해 user1과 user2객체를 생성했다. 유저들은 각각 3개의 속성을 갖게 될거고 데이터 또한 동이하다. 여기서 봐야할 부분은user1과 user2는 메모리를 6을 차지한다. 지금은 2개 뿐이라 별로 상관없지만 나중에 큰 프로젝트 100개 1000개가 된다면 분명 많은 메모리를 차지하게 될 것이다. 이 메모리 참조를 해결할수 있는 방법이 property이다.

function Characters () {
 this.weapon = 1;
 this.shoes = 2;
 this.shield = 1;
}

var user1 = new Characters();
var user2 = new Characters();

console.log(user1.weapon)
console.log(user2)

두 코드는 거의 비슷하다. 여기서 집중적으로 봐야할 부분은 user1과 user2는 각각 자신의 변수를 갖고 있는것이 아니라 Characters.prototype 이라는 어떤 Obect의 속성을 공유하고 있는것이다.

function Characters () {}

Characters.prototype.weapon = 1;
Characters.prototype.shoes = 2;
Characters.prototype.shield = 1;

let user1 = new Characters();
let user2 = new Characters();

console.log(user1.weapon)
console.log(user2)

우리는 property를 이용해 메모리 참조를 효율적으로 줄여줄수 있다. 

 

 

상당히 어려운 개념이었습니다.. 아직 제가 잘 이해했는지도 잘 모르겠네요. 혹시 틀린점이나 추가해야할점을 댓글로 알려주신다면 감사하겠습니다.