이 내용은 웹월드 컨퍼런스 2007에서  Daum UI개발팀의 구경택님이 29일에 발표하신 세션의 내용을 정리한 것입니다.

현재 우리가 사용하고 있는 자바스크립트는 1.5버전을 사용하고 있다. 자바스크립트 2는 현재 Working Draft¹까지 나온 상태이다.

내가 자바스크립트를 공부한지 얼마 되지 않았기 때문에 이해를 못하는 부분도 약간 있었다. 대충 이해하고 도움이 될것 같은것 위주로 정리를.. ㅎㅎㅎ

Functions are First-Class Object (Language : javascript)

1. fucntion sum(a,b) {
2.     return a + b;
3. }
4.  
5. var sum = function(a, b) {
6.     return a + b;
7. }

펑션이 First-Class Object라는 의미는 잘 이해하지 못했지만 두가지형태 모두 사용이 가능하다. 아래 형태는 prototype.js를 사용할 때 익숙치 않아서 이해할때 가장 어려움이 있었던 부분.

Suports functional scope only (Language : javascript)

1. function showSum(a, b) {
2.     var c = function() {
3.         alert(a + b);
4.     }
5.     return c;
6. }
7.  
8. var sum = showSum(2, 3);
9. sum();

제한적인 영역을 가지는 펑션이다. c의 경우에는 리턴을 받는 것 외에는 밖에서 제어할 수가 없다.

Supports closure (Language : javascript)

1. function add_x(x) {
2.     return function(y) { return x + y; };
3. }
4.  
5. var f = add_x(3);
6. f(4);

클로저 지원이다. 말은 들은 적이 있는데 잘 감이 오질 않는다. 저걸 실행하면 f(4)가 7 이란 값을 리턴해준다. 이해는 잘 못하지만 먼가 신기하다. 클로저란게 원래는 3으로 함수를 호출했을때 x가 할당되고 함수가 끝나면 x의 값이 사라져야 되는데 그렇지 않고 남아있게 되는거다. 아직 내공이 부족해서 정학이 어떤 상황에 써야할지는 감이 잘 오질 않는다. 클로저에 대해 알아보려고 찾은 괜찮은 글이 있어서 링크를 건다.


이하는 자바스크립트를 객체지향으로 사용하는 법에 대한 부분이다.

Constructor (Language : javascript)

1. var car = function(name, cost) {
2.     this.name = name;
3.     this.cost = cost;
4.     this.feature();
5. }
6.  
7. car.prototype.feature = function() {
8.     alert("name : " + this.name + "\n cost : " + this.cost);
9. }
10.  
11. var sonata = new car("쏘나타", 2000);

추상화(Abstraction)부분이다. prototype.js를 이해하려면 필수적으로 이해해야 할 부분이라고 생각된다. 처음 봤을때는 꽤나 당황했었지만 저런 패턴을 많이 사용하고 복잡한 스크립트일수록 저렇게 객체로 만들어 쓰는건 유용한것 같다. 당연히 OOP는 검증된 패턴이니까....

Overloading (Language : javascript)

1. var sum = function() {
2.     var args_len = arguments.length;
3.     switch(args_len) {
4.         case 0:
5.             statement.....;
6.             break;
7.         case 1:
8.             statement.....;
9.             break;
10.         ............
11.     }
12. }

C할때 지겹도록 배우던(배우기만 지겹게 배웠지 이해는 잘.. ㅋㅋ) 오버로딩이다. 기본적으로 자바스크립트는 오버로딩을 지원하지 않는다. 파라미터 갯수가 달라도 기본적으로 오류가 나지 않고 알아서 해주기 때문에 오버로딩을 해주지 못하는데 그걸 이런식으로 해결한 것이다. 어려운 스크립트는 아니지만 순간 "천잰데?" 하는 생각이 들었다. 아규먼트 갯수를 세어서 오버로딩을 할 수 있게 해준다. 물론 연산자 오버로딩은 안된다. ㅎㅎ

function Overloading (Language : javascript)

1. switch(args_len) {
2.     case 0:
3.         if(typeof(arguments[0]) == "Number") {
4.             Numeric Operation...
5.         } else if(typeof(arguments[0]) == "String") {
6.             String Operation....
7.         }
8.     case 1:
9.         statement.....;
10.         break;
11.     ............
12. }
13.  

오버로딩을 이런식으로 하면 아규먼트 타입에 따라서도 다르게 할 수 있다. 신기한게 참 많군..

Overriding (Language : javascript)

1. var car = function(name, cost, gasoline) {
2.     this.name = name;
3.     this.cost = cost;
4.     this.fuel = gasoline;
5. }
6.  
7. car.prototype = {
8.     use_fuel : function(offset) {
9.         this.fuel -= offset;
10.         return this.fuel;
11.     }
12. }
13.  
14. var avante = new car("avante", 1500, 2000);
15. var sonata = new car("sonata", 2000, 3000);
16.  
17. sonata.use_fuel = function() {
18.     return this.fuel;
19. }

OOP의 상속성을 보여주는 부분이다. 이를 위해서 자바사크립트는 prototype이라는 메서드를 제공하고 있다. 그냥 sonata.use_fuel()을 하면 8번라인의 use_fuel이 실행된다. 하지만 17번에서 sonata.use_fuel()을 다른 메서드로 재정의 해 줌으로써 sonata.use_fuel()을 하면 17번 라인의 use_fuel이 실행된다. Overriding된 것이다.

Encaptulation, Data Hiding (Language : javascript)

1. var car = function(name, cost, gasoline) {
2.     this.name = name;
3.     this.cost = cost;
4.     var fuel = gasoline;
5.     function use_fuel(offset) {
6.         fuel -= offset;
7.     }
8.     this._useFuel = function(offset) {
9.         use_fuel(offset);
10.     }
11. }
12.  
13. var sonata = new car("sonata", 2000, 3000);
14. sonata._useFuel(10);

캡슐화와 정보은닉화 부분이다. 함수를 이렇게 구성하면 4, 5번라인의 fuel과 use_fuel은 Private Member가 되고 8번줄의 _use을 통해서 Private Member에 접근한다.

이상이 OOP에 대한 부분이고 이하는 그외 몇가지 도움이 될만한 코딩들이다.

Flexibility of Javascript (Language : javascript)

1. var target = e.srcElement || e.target;
2.  
3. var index = (index >= 0) ? index : 0;
4.  
5. function oneRun() {
6.     .................
7.     .................
8.     oneRun = function() {}
9. }

1번은 둘중에 유효한 값이 자동으로 들어간다. (이거 꽤 유용할듯..)
나도 3항연산자는 잘 안쓰는 편이데 3항연산자로 변수할당도 가독성도 괜찮고 간단히 짤수 있어서 좋은듯...
5번줄의 oneRun은 괜찮은 아이디어같다. 이게 머냐하면 단 한번만 실행이 되어야 하는 메서드이다. 메서드를 다 실행안다음에 자신은 empty로 초기화 시켜버림으로써 단 한번만 실행할 수 있게 한다.(fake overliding)

innerHTML (Language : javascript)

1. var strHTML = "<div id = 'abcd'>";
2. strHTML += " HTML 텍스트....";
3. ............
4. strHTML += "</div>";

innerHTML을 쓸때 보통 위와 같은 형태로 string을 만들어서 사용하는데 이것은 상당히 부하가 크다. 과정을 설명하자면 1번줄에서 공간을 확보하고 string을 할당하고 2번줄에서 추가되기 때문에 이전꺼는 지운다음에 string을 이어붙힌 만큼의 공간을 다시 확보하고 할당한다. 이과정이 계속 반복되는 것이다. 그래서 아래와 같이 사용하는 것이 더 좋단다.

innerHTML (Language : javascript)

1. var strHTML = new Array();
2. strHTML.push("html 텍스트");
3. ..........
4. return strHTML.join("");

스트링을 배열로 만든 뒤에 join()으로 스트링을 이어붙힌 것이다. join은 인자로 각 배열을 스트링으로 이어붙혀주느데 인자로 아무것도 주지 않았으므로 text가 그냥 이어붙혀진다. 이렇게 사용할 경우 IE에서는 더 빠르고 Firefox에서는 두 방법의 속도가 비슷하다고 한다.

(Language : javascript)

1. var value = document.getElementById("inputbox").value;
2. var diabled = document.getElementById("inputbox").disabled;
3. value = "검색어";
4. disabled = true;

객체의 속성을 사용할때 반족될 경우 위처럼 사용한 것 보다는

(Language : javascript)

1. var oInput = document.getElementById("inputbox");
2. oInput.value = "검색어";
3. oInput.disabled = true;

이렇게 변수에 할당해서 하는 것이 더 빠르다. 전자의 경우는 매번 찾는 과정을 반복하게 된다.

form submit handler의 올바른 사용법 (Language : javascript)

1. <form onsubmit="return handler();">
2.     <input type="image" ...>
3. </form>
4.  
5. function handler() {
6.     if(condition) {
7.         return false;
8.     }
9.     return true;
10. }

이부분은 약간 태그의 올바른 사용법에 해당하는 부분이다. 우리팀도 웹표준에 대한 부분이 잘 정립이 안되어 있기 때문에 이렇게 사용안하고 inpu type=button에다가 onclick="checkValid();"를 주어서 값이 맞을 경우에만 form.submit을 한다. 근데 이건 동작은 기본적으로(?) 같기는 하지만 올바른 방법은 아니다. 왜나하면 type=submit이란 태그가 존재하고 이를 사용하면 자동으로 submit으로 동작을 하니까...(type=image도 똑같은 submit이다. 이미지버튼이란 점 빼고...) 이부분은 약간 애매하긴 하지만 올바르게 용도대로 사용할 때의 이점도 있다. 이부분에 대해선 따로 포스팅하겠다.

submit버튼을 사용하면 자동으로 submit이 되므로 Validation체크를 할 시간이 없기 때문에 onsubmit핸들러를 통해서 Validation체크를 해주도록 하는 것이다.


또한 프레임워크 사용에 대해서도 약간 주의를 주었다. prototype.js를 사용하면서 $()만 사용하는 경우도 많은데 이럴결우 몸짓만 커지고 느려질수가 있다.(내가 그렇다. ㅡ..ㅡ $와 $F만...) 프레임워크를 사용하려면 최대한 활용을 하자...