자바스크립트에서 더하기를 처리하는 방법에 대한 이야기입니다.

http://www.2ality.com/2012/01/object-plus-object.html 문서의 일부를 참고했습니다.


자바스크립트 두 종류의 값

1) 기본형(primitives) : undefined, null, true/false, 숫자, 문자

2) 객체(objects) : objects, arrays, functions


더하기 실행시 세 종류의 값 변환

1) 기본형 

2) 숫자

3) 문자열


1) 기본형으로 변환되는 경우

내부적으로 실행되는 함수 

ToPrimitive(input, PreferredType?)


1. input이 기본형인 경우, 그대로 반환

2. 다른 경우 input은 객체. obj.valueOf() 호출.

   결과가 기본형이면 그것 반환

3. 아닌 경우, obj.toString() 호출. 

   결과가 기본형이면 그것 반환

4. 이것도 아니면, TypeError 던짐


참고 ECMAScript5.1 섹션9.1



2) 숫자로 변환되는 경우

내부 호출 함수 ToNumber()


1. 인자가 undefined 이면 NaN 반환

2. 인자가 null 이면 +0 반환

3. true는 1, false는 +0

4. 문자열은 문자열에 포함된 숫자를 변환 

  "324"라면 324

5. 객체라면 ToPrimitive(obj, Number) 호출해서 

  숫자로 가져온 값에 ToNumber() 적용


참고 ECMAScript5.1 섹션9.3



3) 문자열로 변환하는 경우

내부 호출 함수 ToString()


1. 인자가 undefined 이면 "undefined" 반환

2. 인자가 null 이면 "null" 반환

3. true는 "true", false는 "false" 각각 반환

4. 숫자는 문자열로, 예 "1.765"

5. 문자는 그대로 반환

6. 객체는 ToPrimitive(obj, String) 호출해서

  숫자로 가져온 값에 ToString() 적용


참고 ECMAScript5.1 섹션9.8


검증하기 위한 객체입니다.

    var obj = {
        valueOf: function () {
            console.log("valueOf");
            return {}; // not a primitive
        },
        toString: function () {
            console.log("toString");
            return {}; // not a primitive
        }
    }

code from: http://www.2ality.com/2012/01/object-plus-object.html



그리고 재밌는 더하기의 경우입니다.



간단한 객체 지향 자바스크립트 simple object oriented javascript 에 이어집니다.

지난 번 함수에 파라미터는 어떻게 전달할까요. onclick="issue.view('kenu')" 이렇게 말이죠.
<script type="text/javascript">
  var issue = {
    view : function(name) {
      alert(name + "! Let's see.");
    }
  };
</script>
<input type="button" value="check it out" onclick="issue.view('kenu')">

name 이라는 파라미터 전달 방식입니다. 설명하기 애매하지만 그냥 () 괄호 안에 쓰면 됩니다.

issue.open() 이라는 것을 만들어 볼까요.
<input type="button" value="open it" onclick="issue.open('kenu')">
이라고 추가할 수 있겠죠. 코드는 다음과 같아 집니다.

<script type="text/javascript">
  var issue = {
    view : function(name) {
      alert(name + "! Let's see.");
    },
    open : function(name) {
      alert(name + "! Open it, please.");
    }

  };
</script>
<input type="button" value="check it out" onclick="issue.view('kenu')">
<input type="button" value="open it" onclick="issue.open('kenu')">

view : function {} 다음에 오는 콤마(,) 이후에 view와 같은 형식의 open function을 만들면 됩니다. 두 개 만드는 법을 알았으니 3, 4, 5 계속 추가할 수 있겠죠.

 
자바스크립트 이야기입니다. 웹2.0이 뜨고나서, 특히 Ajax라고 불리면서 현란하게 브라우저를 수놓는 시대에 와서 가장 진보적인 위치를 차지하고 있는 것이 자바스크립트입니다. 자바에다가 스크립트를 붙이면 정말 다른 언어가 됩니다. 물론 베이직 언어와 달리 대소문자를 칼같이 지켜야 되는 점은 자바와 같지만, 컴파일이나 실행방식, 문법 구조 같은 언어적 특성이 자바와 많이, 아주 많이 다릅니다.

웹2.0을 전후로 자바스크립트 내에서도 큰 변화가 생겼습니다. 그 전에는 베껴쓰는 자바라 하여 컴퓨터 랭귀지 취급도 받지 못했습니다. "그거 아무나 하는거야 그냥 검색해서 찾아서 베껴쓰면 되잖아"라는 인식이 팽배했습니다. 물론 접근하기 쉽다는 인식도 있지만, 자바스크립트 언어의 진면목을 세상이 몰라 주었던 것이죠.

구글맵으로 세상이 들썩거리고 자바스크립트의 객체지향성을 일깨워 준 프레임워크가 나왔습니다. 미운 오리 새끼가 백조가 될 수 있는 가능성을 보여준 것이죠. 바로 prototype.js 입니다. 이것을 바탕으로 해서 많은 자바스크립트 프레임워크와 라이브러리들이 쏟아지기 시작했습니다.
기존에는 거의 팁으로만 취급받던 것들이 소프트웨어 제품으로 인정을 받기 시작했죠. 초창기에 script.aculo.us, rico, dojo 등이 선보였고, YUI(Yahoo UI) 같이 큰 포털에서 내어놓은 것도 있었습니다. 자바스크립트의 르네상스라고 해도 될지요. DHTML로 살짝 떴다가 내려갔는데, 이 때는 정말 부흥이 맞습니다. 아직도 지속되고 있구요.


허무할지 모르지만 그 유치했던 자바스크립트에서 이런 표현이 가능합니다.

<script type="text/javascript">
  var issue = {
    view : function() {
      alert("Let's see.");
    }
  };
</script>
<input type="button" value="check it out" onclick="issue.view()">

어떤 의미인지 설명하지 않아도 되겠죠. 하나 유념할 것은 issue에 종속된 view()라는 것입니다 그냥 view() 호출하면 안됩니다. 이렇게 scope를 주는 것이 의미가 있게 됩니다.

+ Recent posts