Object Type 알아내기

typeof

보통 javascript에서 데이터 타입을 알아내기 위해서 typeof 연산자 를 사용합니다. typeof를 통해 javascript의 다음과 같은 데이터 타입을 알아낼 수 있습니다.

​x
 typeof undefined  // "undefined"
 typeof 1          // "number"
 typeof {}         // "object"
 typeof true       // "boolean"
 typeof "str"      // "string"
 function func() {}
 typeof func       // "function"
 typeof Symbol("sym"); // "symbol"

그렇다면 이 이외에 Array 나, Null, Date 와 같이 Object의 타입은 어떨까요.

xxxxxxxxxx
typeof []       // "object" 
typeof null     // "object" 
const date = new Date();
typeof date     // "object" 

예상하던 바와 달리 Array, Null, Date 모두 "object"라는 결과를 보여 줍니다.

그럼 typeof 를 사용하는 방법 이외에 Object 인지 Array 인지, Null 인지 어떻게 구분할 수 있을 까요. 바로 다음과 같이 Object.prototypr.toString을 이용하면 됩니다.

Object.prototype.toString

xxxxxxxxxx
function getType(data) {
    return Object.prototype.toString.call(data);
}

xxxxxxxxxx
 function getType(data) {
     return Object.prototype.toString.call(data);
 }
​
 getType({});           // "[object Object]"
 getType(6);            // "[object Number]"
 getType(true);         // "[object Boolean]"
 getType("string");     // "[object String]"
 getType([1, 2]);       // "[object Array]"
 getType(undefined);    // "[object undefined]"
 getType(null)          // "[object Null]"
 function func(){}
 getType(func);         // "[object function]"
 getType(new Date())    // "[object Date]"

!! 연산자

코드를 보던 중,

x
function somthing () {
    let a;
    /* ... */
    return !!a;
}

와 같은 코드를 보게 되었습니다.

여기서 return !!a; 의 !! 이 어떤 이유에서 쓰였는지 의문이 들어 알아보았습니다.

사실 !! 이라는 연산자가 존재하는 것은 아닙니다. ! 는 논리연산자 중 부정 연산자인데, !! 은 단순히 부정연산자가 두 번 쓰인 것이었습니다.

! 는 true인 값을 false 로, false인 값을 true로 바꾸는 것으로 알고있었는데, 왜 ! 를 두번 사용하여 원래대로 바꾼 것인지 의문이었습니다. MDN 문서를 보면 다음과 같이 나와있습니다.

!(피연산자)와 같이 사용하여, 피연산자가 true로 변환될수 있을경우 false,

불가능한경우 false 를 반환한다.

왜 문서에서 '피연산자가 true 로 변환될 수 있는 경우, 불가능한 경우' 라고 하였을까요.

문서에서 말하는 그 변환될 수 있는 경우란 Truthy 와 Falsy 값을 말하는 것 이었습니다.

간단하게 설명하면,

Truthy 는 조건문에서 true 로 간주되는 것, Falsy는 조건문에서 false 로 간주되는 것 입니다.

그래서 Truthy 인지 Falsy 인지 알수 있는 방법은 간단합니다. if 조건문에 넣어보면 됩니다.

xxxxxxxxxx
if ( value ) {
    // value 는 Truthy 이다
} else {
    // value 는 Falsy 이다.
}

Falsy 인 값 의 종류를 보면 그렇게 많지 않습니다.

• false
• 0 (zero)
• '' (빈 문자열)
• "" (빈 문자열)
• null
• undefined
• NaN

그리고 이를 제외한 나머지는 모두 Truthy 입니다. 가령 위에는 없지만 Falsy 하게 보이는

• '0' (string)
• "0" (string)
• "false" (string)
• [] (empty array)
• {} (object)

이것들 모두 Truthy 입니다.

그럼 다시 본론으로 들어가서 ! 연산자의 경우,

Truthy 를 false 로, Falsy 를 true 로 바꾸는 연산자 라고 할 수 있습니다. 그래서 !! 이렇게 부정 연산자를 두 번 사용하는 것은,

Falsy -> false, Truthy -> true 로 형변환 하는 용도로 사용된다는 것을 알게 되었습니다.

xxxxxxxxxx
var a;
a;      // undefined (falsy)
!a;     // true
!!a;    // false

Singleton Pattern

Singleton Pattern(싱글톤 패턴)은 인스턴스화할 때, 단 하나의 인스턴스(오브젝트)만을 유지하도록 강제하는 패턴입니다.

싱글톤 패턴은 새로운 인스턴스를 생성할 때 이미 인스턴스가 존재한다면, 존재하는 인스턴스를 반환하고 존재하지 않으면

새로운 인스턴스를 만들어서 반환하는 방식으로 동작합니다.

싱글톤은 언제 유용할까요?

예를 들어 로그를 남기는 기능을 가진 클래스의 경우,

여러 클래스의 인터페이스에서 접근할 필요가 있지만 실제 로그를 남기는 인스턴스는 하나만 있으면 되는 경우가 있습니다.

이렇듯이 하나의 인스턴스만 유지해야 할 때 싱글톤을 사용할 수 있습니다.

코드로 보겠습니다.

var singletonPattern = (function () {
   var instance;
   
    function init() {
        var privateVariable = "private";
        function privateMethod() {
            /*...*/
        }
        return {
            publicVariable: 5,
            publicMethod: function () {
                /* ... */
            }
        }
    }
    return {
        getInstance: function () {
            if ( !instance ) {
                instance = init();
            }
            return instance;
        }
    } 
}());

init() 은 인스턴스를 생성하는 기능을 합니다.

그리고 getInstace() 에서 현재 instance를 확인하여 인스턴스가 생성되어있지 않을 경우에,

새로운 인스턴스를 생성하고 반환합니다. 인스턴스가 이미 생성되어있다면 기존의 인스턴스를 반환합니다.

xxxxxxxxxx
var singletonA = singletonPattern.getInstance();
var singletonB = singletonPattern.getInstance();
console.log( singletonA === singletonB );   // true

사용하면 편리한 싱글톤이지만 장점만 있는 것은 아닙니다.

싱글톤의 대표적인 단점으로는

• 여러 클래스에서 접근하기 때문에, 결합도가 올라간다.
• 한번 생성되면 애플리케이션 종료까지 메모리에 남게 된다

는 점이 있습니다.

싱글톤을 사용하면 전역변수에 접근하듯이 쉽게 쓸수있지만, 전역변수의 사용을 항상 피하듯이

꼭 필요한 경우에만 사용하여야 할 것 같습니다.

Module Pattern, Revealing Module Pattern

먼저 Module Pattern, Revealing Module Pattern을 알아보기 전에,
왜 이런 패턴들이 필요한지 알아보기 위해 Object Literal을 살펴보겠습니다.

Object Literal

var objectLiteral = {
    thisIsVariable: 5,
    thisIsFunction: function () {
        console.log("variable : " + this.thisIsVariable);
    }
}

위와 같이 Object를 표현한 방식을 Object Literal이라고 합니다.

Object Literal을 통해 변수와, 함수를 한 Object에 표현할 수 있습니다.
하지만 이 경우 private 멤버를 표현할 수 없다는 단점이 있습니다.

xxxxxxxxxx
objectLiteral.thisIsVariable = 6;
objectLiteral.thisIsFunction(); // "variable : 6" 출력

단점 : private 한 변수나 함수를 표현할 수 없다.(전부 public 이다!)

이런 Object Literal의 private, public의 구분을 둘 수 없다는 단점을 극복하기 위해,
Module Pattern이라는 것이 고안되었습니다.

Module Pattern

​x
var ModulePattern = ( function () {
    var privateVariable = 5;        // private 변수
​
    function priavateFunction () {  // private 함수
        privateVariable ++;
    }
​
    return {
        publicVariable: "It's public var",  // public 변수
        publicFunction: function () {       // public 함수
            priavateFunction();
            console.log(
                "private var : " + privateVariable + 
                " public : " + this.publicVariable
            );
        }
    }
})();

Module Pattern에서는 즉시 실행 함수(IIFE) 형태를 통해 모듈을 정의합니다.
즉시 실행 함수 내부에 private 멤버를 정의하고 public멤버를 Object에 담아 return 합니다.
실행을 해보면,

xxxxxxxxxx
ModulePattern.privateVariable; // line 1: undefined
ModulePattern.privateFunction(); // line 2: 'TypeError' - ... is not a function
ModulePattern.publicVariable;   // line 3: "It's public var"
ModulePattern.publicFunction(); // line 4 : 6

line 1 : private 변수에 접근할 수 없다

line 2 : private 함수를 호출할 수 없다.

line 3 : public 변수에 접근할 수 있다.

line 4 : public 함수를 호출할 수 있다.

장점 : private 과 public 을 구분지을 수 있다.
단점 : - private, public에 접근하는 방식이 달라진다.
- private 에서 public 에 접근할 수 가 없다.

Module Pattern의 단점은 public 과 private에 접근하는 방법이 다르고 일반적인 방식으로 private 함수 내에서 public에 접근할 수가 없습니다.
그렇게 때문에 private method를 public으로 바꾸는 작업등 모듈 API에 수정이 있을 때 수정 요소가 많아지게 됩니다.
이 단점을 극복하기 위해 Revealing Pattern이 고안되었습니다.

Revealing Module Pattern

xxxxxxxxxx
var RevealingModulePattern = ( function () {
    var _privateVariable = 5;
​
    function _privateFunction() {
        _privateVariable ++;
    }
    
    function publicFunctionOne() {
        console.log("value : " + _privateVariable);
    }
    
    function publicFunctionTwo() {
        _privateFunction();
        publicFunctionOne();
    }
​
    return {    // public 멤버만 드러낸다.
        publicOne: publicFunctionOne,
        publicTwo: publicFunctionTwo
    }
})();

Revealing 은 "드러내다" 라는 의미로 private/public을 같은 형태로 정의하되 ,

마지막(return)에는 public API만을 드러내는 방식입니다.

xxxxxxxxxx
RevealingModulePattern._privateFunction();  // 'TypeError' ... is not afunction
ReavealingModulePattern.publicOne();        // "value : 5"
ReavealingModulePattern.publicTwo();        // "value : 6"

이 방식은 모듈내에서 public 과 private 에 접근하는 방식을 같게 해줄수 있습니다. 또한 모듈 맨마지막에 public 요소를 드러내어 쉽게 private 요소를 public 으로 바꿔줄 수도 있습니다.
return 을 보고 private 와 public을 한번에 알아보기 힘들기 때문에 private 요소의 이름 앞은 _(underscore) 로 표현하기도 합니다.