자바스크립트에서 모듈 패턴 공개하기

[JS #2 WIL 포스트]

캡슐화는 Javascript에 내재되어 있지 않습니다. private 및 public와 같은 수정자는 원치 않는 액세스로부터 개체를 보호하는 데 도움이 됩니다. 이것이 JS에서 함수 범위가 중요한 이유 중 하나입니다. 각 함수는 새 범위를 만듭니다. 범위는 함수 내 변수의 가시성을 나타냅니다.

예를 들어 아래 스니펫에서 getter/setter 메서드를 사용하지 않으면 게임보드의 gridItems 속성에 직접 액세스할 수 없습니다. 따라서 잘못된 그리드 항목 값을 설정할 가능성이 제거됩니다.

게임 보드의 행, 열, 대각선 승자 확인은 가져올 개체에서 액세스할 수 없습니다. GameBoard의 반환된 함수만 외부에서 액세스할 수 있습니다.

const GameBoard = (function() {
//no one can access this variable directly
    let gridItems = Array(9).fill('I');

    function resetBoard() {
        gridItems = Array(9).fill('I');
    }

    function setGridItemValue(index) {
        gridItems[index] = turn;
    }

    function getGridItems() {
        return gridItems.slice(0);
    }

    function checkWinner(board) {
        if(checkDraw(board)) {
            return "tie";
        }

        if(checkRowWin(board) || 
           checkColumnWin(board) || 
           checkDiagonalWin(board)) {
            return winner;
        }

        return null;
    }

    ...

    return {
        setGridItemValue,
        checkWinner,
        resetBoard,
        getGridItems,
    }
}());

캡슐화를 제외하고 이 패턴에 대해 주목해야 할 또 하나의 중요한 점은 IIFE(즉시 호출된 함수 표현식)를 사용한다는 것입니다. 정의되는 즉시 실행됩니다. 자체 실행 익명 함수라고도 하며 두 부분으로 구성됩니다.
A. 그룹화 연산자가 있는 함수 자체

(function () {
  statements
})

B. 두 번째는 JS 엔진이 함수를 직접 해석하는 IIFE()를 생성합니다.

두 번째 부분은 함수의 우발적인 호출이 없는지 확인하여 많은 GameBoard 개체를 생성합니다. GameBoard를 사용하기 위해 사용자는 공개적으로 사용 가능한 기능을 호출할 수 있습니다.

GameBoard.resetBoard();
GameBoard.checkWinner();

이제 GameBoard 모듈을 JS 프로젝트의 다른 부분에서 사용할 수 있습니다. 이 repository 에서 GameBoard 함수의 사용법을 확인하십시오.

참고문헌
[1] Revealing Module Pattern
[2] IIFE