[TIL]OOP

1_Object Oriented Programming

*OOP의 등장 배경

• 컴퓨터 프로그램은 알고리즘의 모음이고, 알고리즘은 프로세스의 모음(step by step, 예를 들면 pseudo code처럼)이다. 여러 개의 알고리즘이 모여 특수한 목적을 가진 프로그램이 되는 것이다.

• 언어는 프로그램을 개발할 수 있도록 도와주는 틀이다. 기계어(0과 1로만 구성된 컴퓨터의 언어), 어셈블리어(상대적으로 저급언어라 할 수 있고, 몇 가지의 명령어와 변수만 사용한다), 고급언어(고급언어에 가까울수록 인간의 언어와 유사하다)로 나뉘며 자바스크립트는 고급언어에 가깝다.

• 기계어 → 어셈블리어 → 고급언어 의 순서대로 구현이 쉽고(easy of implementation), 유연하고(flexibility), 휴대성(portable)이 좋으나 중간자가 많아 느려진다는 단점이 있다.

• 고급언어는 역사적으로 절차지향적, 객체지향적 언어로 나뉜다.

  • 절차지향적(C)

모든 작업을 하나의 코드 안에서 순차적으로 진행하여 특정 기능을 하게 만든다. 함수나 변수의 상관관계를 어떤 순서로 이어지게 할 지가 핵심이다.

• 객체지향적(C++, 자바)

프로그램을 구성하는 모든 요소가 객체로 되어있다! 이제 본격적으로 알아보자.

*OOP(Object Oriented Programming)란?

• 한마디로 사람이 세계를 보고 이해하는 방법을 흉내낸 방법론이다. 프로그램에서 표현하고자 하는 현실세계의 일들을 객체를 통해 모델링한다. 또한 객체를 사용하지 않으면 불가능하거나 어려웠을 일들을 쉽게 처리하는 방법을 제공한다. 특정 언어가 아닌 철학에 가깝다.
• 객체란 재사용성이 높은 무언가(thing)를 가리킨다. 자동차를 예로 든다면, 자동차의 기능은 속도내기, 주유받기, 운전대 돌아가기 등이 있으며 자동차의 속성으로는 크기, 색, 최고속력, 마력, 인승 등이 있다. 이때 자동차를 객체로 만들어두면 설정값 조정에 따라 여러 대의 자동차를 만들어낼 수 있다.
• 절차지향프로그래밍은 함수로 이뤄진다. 데이터가 변수에 저장되고 함수들이 상호의존적으로 데이터를 처리하기 때문에 문제를 일어날 확률이 높다. 반면 객체지향프로그래밍은 변수(property)와 함수(method)를 객체로 결합시켜서 문제를 처리한다.

*클래스와 객체

• 클래스 : 정해진 프로토타입에 맞춰 세부사항을 정의해주면 객체를 만들어준다. 하나의 정형화된 모델을 만들어두고 그 모델을 기반으로 한 복제품(instance)을 만들기 위해 사용한다.
• 위의 자동차 예시에서 자동차는 속성(properties)과 기능(method)를 갖춘 하나의 클래스가 된다. 이처럼 객체를 만들 수 있는 클래스, 그리고 속성과 함수를 정의하면 원하는 객체를 만들 수 있다.

*OOP의 네 가지 특징

1) Encapsulation(캡슐화)

클래스 혹은 객체 안에 속성과 함수를 모아두는 것으로, 캡슐화한다고 표현한다. 함수를 객체로 묶어두면 인자를 받을 필요가 없으므로 코드의 복잡도가 줄어들고 재사용성은 높아진다.

let baseSalary = 30000;
let overtime = 10;
let rate = 20;

function getWage(baseSalary, overtime, rate) {
	return baseSalary + (overtime * rate);
}

위의 코드를 encapsulation하면

let employee = {
	baseSalary : 30000,
	overtime : 10,
	rate : 20,                       //요런 속성들과
	getWage : function() {           //getWage라는 기능이 있다
		return this.baseSalary + (this.overtime * this.rate); //종속된 속성들을 불러오므로
 }
};
 employee.getWage();  //속성을 넣지 않아도 된다

2) Inheritance(상속)

클래스는 다른 클래스로부터 특성을 상속받을 수 있다. 부모의 특징을 물려받아 코드의 특정 부분만 업그레이드시키기 때문에, 중복코드를 줄일 수 있다.

3) abstraction(추상화)

스마트폰 사용자가 기기의 내부구조는 잘 모르듯, 복잡하지만 사용자가 알 필요는 없는 내부구조를 추상화한다. 객체가 함수나 변수를 많이 가지고 있지 않기 때문에 사용자의 입장에서 쉽게 이해하고 간단히 이용할 수 있다.

4) polymorphism(다형성)

여러 가지의(poly = many) 형식(form)이라는 뜻이다. 웹을 구성하는 html 코드는 각각 화면에 렌더되어야 하는데, 그 방법은 모두 다르다. 이때 모든 태그를 다 써주는 것보다 부모의 render()를 물려받고 태그별로 실행하는 편이 훨씬 효율적이다. 다형성은 이처럼 다른 클래스들을 같은 메소드나 속성으로 정의해준다.

2_Instantiation patterns

*Instantiation patterns?

자바스크립트에 클래스가 등장하기 전 사용하던 네 가지의 클래스 선언 방식이다.

1) functional

함수를 이용해 찍어내는(!) 방식

var car = function() {              //car라는 함수 만들기
	var someInstance = {};            //car를 실행했을 때 찍어낼 객체 선언

	someInstance.position = 0;        //초기값은 0으로 설정
	someInstance.move = function() {  //move 메소드 추가
		this.position += 1;             //someInstance.position과 같고,실행했을 때 1만큼 positin의 값 증가
 }                                  
return someInstance;
};

var car1 = car();
var car2 = car();
car1.move();

2) functional shared

var extend = function(to, from) {    //3. 인스턴스와 메소드를 합치는 함수를 만들어 
	for(var key in from) {             //car함수 내부에서 합쳐줌
		to[key] = from[key];
 }
};

var someMethods = {};                //2. 메소드를 담을 객체 생성

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

var car = function(position) {       //1. position을 바로 프로퍼티로 넣어줌
var someInstance = {
position: position,
};

return someInstance;
};

var car1 = car(5);
var car2 = car(10);                   //4. 공장 가동!!

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

functional shared 방식은 someMethods라는 객체에 있는 메소드들의 메모리 주소만을 참조하므로 메모리 효율이 좋아진다.

3) 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);

object.create는 특정 객체를 프로토타입으로 삼는 객체를 생성해주는 함수다. 첫번째 인자의 프로토타입 객체를 바탕으로 프로토타입을 만든다. 동일한 기능을 하는 완전히 새로운 객체를 만들어 참조하게 된다.

4) pseudo classical

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

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

var car1 = new car(5);
var car2 = new car(10);