javaScript. (23) 디자인 패턴 (싱글턴 / 모듈 / 생성자)

자바스크립트 디자인 패턴

 

- 자바스크립트 앱을 만들 때 자주 사용되는 패턴

 

 

---

 

 

 

1) 모듈 패턴 (=IIFE)

- 비공개 변수를 만드는 것. (원래 js에는 없는 기능임)

 

javaScript. IIFE(즉시 호출 함수 표현식)

즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)은

선언하자마자 즉시 실행(=호출)되는 Javascript Function 를 말한다.

 

SYNTAX

(function () {
    statements
})();

 

 

 

 

2) 싱글턴 패턴

- 단 하나의 객체만을 만들 때 사용.

- 대표적인 예로, 객체 리터럴(literal)이 있다.

>> 객체가 단 하나밖에 존재하지 않지만, 모든 속성(property)이 공개되어 있음.

- 속성을 비공개로 만드는 것이 제대로 된 싱글턴 패턴이다.

 

❕ 하나의 객체만 만들되 / 속성은 비공개로.

- 모듈패턴을 변형한 패턴임.

- 처음 네임스페이스를 만들 때 사용.

 

예> 게임을 만들 때
게임 객체를 싱글턴으로 제작함.
게임 내의 모든 것을 감싸고 있는 게임 객체.
>> 게임을 실행했을 때 한번만 켜져야하므로.

 

let singleton = (function() {      // (function() {})() ㅡ 모듈 패턴 (IIFE)
  let instance; 
  let a = 'hello';              // 비공개변수
  
  function initiate() {          // 함수 ㅡ 실제 객체의 내용.
    return {                     // ㄴ a,b를 가진 객체 반환
      a: a,
      b: function() {
        alert(a);
      }
    };
  }
  
  return {                             // 1️⃣ getInstance메서드를 가진 객체 반환
    getInstance: function() {        
      if (!instance) {         // 처음 호출됬을때만 ㅡ 여러번 호출시 initiate 거치지 않음
        instance = initiate();          // 3️⃣ 내부적으로 initiate 함수 호출 ㅡ 리턴값(a,b를 가진 객체) instance에 저장
      }
      return instance;         // 4️⃣ instance 반환
    }
  }

})();

let first = singleton.getInstance();         // 2️⃣ getInstance를 호출하는 순간
let second = singleton.getInstance();
console.log(first === second);        // true;

getInstance라는 메소드를 가진 객체를 반환하는데,

getInstance 함수를 호출하는 순간 내부적으로 initiate 함수가 호출되고, (if 조건 만족) 

instance에 아까 그 객체의 내용이 저장되고 동시에 반환된다.

 

getInstance가 여러 번 호출됐을 경우에는 코드를 보시면

이미 instance 객체가 있는 경우에는 initiate를 거치지 않고 바로 반환된다.

 

 

 

 

3) 생성자 패턴

- 상속(inheritance)를 다룰 때 배웠다.

- 대부분의 객체는 '생성자 패턴'으로 만들게 된다. (특히, 상속이 필요할 때)

- 모듈 패턴과 조합하여 보기좋게 작성 가능.

 

function Vehicle(name, speed) {          // 생성자
  this.name = name; 
  this.speed = speed;
}

Vehicle.prototype.drive = function () {             // prototype 에 메서드 선언
  console.log(this.name + ' runs at ' + this.speed)
};

🔺 function 부분과 prototype으로 따로 떨어져 있는 위 코드를 

 

🔻 IEFF(모듈패턴)을 이용해서 한꺼번에 작성할 수 있다. (한 변수 안에 넣기)

const Vehicle = (function() {    // 하나의 함수에 다 포함해서 리턴값을 Vehicle 변수에 저장 
  function Vehicle(name, speed) {       // 생성자
    this.name = name; this.speed = speed;
  }
  Vehicle.prototype.drive = function () {       // 프로토타입 (메서드 선언)
    console.log(this.name + ' runs at ' + this.speed);
  };
  return Vehicle;      // Vehicle 반환
})();

이때, 생성자함수 Vehicle과 변수명 Vehicle이 같지만, IIFE라서

변수 Vehicle에 생성자 Vehicle이 덮어씌워짐. 

 

 

 

 

그 외에도

다양한 디자인패턴은 추후에 추가예정.

 

- 빌더 / 팩토리 / 중재자 / 옵저버 / 메소드체이닝

 

 

 

---

REFERENCE

 

https://www.zerocho.com/category/JavaScript/post/57541bef7dfff917002c4e86

(JavaScript) 디자인 패턴(싱글턴, 모듈, 생성자)

이 포스팅은 zerocho님의 javascript 강의를 보고 작성한 글입니다.

공부+기록 용으로 작성한 것이며, 자세한 것은 위 포스팅을 참고하세요!