1. 클로저 모듈 패턴
메서드 호출하기
- 메서드 호출 :
객체.메서드()와 같이 객체 내에 메서드를 호출하는 방법을 의미 - 메서드 호출 방식을 이용할 때에는 화살표 함수를 쓰지 않는다.
- 객체를 이용한 counter 예시
let counter1 = { value: 0, increase: function() { this.value++ // 메서드 호출을 할 경우, this는 counter1을 가리킵니다 }, decrease: function() { this.value-- }, getValue: function() { return this.value } } // 메서드 호출하기 (객체.메서드()) counter1.increase() counter1.increase() counter1.increase() counter1.decrease() counter1.getValue() // 2
클로저 모듈 패턴 이용하기
-
위의 예시에서 함수
counter1은 단 하나의 객체만 만들 수 있다.
만약 같은 기능을 사용하는 카운터가 여러 개 필요하다면 그 때마다 매번 코드를 만들어야 할까?.
비효율적일 것이다. -
이렇듯 비효율적인 반복을 줄여주기 위해서는 클로저 모듈 패턴을 사용할 수 있다.
-
클로저 모듈 패턴으로 구현한 counter 예시
function makeCounter() { let value = 0; return { increase: function() { value++; }, decrease: function() { value--; }, getValue: function() { return value; } } } let counter1 = makeCounter() counter1.increase() counter1.getValue() // 1 let counter2 = makeCounter() counter2.decrease() counter2.decrease() counter2.getValue() // -2- 클로저 모듈 패턴을 이용함으로써 같은 코드를 그대로 복사/붙여넣기 하지 않고 재사용할 수 있게 되었다.
2. 클래스와 인스턴스
객체 지향 프로그래밍이란?
- 하나의 모델이 되는 청사진(blueprint)을 만들고,
그 청사진을 바탕으로 한 객체(object)를 만드는 프로그래밍 패턴이다.
- 이미 자바스크립트에는 "객체"라는 개념이 이미 존재하기 때문에 용어를 잘 구분하는 것이 중요하다.
- 그냥 객체가 아닌 "청사진"을 바탕으로 한 객체는 인스턴스 객체(
instance object),
청사진은 클래스(class)라고 부른다.
- 하나의 모델이 되는 청사진(blueprint)을 만들고, ➡ class
그 청사진을 바탕으로 한 객체(object)를 만드는 프로그래밍 패턴이다. ➡ instance
인스턴스 만들기
new 키워드
-
인스턴스 객체를 만드는 방법은 그냥 일반적인 함수를 정의하듯 만들면 된다.
-
이때 함수를 이용하는 방법이 조금 다르다.
바로 실행할 때 클래스 이름 앞에new키워드를 쓰는 것이다.function Car(color) { } // 클래스 이름 앞에 `new` 키워드 붙이기 let avante = new Car('blue'); let mini = new Car('white'); let beetles = new Car('red');- 이렇게
new키워드를 사용하면 즉시 생성자 함수가 실행되며, 변수에 클래스의 설계를 가진 새로운 객체, 즉 인스턴스가 할당된다. - 각각의 인스턴스 (
avante,mini,beetles)는Car라는 클래스의 고유한 속성과 메소드를 갖는다.
- 이렇게
클래스명 만들기
- 클래스명을 만들 땐?
다른 함수와 구분하기 위해 보통 대문자로 시작하며 일반명사로 만든다.
(ex - car 🙅♀️, Car 🙆♀️)
3. 클래스 문법
3-1. 클래스를 정의하는 방법
- 여기서 사용되는 함수는 객체지향 프로그래밍에서 생성자(constructor) 함수라고 부른다.
- 생성자 함수는
return값을 만들지 않는다.
🟣 ES5 : 함수로 정의
function Car(brand, name, color) {
// 인스턴스가 만들어질 때 실행되는 코드
}🟢 ES6 : class 키워드로 정의
- 클래스를 만드는 새로운 문법 ES6(ECMAScript 6)이다.
- 최근에는 ES6 방법을 주로 사용한다.
class Car {
constructor(brand, name, color) {
// 인스턴스가 만들어질 때 실행되는 코드
}
}3-2. 클래스 속성의 정의
this키워드 : 인스턴스 객체를 의미한다.- 아래와 같이
this에 할당한다는 것은 만들어진 인스턴스에 해당브랜드,이름,색상을 부여하겠다는 의미이다.
🟣 ES5
function Car1(brand, name, color) {
this.brand = brand;
this.name = name;
this.color = color;
}🟢 ES6
class Car {
constructor (brand, name, color) {
this.brand = brand;
this.name = name;
this.color = color;
}
}3-3. 클래스 메서드의 정의
🟣 ES5
-
prototype이라는 키워드를 사용해야 메서드를 정의할 수 있다.function Car(brand, name, color) { /* 생략 */ } Car.prototype.refuel = function() { // 연료 공급을 구현하는 코드 console.log(`${this.name}에 연료를 공급합니다.`) } Car.prototype.drive = function() { // 운전을 구현하는 코드 console.log(`${this.name}가 운전을 시작합니다.`) }
🟢 ES6
-
생성자 함수와 함께
class키워드 안쪽에 묶어서 정의한다. (refuel() {},drive() {})class Car { constructor(brand, name, color) { /* 생략 */ } refuel() { // 연료 공급을 구현하는 코드 console.log(`${this.name}에 연료를 공급합니다.`) } drive() { // 운전을 구현하는 코드 console.log(`${this.name}가 운전을 시작합니다.`) } }
3-4. 인스턴스에서의 사용
-
설정한 속성과 메서드를 인스턴스에서 사용해보자.
let avante = new Car('hyundai', 'avante', 'black'); avante.color; // 'black' avante.drive(); // avante가 운전을 시작합니다. let mini = new Car('bmw', 'mini', 'white'); mini.brand; // 'bmw' mini.refuel(); // mini에 연료를 공급합니다.
용어 정리
- 여기에 있는 용어는 JavaScript에서만 유효한 용어이다.
| 용어 | 설명 |
|---|---|
| prototype | 모델의 청사진을 만들 때 쓰는 원형 객체(original form)이다. |
| constructor | 인스턴스가 초기화될 때 실행하는 생성자 함수 |
| this | 함수가 실행될 때, 해당 scope마다 생성되는 고유한 실행 context(execution context)new 키워드로 인스턴스를 생성했을 때에는, 해당 인스턴스가 바로 this의 값이 됨 |
