1. OOP가 무엇일까?
결론부터 말하자면, 객체지향프로그래밍이다.
(object oriented programming)
그렇다면 객체지향 프로그래밍은 무엇일까?
코딩을 할 때 정해진
방식 이라고 볼 수 있다.
이 OOP 라는 추상적인 개념이 가지는 concept가 4가지 존재한다.
그 4가지를 통해 OOP를 이해해보자.
1-1. OOP concept
첫번째. Encapsulation
단어 자체의 뜻을 보면 캡슐화 한다는 의미이다.
그냥 글로 보면 이해가 어려우니 예제코드와 함께 보자
// no Encapsulation
let baseSalary = 30000;
let overtime = 10;
let rate = 20;
function getWage(baseSalary, overtime, rate){
return baseSalary + (overtime * rate);
}
getWage();
// yes Encapsulation
let employee = {
baseSalary: 30000,
overtime: 10,
rate: 20,
getWage: function(){
return this.baseSalary + (this.overtime * this.rate);
}
};
employee.getWage();위와 같이 흩뿌려진 데이터를 객체에 넣어줘서 Encapsulation을 했다.
이렇게 객체를 이용해서 데이터를 캡슐화 하는 것을 Encapsulation 이라고 한다.
두번째. Inheritance
단어 자체의 뜻만 보면 상속이다. 그림과 함께 보자
상속의 일반적인 개념은,
부모에게서 자식한테 물려주는것 그리고 자식이 부모한테 물려받는 것을 의미한다.
위 그림에서도 마찬가지로
ANIMAL CLASS에서 DOG, CAT, COW로 물려주고, 물려받는 관계가 설명되어
있다.
그렇다면 코드에서 이것이 어떤 것을 의미하는 걸까?
class Animal {
constructor(species){
this.life = true;
this.species = species;
}
}
let Dog = new Animal('Dog');
let Cat = new Animal('Cat');
let Cow = new Animal('Cow');
console.log(Dog);
// Animal {life: true, species: 'Dog'}
console.log(Cat);
// Animal {life: true, species: 'Cat'}
console.log(Cow);
// Animal {life: true, species: 'Cow'}예시 코드를 살펴보면 life, species properties는 모두 가지고 있는 것을 볼 수 있다. 위와 같이 부모가 가지는 메소드, 프로퍼티를 자식에게 가지도록 코딩하는 것을
Inheritance 컨셉이라고 볼 수 있다.
보통 자식은 부모에게 상속받은 요소를 포함하고, + 요소를 추가해서 사용한다.
(반대로 부모에게 상속받은 요소를 변경할 때도 있다.)
세번째. Abstraction
단어의 뜻은 추상화이다. 그림과 함께 보자
스마트폰을 열 때 지문인식을 한다고 가정해보자.
우리는 단순히 손가락을 터치스크린에 올려놓으면 되지만,
사실 내부에서는 많고 복잡한 전기신호가 오가며 검증을 한다.
이와 같이 코드도 마찬가지로 복잡한 내부구조를 만들어 놓고 추상화를 하여, 사용할 때는 추상적으로 사용하여 직관성을 높일 수 있다.
네번째. Polymorphism
만약 우리가 위와 같은 로직을 구성할 때,
Polymorphism을 이용하지 않으면 어떻게 될까?
speakCat(), speakDog() 이런식으로 각각 object마다.
함수를 새로 만들어서 지정해줘야 하기 때문에 비효율적이다.
반면 Polymorphism concept를 이용하면
부모에서 speak() 함수를 파라미터에 따라 다른값을 출력하게 만든 뒤
자식에게 전달만 해주면 끝난다. 보다 효율적이라고 볼 수 있다.
1-2. Crete Instantiation
위에서 우리는 OOP 방식이 지향하는 개념에 대해서 배웠다.
이번에는 실제로 OOP 방식을 활용하기 위한 인스턴트 생성 방법 몇가지를 정리해보자
첫번째. Functional
const Car = function() { let someInstance = {}; someInstance.position = 0; someInstance.move = function() { this.position++; } return someInstance } // result let car1 = Car(); let car2 = Car(); console.log(car1.move()) // {position: 1} console.log(car2) // {position: 0}
두번째. Functional Shared
let extend = function(to, from) { for (let key in from){ to[key] = from[key]; } }; let someMethods = {}; someMethods.move = function() { this.position++; }; const Car = function() { let someInstance = {position: 0}; return someInstance; }; // result let car1 = Car(); let car2 = Car(); console.log(car1.move()) // {position: 1} console.log(car2) // {position: 0}
앞선 Functional과 똑같은데 왜 이렇게 사용할까요? 그건 바로 효율성 문제에 있습니다.
이전의 Functional 방식은 인스턴스를 생성할 때 마다,
모든 메소드를 someInstance에 할당하기 때문에 각각의 Instance들이 메소들의 수만큼 메모리를 더 차지하기 때문입니다.
반면 Functinal Shared 방식은 someMethods 객체에 있는 메소드들의 메모리 주소만을 참조하기에 메모리를 효율적으로 사용 가능합니다.
아래는 해당 내용의 이해를 돕는 그림입니다.
세번째. Prototypal
let someMethods = {}; someMethods.move = function() { this.position++; }; const Car = function() { let someInstance = Object.create(someMethods); someInstance.position = 0; return someInstance; }; // result let car1 = Car(); let car2 = Car(); console.log(car1.move()) // {position: 1} console.log(car2) // {position: 0}
두번째와 달라진 점이 있다면, extend라는 Car함수와 someMethods함수를
연결 시켜주는 함수가 사라지고 Object.create 메소드를 이용해서 간결하게 연결시켜줬다는 점이다.
그렇다면 Object.create는 뭘까?
특정 객체를 프로토타입으로 하는 객체를 생성해주는 함수이다.
자세한건 여기에서 공부하자.
네번째. Pesudoclassical
let Car = function() { this.position = 0; }; Car.prototype.move= function() { this.position++; }; // result let car1 = new Car(); let car2 = new Car(); console.log(car1.move()) // {position: 1} console.log(car2) // {position: 0}
instance를 만들고 메소드를 프로토타입으로 만들어 주는 방법이다.
하지만 이때는 new keyword를 사용하는 것을 잊지말자.
(Pesudoclassical 방법은 ES6 Class와 동일한 표현만 다른 동일한 방법이다.)
가능하면 최신문법을 쓰도록 하자
