객체 지향 프로그래밍 (OOP, Object-oriented programming)은 절차 지향 프로그래밍과는 다르게 데이터와 기능을 한 곳에 묶어서 처리합니다.
객체 지향 프로그래밍 특징
- 캡슐화
- 상속
- 추상화
- 다형성
prototype, constructor, this
-
prototype: 모델의 청사진을 만들 때 쓰는 원형 객체(original form)입니다.
-
constructor: 인스턴스가 초기활될 때 실행하는 생성자 함수입니다.
-
this: 함수가 실행될 때, 해당 scope마다 생성되는 고유한 실행 context(execution context)입니다. new 키워드로 인스턴스를 생성했을 때에는, 해당 인스턴스가 바로 this값이 됩니다.
클로저를 이용해 매번 새로운 객체 생성
똑같은 기능의 코드를 복사해서 붙여넣고 재사용하는 것은 재사용성이 떨어집니다. 똑같은 기능은 클로저 모듈 패턴을 이용해 재사용성을 높일 수 있습니다.
function makeCounter() {
return {
value: 0,
increase: function() {
this.value++
},
decrease: function() {
this.value--
},
getValue: function() {
return this.value;
}
}
}
let counter1 = makeCounter()
counter1.increase()
counter1.getValue() // 1
let counter2 = makeCounter()
counter2.decrease()
counter2.decrease()
counter2.getValue() // -2객체 지향 (Object Oriented JavaScript)
객체 지향 프로그래밍은 하나의 모델이 되는 청사진(blueprint)를 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴입니다.
설계도라고 생각해도 됩니다. 자동차를 예로 들면 자동차가 굴러가기 위해서는 바퀴와 핸들, 엔진이 필요합니다. 기본적인 설계를 바탕으로 각각의 객체가 특정 자동차 모델로 출시됩니다.
이런 객체를 만들 때는 일반적인 함수를 정의하듯 만듭니다.
함수를 이용하는 방법은 다르지만, new 키워드를 사용해 새로운 인스턴스를 만들어낼 수 있습니다.
주의 사항
일반적인 함수는 소문자로 시작합니다. 상황에 따라서 적절한 동사를 포함하고 있습니다.
하지만 클래스 함수는 대문자로 시작하고 일반 명사로 만듭니다.
class Counter {
constructor() {
this.value = 0;
}
increase() {
this.value++
}
decrease() {
this.value--
}
getValue() {
return this.value
}
}ES6에 등장한 최신 문법 (Class)
객체지향 프로그래밍에서 생성자(constructor)함수라고 부릅니다. 인스턴스가 만들어질 때 실행됩니다. 생성자 함수는 return 값을 만들지 않습니다.
class Car {
constructor(brand, name, color){
}
}let a8 = new Car('audi', 'a8', 'silver');
let cls = new Car('benz', 'cls', 'black');
let i8 = new Car('bmw', 'i8', 'red');new 키워드를 통해 클래스의 인스턴스를 만들어낼 수 있습니다.
- 인스턴스를 만들 때에는 new 키워드를 사용합니다.
속성과 메소드
클래스에 속성과 메소드를 정의하고, 인스턴스에서 이용합니다.
this라는 인스턴스 객체를 알아보고 진행해야 합니다.
this라는 새로운 키워드는 객체지향 프로그래밍에서 빠지지 않고 등장합니다.
class Car {
constructor(brand, name, color){
this.brand = brand;
this.name = name;
this.color = color;
}
}parameter로 넘어온 브랜드, 이름, 색상을 인스턴스 생성시 지정하는 값입니다. this에 할당한다는 것은, 만들어진 인스턴스에 해당 브랜드, 이름, 색상을 부여한다는 뜻입니다.
메소드
ES6에서는 생성자 함수와 함께 class 키워드 안쪽에 묶어서 정의됩니다.
class Car {
constructor(brand, name, color){
this.brand = brand;
this.name = name;
this.color = color;
}
refuel() {
}
drive() {
}
}refuel, drvie와 같이 작성 된 게 메소드입니다.
ex) 실제 예시를 통해 보면 아래와 같습니다.
let i8 = new Car('bmw', 'i8', 'black');
i8.color; // black 출력
i8.drive(); // i8이 운행을 시작합니다.ex) 배열 예시
let arr = ['hello', world', 'korea'];
arr.length; // 3출력
arr.push('south'); // 새로운 element를 추가합니다.new Array를 통해 ('단어', '단어', '단어') 와 같은 배열을 만들 수 있습니다.
let arr = new Array('hello', world', 'korea');
arr.length; // 3출력
arr.push('south'); // 새로운 element를 추가합니다.
```