javascript 디자인 패턴

이 글은 javascript 공부를 위해 33-js-concepts 을 참고하여 작성한 내용입니다.
33-js-concepts

(javascript 의 디자인 패턴의 종류는 매우 많습니다.
그 중 주요 패턴들만 소개하고, 더 많은 패턴이 궁금하시면 맨아래 링크를 참조해주세요.)

디자인패턴이란?

• 소프트웨어 디자인에서 흔히 발생하는 문제들을 위한 재사용가능한 해결책이다.

Module Pattern

• 흔히들 생각하는 모듈화 패턴이라고 생각할 수 있다.

• 모듈화의 장점

  • 모듈의 변화가 다른 부분 코드의 영향을 미치지 않는다.

  • namespace의 오염을 피할 수 있다.

  • 모듈을 재사용 할 수 있다.

  • 캡슐화 개념을 모방하는데도 사용된다.

    ( javascript는 접근제어자가 없기 때문에, 모듈화를 통해 접근을 제어할 수 있다.)

const myModule = (function() {
  
  const privateVariable = 'Hello World';
  
  function privateMethod() {
    console.log(privateVariable);
  }
  return {
    publicMethod: function() {
      privateMethod();
    }
  }
})();
myModule.publicMethod();

Revealing Module Pattern

• 위의 모듈 패턴을 개선한 패턴이다

  (모듈패턴의 단점은 private 함수나 변수를 사용하기 위해 public 함수를 만들어야 한다.)

• Revealing Module Pattern 은 반환되는 object 속성들에 private 함수를 매핑한다.

const myRevealingModule = (function() {
  
  let privateVar = 'Peter';
  const publicVar  = 'Hello World';
  function privateFunction() {
    console.log('Name: '+ privateVar);
  }
  
  function publicSetName(name) {
    privateVar = name;
  }
  function publicGetName() {
    privateFunction();
  }
  /** reveal methods and variables by assigning them to object     properties */
return {
    setName: publicSetName,
    greeting: publicVar,
    getName: publicGetName
  };
})();
myRevealingModule.setName('Mark');
// prints Name: Mark
myRevealingModule.getName();

• Revealing Module Pattern의 장점
  • return문 변경을 통해 함수나 변수들을 public 에서 private로 변경할 수 있다.
  • return문에 함수정의를 포함하지 않는다. 그러므로 코드가 깔끔하고 가독성이 좋다.

Singleton Pattern

• 싱글톤 패턴은 한번만 인스턴스화 할 수 있는 object 이다.

  해당 클래스의 인스턴스가 이미 생성되어 있다면, 단순히 그 object를 참조한다.

  그러므로 생성자의 반복 호출은 항상 같은 object를 나타낸다.

const user = {
  name: 'Peter',
  age: 25,
  job: 'Teacher',
  greet: function() {
    console.log('Hello!');
  }
};

• javascript는 고유한 메모리를 차지하고, 우리가 user 라는 object를 호출했을 때, 이 object의 참조를 반환한다.

const user1 = user;
user1.name = 'Mark';

// prints 'Mark'
console.log(user.name);
// prints 'Mark'
console.log(user1.name);
// prints true
console.log(user === user1);

• javscript의 값 대신 참조를 전달하기 때문에, 위와 같이 const user1 = user 는 user 객체를 참조하는 뜻이므로, user1의 name을 변경하면 user의 name도 같이 변경되는 것을 볼 수 있다.

• Singleton 패턴은 생성자 함수의 사용에도 영향을 준다.

let instance = null;
function User() {
  if(instance) {
    return instance;
  }
  instance = this;
  this.name = 'Peter';
  this.age = 25;
  
  return instance;
}
const user1 = new User();
const user2 = new User();
// prints true
console.log(user1 === user2);

• 생성자 함수를 호출할때, instance object의 생성 여부를 체크하여, 생성이 되어있지 않으면 instance를 생성하고, 생성되어있으면 생성되어있는 object를 retrun 한다.

  그래서 user1 === user2 는 true 이다.

• Singleton 패턴은 모듈 패턴을 사용할 때도 영향을 미친다.

const singleton = (function() {
  let instance;
  
  function init() {
    return {
      name: 'Peter',
      age: 24,
    };
  }
  return {
    getInstance: function() {
      if(!instance) {
        instance = init();
      }
      
      return instance;
    }
  }
})();
const instanceA = singleton.getInstance();
const instanceB = singleton.getInstance();
// prints true
console.log(instanceA === instanceB);

References

https://blog.bitsrc.io/understanding-design-patterns-in-javascript-13345223f2dd

https://www.digitalocean.com/community/tutorial_series/javascript-design-patterns

https://github.com/fbeline/design-patterns-JS/blob/master/docs.md