[JS] JavaScript 코딩팁

그 동안 잘 써오던 팁인데 의외로 잘 안쓰시는 것 같아서 공유하고자 합니다. ^^


1. 문자열을 숫자로…

보통 이 경우에는 parseInt 메소드를 많이 이용합니다만, 언어의 특성을 이용한다면 간단히 해결할 수 있습니다.

var str = "100";
  • parseInt : parseInt(str) // 결과는 100
  • + : +str // 결과는 100, 단 앞에 아무런 값이나 변수가 없어야 함
  • – 0 : str-0 // 결과는 100
var str = "010";
  • parseInt : parseInt(str) // 결과는 8
  • + : +str // 결과는 10
  • – 0 : str-0 // 결과는 10

위 결과에서 str 앞에 0이 있기 때문에 parseInt 함수는 이를 8진수 10으로 해석하게 됩니다. 이 문제를 해결하려면 parseInt 의 두 번째 인자로 지수값 즉 여기서는 10을 넘겨주면 됩니다.

2. Boolean 값으로 타입 변환

JavaScript 에는 Bool 로 인정되는 몇몇 값들이 있습니다. 이들 값들은 if 문이나 삼항비교문에서도 역시 bool 값으로 인정됩니다만, 그렇다고 이들이 실제로 boolean 값인 것은 아니라서 boolean 값 자체가 필요할 때는 보통 다음과 같이 변환을 하시더군요.

var nVal = 2;
var bVal = nVal?true:false;

하지만 다음과 같은 방식으로 타입캐스팅을 한다면 보다 간편하게 할 수 있습니다.

bVal = !!nVal;

물론, 문자열, Object, null, undefined 등에서도 동일한 방법으로 사용할 수 있습니다.

3. 변수에 값 입력하면서 사용하기

스크립트 계열의 언어에 대한 경험이 부족한 분들은 잘 사용하지 않는 방법인 것 같습니다. PHP 등에서도 가능하지만 함수형 언어의 특징을 지닌 JavaScript에서는 보다 재밌게 사용할 수 있습니다.

var obj = null;
if ( (obj = getObject()) && obj.apply(1234) ) {
...
}

위 코드는 obj 가 존재하는지 안하는지에 대한 검사를 먼저 수행하고 obj가 있다면 obj.apply 메소드를 실행해서 결과값을 체크하는 조건을 수행하고 있습니다. 여러줄에 걸쳐쓰는 것보다 코드를 보다 깔끔하게 만들 수 있어 애용하는 방법입니다. ^^ 보다 다양한 조건식을 체크하는 것도 가능합니다.

4. 함수 자기자신을 대체하기

JavaScript 라는 언어는 몹시도 유연한 언어라서 함수나 메소드를 언제든 재정의 할 수 있습니다. 심지어 내장 메소드 마저도 가능하니 말 다했죠. ^^; 이런 특성을 이용해서 다음과 같이 응용해볼 수 있습니다.

function g_getSelection() {
    if (window.getSelection) {
        window.g_getSelection = function(){
            return window.getSelection();
        };
    } else if (document.selection) {
        window.g_getSelection = function(){
            return document.selection;
        };
    } else {
        window.g_getSelection = function() {
            alert("이 브라우저는 셀렉션을 지원하지 않습니다.")
        };
    }

    return g_getSelection();
}

이렇게 작성해두면 최초에 실행될 때를 제외하면 해당 함수는 더 이상 비교구문을 거치지 않는 브라우저별 전용함수가 될 수 있습니다.

5. false 혹은 그에 준하는 값이 아닌 값만 받기

var someValue = v || a || r;

v, a, r 중에서 false 나 그에 준하는 값이 아닌 값을 전달 받습니다. 만약 v 가 문자열 “” 이고 a 가 숫자 8 이라면 someValue 의 값은 a의 값, 즉 숫자 8이 됩니다.

#끝~

분명 알고 계신 것도 있고 또 일부는 모르고 계신 분도 계셨을 겁니다. 작은 팁이지만 참고하셔서 도움이 되었으면 좋겠습니다. ^^

  1. 어익후.. 블로그에 쓰셨던 글을 스쿨에 옮기신 것을 보니 스쿨 보다는 블로그에 댓글을 애초에 달아놓는게 더 좋았을까 싶기도 하네요. ㅎㅎ 어차피 찾아왔으니 스쿨에 제가 적었던 댓글을 여기도 옮겨볼께요 ^^;;;

    행복한고니님 오랫만이네요. ^^

    1번의 경우에는 parseInt 쪽을 사용하는 것이 오히려 더 낫지 않을까 싶군요. 대안으로 써놓으신 각종 방법은 표기상으로 몇 바이트 정도 절약할 수 있을진 몰라도 코드의 명시성도 떨어뜨릴뿐더러 묵시적인 parseInt에 해당하는 전처리를 거친 후에 의미없는 산술연산을 하게끔 시키는(실제로 똑똑한 인터프리터 역할을 브라우저가 해서 실제로 의미없는 연산을 내부적으로 수행하지 않는다 할지라도) 셈이 될테니까요. 가독성과 디버깅, 그리고 브라우저의 실제적 수행과정을 고려해본다면 오히려 명시적인 parseInt 사용이 더 바람직하다고 생각합니다.

    2번의 경우엔 1번에 대한 의견과 같은 입장에서 본다면 또 할 이야기꺼리가 있긴 하지만, 각각의 방법대로 장단점이 있는듯 합니다. !! 연산이 나은가, 삼항연산이 나은가는 논외로 하더라도, 나중에 유지보수를 하는 사람이 !! 보다는 삼항연산에 더 익숙하고 편함을 느낀다면 !!를 꼭 써야할 이유는 없겠지만, 반대의 경우라면 또 입장이 뒤바뀔테니까요.

    3번의 경우에는 오히려 C언어에 도통한 사람들부터 대대로 사용해오던 표현이라죠. Kernighan이 저술한 유명한 C 퀴즈북이나 Software Tools in Pascal 등의 고전서를 보면 당시에는 그런 스타일이 획기적이고 파격적인 스타일이었는데… 시대가 흘러서 이제는 오히려 역사가 반복되어 가는 느낌을 받는군요. 참 아이러니하네요.

    4번의 경우엔 window.g_getSelection = function(){ return window.getSelection(); }; 음… 세세한 테스트까진 안해봐서 확신이 선 코멘트가 아니라서 죄송합니다만, window.g_getSelection = window.getSelection; 이렇게 하는 것이랑 어떨지 잘 모르겠네요. 저라면 후자 쪽을 먼저 테스트 해보겠는데…

    1. 저도 스쿨에 썼던 것을 그대로 옮겨왔습니다. ^^;;
      ———————-
      1은 내부적으로 어떻게 동작하는지 봐야 확실하게 말씀드릴 수 있을 것 같습니다. ^^ 다만 10진수 변환시에 이렇게 쓸 수 있다… 라는 것을 보여주고 싶었던 것이라서요~ 효율적인 면에서는, parseInt 라는 메소드를 이용함으로써 오는 함수호출에 대한 부하가 언어자체에서 제공하는 연산기능에 대한 부하보다 클 수도 있으니 확인해보는 것이 좋을 것 같습니다.

      3. 그렇군요 ^^;; 원래는 객체를 지정하고 바로 메소드를 호출하는 것까지 작성하려고 했었는데, 예제가 충분하지 못한 것 같습니다. 예를 들면 이런 식이죠.
      (obj = new someObject).somemethod()

      4. “대체할 수 있다”가 목적이라서 코드를 일부러 동일하게 작성하느라 그랬습니다. ^^;; 제가 드린 예제에서는 nextream님이 쓴 후자의 방법이 오히려 더 옳은 코드입니다

  2. 2번 같은 경우, 가독성 차원에서 본다면 첫번째 예제가 더 나을것 같네요. !! 을 해독하느라 5분은 걸렸어요.. T_T

Leave a Reply