*OOP의 등장 배경
컴퓨터 프로그램은 알고리즘의 모음이고, 알고리즘은 프로세스의 모음(step by step, 예를 들면 pseudo code처럼)이다. 여러 개의 알고리즘이 모여 특수한 목적을 가진 프로그램이 되는 것이다.
언어는 프로그램을 개발할 수 있도록 도와주는 틀이다. 기계어(0과 1로만 구성된 컴퓨터의 언어), 어셈블리어(상대적으로 저급언어라 할 수 있고, 몇 가지의 명령어와 변수만 사용한다), 고급언어(고급언어에 가까울수록 인간의 언어와 유사하다)로 나뉘며 자바스크립트는 고급언어에 가깝다.
기계어 → 어셈블리어 → 고급언어 의 순서대로 구현이 쉽고(easy of implementation), 유연하고(flexibility), 휴대성(portable)이 좋으나 중간자가 많아 느려진다는 단점이 있다.
고급언어는 역사적으로 절차지향적, 객체지향적 언어로 나뉜다.
모든 작업을 하나의 코드 안에서 순차적으로 진행하여 특정 기능을 하게 만든다. 함수나 변수의 상관관계를 어떤 순서로 이어지게 할 지가 핵심이다.
프로그램을 구성하는 모든 요소가 객체로 되어있다! 이제 본격적으로 알아보자.
*OOP(Object Oriented Programming)란?
*클래스와 객체
*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()를 물려받고 태그별로 실행하는 편이 훨씬 효율적이다. 다형성은 이처럼 다른 클래스들을 같은 메소드나 속성으로 정의해준다.
*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);