[난해한 Javascript 개념] Asynchronous loop

C/C++/Java에 익숙한 나에게 낯선 것들이 Javascript에는 너무나 많다. 지금까지 다루어 본 언어들과는 너무나 다른 functional 프로그래밍 언어인 Javascript의 핵심 요소를 살펴보고 '내 나름대로의 이해'를 시도해 본다.

낯선 것들:

first-class function

변수의 scope

this 키워드의 의미

closure의 개념

Asynchronous loop

Asynchronous loop
이건 문제와 해결책을 보면 이해가 용이하다. 단지 해결 방식이 복잡하다는 것이 문제다.

files array의 element(file이름)를 하나씩 빼서 "albums/" 폴더 아래에 존재하는 지 확인 후 directory라면 only_dirs array에 추가하고자 한다.
우리는 file 하나씩 하나씩 하고자 한다.
<br /> var only_dirs = [];<br /> for (var i = 0; i < files.length; i++) { fs.stat( "albums/" + files[i], function (err, stats) { if (stats.isDirectory()) { only_dirs.push(files[i]); } } ); } callback(null, only_dirs); //종료하며 결과를 return
하지만, 위의 코드로는 그것이 불가능하다. for loop은 위의 동작을 하나씩 순차적으로 하는 것이 아니라 nonblocking 함수인 fs.stat를 순식간에 호출하여 callback을 등록하고는 종료되어 버린다.

우리가 원하는 대로 asynchronous 동작이 순차적으로 실행되기 위해서는 아래와 같은 pattern으로 loop을 작성하면 된다.
<br /> (function iterator (i) {<br /> if( i < array.length ) { async_work( function(){ iterator( i + 1 ); }) } else { //종료 callback(results); } })(0); //최초 array index가 0


맨 위의 코드를 위의 pattern을 사용하여 작성하면 아래와 같다.
<br /> var only_dirs = [];<br /> ( function iterator(index){<br /> if (index == files.length) { //종료 <br /> callback(null, only_dirs);<br /> return;<br /> }<br /> fs.stat(<br /> "albums/" + files[index],<br /> function (err, stats) {<br /> if (err) {<br /> callback(err);<br /> return;<br /> }<br /> if (stats.isDirectory()) {<br /> only_dirs.push(files[index]);<br /> }<br /> iterator(index + 1);<br /> }<br /> );<br /> })(0);<br />

정리
1. Asynchronous iteration을 위해서는 위의 pattern을 사용하자.