[컴][웹] coffeescript 문법 - for in 과 for of

for...in / for...of / for loop / for statement / for 문 / loop 문 / coffeescript 작성시 주의해야 할 사항

coffeescript 의 for 문

javascript 와 조금 차이를 보이는데, 문법이 비슷해서 혼동의 여지가 있다. 처음에 많이 헷갈렸던 기억이 있어 coffee script 에서 for 문을 조금 정리 해 보자.

일단 coffee 의 for 문은 javascript 에서 아래처럼 변경된다.

coffeescript

arr = ['a','b','c']
for a in arr
 console.log(a)
for a, i in arr
 console.log(a)
 console.log(i)

obj = {
    key : 'val1'
    key2 : 'val2'
    }
for k of obj
 console.log(k)


for k, v of obj
 console.log(k)
 console.log(v)

javascript

var a, arr, i, k, obj, v, _i, _j, _len, _len1;
arr = ['a', 'b', 'c'];

for (_i = 0, _len = arr.length;_i < _len; _i++) { 
 a = arr[_i];
 console.log(a);
} 

for (i = _j = 0, _len1 = arr.length; _j < _len1; i = ++_j) {
 a = arr[i];
 console.log(a);
 console.log(i);
} 

obj = { key: 'val1', key2: 'val2' };

for (k in obj) { 
 console.log(k);
} 

for (k in obj) {
 v = obj[k];
 console.log(k);
 console.log(v);
}

정리

요약하면 이렇다. javascript 에서 object 에 사용하던 'for...in' 은 coffeescript 에서 array 에서 사용되고, 대신에 'for...of' 를 사용한다. 그리고 javascript 에서 array 에 대해 사용하던 일반적인 for 문은 coffeescript 에서 'for...in' 으로 사용할 수 있다.

참고로 coffeescript 의 for...in 은 좀 더 광범위하게 사용할 수 있다. Array 가 아니더라도, length 를 이용해서 순차적으로 iterate 하는 경우에는 for...in 을 사용하면 된다.

쉽게 얘기하자면 for...in 은 무조건 length 를 이용한 for loop 을 만들어 준다.

반대로 coffee 의 for...in 은 length 와 0 으로 시작하는 index 가 없는 object 에 대해서 사용하면 원하는 code 가 나오지 않는다.

coffeescript

• Array 에서는 for...in 을 사용
• Object 에서는 for...of 를 사용

javascript

• Array 에서는 for(var i=0; i<len; i++) 을 사용(참고로, for..in 은 권장하지 않는다.[ref. 1]
• Object 에서는 for...in 사용

parameter 순서

개인적으로 헷갈려서 한가지 더 적어놓자면, for...in 과 for...of 에서 parameter 의 순서이다.

• for v, i in arr : 값(v)이 먼저온다.
• for k, v of obj : 값(v) 이 뒤에 온다.

See Also

• http://i5on9i.blogspot.kr/2015/07/ie8-javascript.html

Reference

1. for...in - JavaScript | MDN