- Javascript Array 에서 내 입맛에 맞게 each 구현해보기
- Programming/Javascript
- 2009/07/03 15:34
- JavaScript, JS, 자바스크립트
-
제목이 좀 이상하긴 한데, 설명하자면 배열 등을 뱅뱅 돌면서 접근하는 기능을 하나 구현하는 것입니다.
먼저 소스부터 한번 보겠습니다.
1: <html>
2: <head>
3: <script>1:2: Array.prototype.each = function(func){3: var x = 0;4: var y = 0;5: for(x=0; x<this.length; x++){6: for(y=0; y<this[x].length; y++){7: func(this[x][y], {x:x, y:y});8: }9: }10: }11:12: function run(){13: var arr = new Array("하나","둘","셋","넷","다섯");14: var arr2 = new Array(15: new Array("0-0","0-1","0-2","0-3","0-4"),16: new Array("1-0","1-1","1-2","1-3","1-4"),17: new Array("2-0","2-1","2-2","2-3","2-4"),18: new Array("3-0","3-1","3-2","3-3","3-4"),19: new Array("4-0","4-1","4-2","4-3","4-4")20: );21:22: var temp = "";23: arr.each(function(a, p){24: temp += "[";25: temp += p.x+p.y;26: temp += "]=";27: temp += a+" ";28: });29: temp += "\n========================\n";30: alert(arr.length);31: alert(arr[0].length);32: alert(arr[0].toString());33: alert(arr[0][0]);34: arr2.each(function(a, p){35: temp += "[";36: temp += p.x.toString() + p.y.toString();37: temp += "]=";38: temp += a+" ";39: });40: //alert(temp);41: }42:</script>
4: </head>
5: 6: <body onload="run();">
7: Test8: </body>
9: </html>
Javascript가지고 요즘 잘나가는 코딩 스타일(?)로 짜는걸 공부하면서 테트리스를 만들어 보고 있는데 여러보로 신기한 코딩 방법을 많이 접하고 있습니다. 대표적인 것이 위와 같은 패턴인데 처음엔 소스 까보랴 이해하느랴 고생했는데, 계속 보다 보니 디자인 패턴에서 Template 패턴 과 유사하더군요. 기본적인것은 구현되고 중요 로직은 밖으로 덜어내서 쓸때마다 구현해 쓰는거죠.
위 같은 경우 Array에 each 라는 함수를 하나 작성하게 되는데 인자로 함수를 받습니다. 그래서 자기 자신을 빙빙 돌며 받은 함수를 계속 실행하게 됩니다. 어떻게 보면 뫼비우스의 띠 같아서 혼동하기 쉽습니다. 일반적으로는 선언하고 사용하는 부분이 명백하게 나누어 있지만 여기서는 선언부에 실행부가 있고(7째 줄 : Array.prototype.each 안의 func(this[x][y]… 부분) 실행부에 다시 선언부가 있어서( 23째줄 : arr.each(function(a, p){…부분) 그런것 같아요. 그래서 이해할때 선언부에서 는외부에서 구현할 부분을 함수로 받아 그대로 실행한다고 생각하면 될 것 같습니다. 그 함수는 each를 불러낼 타임에 세부적으로 어떤 일을 할지 작성하는거죠.
위 소스의 경우 인자로 자기자신의 값과 좌표를 넘겨줍니다(Line 7). 이것은 아래 each를 사용하는 시점에서 어떻게 할지 세부 기술을 하게 됩니다. 그게 아래 arr.each(function(a, p){…(Line 23) 가 됩니다.
여담이지만 마지막으로 위 소스에는 틀린 부분이 있습니다. 처음에는 x,y의 매트릭스형 접근에 사용하려고 이걸 구현하였지만 단순 1차형 배열일때는 length가 제 기능을 하지 못합니다. 그래서 해결방법이 필요하죠.
Recent comment