OOP : Object-Orient Programming in JavaScript

Zoey Song ·2020년 6월 17일

Code States : Pre & Immersive course

목록 보기

14/16

코딩을 처음 공부하는 나에게 '객체 지향 프로그래밍' 이라는 개념은 쉽게 이해되지 않았다. 강의를 듣거나 문제를 풀면서 개념을 대략적으로 이해하고 나서는 또 그 컨셉을 어떻게 실질적으로 코드에 사용해야하는지 감이 잘 오지 않았다. 그래서 이번 기회를 통해 OOP에 대해 정확하게 알고 넘어가보려고 한다.

OOP(Object Oriented Programming)란 무엇인가?

A programing paradigm centered around objects rather than functions.

즉, 함수가 아닌 오브젝트 중심으로 돌아가는 프로그래밍 체계이다. 여기서 주의할 점은 OOP는 프로그래밍 Language나 tool이 아닌 스타일 혹은 프로그래밍 체계이다.

OOP의 기본 구성 요소

Class
- 오브젝트를 만들어 내기 위한 설계도 혹은 틀.
- 연관되어 있는 변수와 메소드의 집합. 다른 클래스와 독립적으로 디자인해야 한다.
Object
- 소프트웨어 세계에 구현할 대상.
- 클래스에 선언된 모양 그대로 생성된 실체.
- 클래스의 인스턴스(Instance)라고 부르고 오브젝트는 모든 인스턴스를 대표하는 포괄적인 의미를 갖는다.
- OOP적 관점에서 클래스의 타입으로 선언되었을 때 '오브젝트'라고 부른다.
Instance
- 설계도를 바탕으로 소프트웨어 세계에 구현된 구체적인 실체.
- 즉, 오브젝트를 소프트웨어에 실체화하면 그것을 '인스턴스'라고 부른다.
- 실체화된 인스턴스는 메모리에 할당된다.
- 인스턴스는 객체에 포함된다고 볼 수 있다.
- OOP적 관점에서 오브젝트가 메모리에 할당되어 실제 사용될 때 '인스턴스'라고 부른다.
- 인스턴스는 어떤 원본(추상적 개념)으로부터 생성된 복제본을 의미한다.
Property
Method
- 클래스로부터 생성된 객체를 사용하는 방법.
- 객체의 속성을 조작하는 데 사용된다.

4 Pillars of Object-objected Programming

- Encapsulation

OOP에서는 관련된 변수(variable)들과 속성(property), 메소드(method)을 그룹화하여 오브젝트에 넣어준다. 캡슐화는 오브젝트의 데이터를 외부에서 접근하지 못하게 하고 함수를 통해서만 조작이 가능하다. 그렇기 때문에 complexity를 줄여주고 오브젝트 재사용으로 효율성을 늘린다.
기존의 Procedural Programing의 함수에서 많은 파라미터를 담는 반면에 OOP에서는 캡슐(유닛)안에서 변수들을 속성처리하여 파라미터의 수가 적다. 파라미터의 수가 적을 수록 사용, 관리하기 쉽다.

- Abstraction

객체들이 가진 공통의 특성들을 파악하고 불필요한 특성들을 제거하는 과정을 말한다. 객체들이 가진 동작들을 기준으로 이용자들이 동작만 쉽게 구동할 수 있도록 한다. Detail과 complexity (Property,Method)를 바깥으로부터 숨겨놓기 때문에 필요한 부분만 보여주고 인터페이스가 심플해지고 코드 변경의 영향을 덜 받는다.

- Inheritance

상위 개념의 특징(property, method)를 하위개념이 물려받는 것을 말한다. 같은 특징이 있는 클래스를 그대로 물려받기 때문에 다시 작성할 필요없이 재사용으로 효율성을 늘린다.

- Polymorphism (Many Forms)

모든 메소드와 속성들은 prototype 속성으로 선언되어 있고, 클래스가 다르다면 같은 이름의 메소드도 선언할 수 있다. 메소드들은 메소드가 선언된 클래스로 실행 영역이 한정되는데, 이것은 두 개의 클래스들이 서로 부모-자식 관계가 아닐 때에만 성립된다.

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

Object Literals - 객체리터럴

const circle = {
    radious: 1; 
    location: {
    	x:1, 
     	y:1},
    draw: function() {
    	console.log('draw');
    }
};

=> '{}'를 사용하여 객체를 직접 정의하는 방법을 말한다. 위와 같이 객체가 정의되는 순간, 객체는 ProtoType으로 Object.prototype을 가진다. 따라서 Object.prototype 에 정의된 메소드들을 사용할 수 있다. 이는 리터럴로 정의된 객체가 생성되는 것은 const circle = new Object(); 이렇게 Object라는 생성자의 명령으로 이루어지기 때문이다.

Constructor Function - 생성자 함수

function Circle(radious) {
    this.radious = radious;  //this is a basically reference to the object that is executing this piece of code. 
    this.draw = function() { 
    	console.log('draw') ;
    }
}
const another = new Circle(1); //creates empty object {}

=> 객체리터럴을 사용하면 쉽게 만들 수 있지만, 복수의 사용자, 메뉴 내 다양한 아이템 등을 객체로 표현하는 경우는 유사한 객체를 여러개 만들어야 한다. new연산자와 생성자 함수를 사용하면 유사한 객체를 여러개 만들 수 있다.

생성자 함수 이름의 첫 글자는 대문자로 시작한다.
반드시 new 연산자를 붙여 실행한다.
new를 써서 함수를 실행하게 되면,

1) 빈 객체를 만들어 this에 할당하고, 2) 함수 본문을 실행한다. 그리고 this에 새로운 프로퍼티를 추가한다. 3) this를 반환한다. (new를 쓰는 순간 저절로 반환해야 할 것들을 모두 this에 저장하고 자동으로 반환되기 때문에 명시적으로 함수에서 return할 필요가 없다.)
another객체는 Circle 의 메소드 draw에 접근이 가능하다.

Object() 사용

let person = new Object({
  name: 'Matthew',
  age: 20,
  greeting: function() {
    console.log(`Hi, My name is ${this.name}.`);
  }
});

Object.create() 을 통한 생성(상속)

const person = {
	isHuman: false,
	printIntroduction: function() {
    	console.log(`My name is ${this.name}. Am I human? 		  ${this.isHuman}`);
    }
};
const me = Object.create(person);
me.name = 'Matthew' //'name' is a property set on 'me' but not on 'person'
me.isHuman = true; //inherited properties can be overwritten 
me.printIntroduction();
// 'My name is Matthew. Am I human? true'