31. OOP(Object-oriented programing) in Javascript

홍인열·2021년 10월 5일

Object-oriented programing(객체지향 프로그래밍)?

객체 지향 프로그래밍(영어: Object-Oriented Programming, OOP)은 컴퓨터 프로그래밍의 패러다임 중 하나이다. 객체 지향 프로그래밍은 컴퓨터 프로그램을 명령어의 목록으로 보는 시각에서 벗어나 여러 개의 독립된 단위, 즉 "객체"들의 모임으로 파악하고자 하는 것이다. 각각의 객체는 메시지를 주고받고, 데이터를 처리할 수 있다.
객체 지향 프로그래밍은 프로그램을 유연하고 변경이 용이하게 만들기 때문에 대규모 소프트웨어 개발에 많이 사용된다. 또한 프로그래밍을 더 배우기 쉽게 하고 소프트웨어 개발과 보수를 간편하게 하며, 보다 직관적인 코드 분석을 가능하게 하는 장점을 갖고 있다. 그러나 지나친 프로그램의 객체화 경향은 실제 세계의 모습을 그대로 반영하지 못한다는 비판을 받기도 한다. -위키백과-
독립된 "객체"를 만들기위한 Class는 하나의 원형 객체로서 모델이 되는 청사진 역할을 한다. Class를 바탕으로 만들어진 객체는 Instance라고 부른다.

Class and Instance

Class

Class를 만드는 방법은 ES6이전의 방법으로 일반적인 함수를 정의하듯 만드는 방법과, ES6부터 도입된 class 키워드를 이용해서 만드는 방법이있다.
Class 이름은 pascal case로 작명한다.
class 키워드를 이용하는 방법을 지향한다!!

//class 키워드 사용
class Fruit {
  constructor(name, color) { //constructor를 이용하여 생성될 객체의 속성을 정의한다.
    this.name = name;  // this의 값은 new 키워드를 통해 생성될 Instance가 된다.
    this.color = color;
  }

  taste() { //function을 생략한 형태로 함수를 생성하여 메서드를 만들어 줄 수 있다.
    return `${this.name} is good taste!`;
  }
}

const fruitA = new Fruit('apple', 'red'); // Instance를 생성할대는 new 키워드 + class 를 사용 한다. Intance = fruitA
console.log(fruitA); // > Fruit {name: 'apple', color: 'red'}
console.log(fruitA.taste());// > apple is good taste!

const fruitB = new Fruit('banana', 'yellow'); //Intance = fruitB
console.log(fruitB); // > Fruit {name: 'banana', color: 'yellow'}
console.log(fruitB.taste()); // > banana is good taste!


// 사용을 지양하는 지양하는 지양하는 함수를 정의하듯 만드는 class, ES6 이전 방법.
// class 키워드를 사용한 방식과 동일한 결과를 나타낸다.
function Fruit(name, color) { //함수를 이용해 Class를 만들고,
  this.name = name;
  this.color = color;
}

Fruit.prototype.taste = function () { //Class의 prototype으로 메서드를 추가하는 방식이다.
  return `${this.name} is good taste!`;
};

객체지향 프로그램의 특징

• 캡슐화 Encapsulation

속성과 메서드가 느슨하게 결합하여 데이터와 기능을 하나의 객체 안에 넣어서 묶는 개념으로 은닉화의 특징도 포함하고 있다. 은닉화는 내부 데이터나 내부 구현이 외부로 노출되지 않도록 만드는 것이다.

• 상속 Inheritance

부모의 특징을 자식이 물려받는 것을 말한다. 위에서 Fruit이라는 class를 만들었는데 FruitOrigin이라는 class를 만들고 속성으로 origin을 추가하려고 한다면 중복되는 속성인 name, color을 재구현하지않고 Fruit에서 상속받을 수 있는 개념이다.
class FruitOrigin extends Fruit { // extends 키워드를 통해 상속받을 class를 가저온다.
  constructor(name, color, origin) {
    super(name, color); // super 키워드를 통해 상속받을 속성을 지정한다.
    this.origin = origin; //속성을 추가한다.
  }
}
const fruitC = new FruitOrigin('citrus', 'amber', 'jeju');
console.log(fruitC); // > FruitOrigin {name: 'citrus', color: 'amber', origin: 'jeju'}
console.log(fruitC.taste()); // > citrus is good taste! 메서드또한 동일한 이름의 메서드를 새로 지정하지 않으면 부모 class의 메서드를 사용한다.
• 추상화 Abstraction

내부는 아주 복잡한 구조로 되어있지만 노출된 부분은 아주 단순하게 만든다는 개념이다. 예로 버튼 태그를 클릭 했을때 내부에서는 선택자에 연결된 이벤트리스너가 핸들러 함수를 실행시켜 특정 동작이 일어난다. 하지만 버튼을 누를때는 내부에서 어떻게 동작하는 지는 신경쓰지 않아도 되는 개념이다. 이를 통해 인터페이스를 단순화 할 수 있다.

• 다형성 Polymorphism

많은 형태라는 뜻으로 같은 class를 이용해 생성된 Instance 객체의 똑같은 메서드라도 다른 방식으로 구현될 수 있음을 나타낸다.
//위이 Instance를 참고하면 동일한 메서드를 사용했지만 결과값은 다른것을 확인 할 수 있다.
console.log(fruitA.taste());// > apple is good taste!
console.log(fruitB.taste()); // > banana is good taste!

프로토타입

prototype은 해당 객체의 부모 class 정도로 생각 할 수 있을 것 같다.
console창에서 위에서 만든 fruitA의 DOM 을 살펴보면 prototype이 있는 것을 확인할 수 있다.
console.log(fruitA); // > Fruit {name: 'apple', color: 'red'} 객체를 보면 state 메서드가 없지만 정상적으로 동작한다.
console.log(fruitA.taste());// > apple is good taste!
이것은 해당 객체에 메서드가 없으면 프로토타입에서 탐색해서 있다면 실행이되게 된다. 상속의 개념과 연결된 부분이 있는 거 같다. 만약 프로토타입에 없다면 더 상위 프로토타입으로 순차적으로 검색한다.