9. for of

아... 너무 졸립다... ㅜㅠ

그래서 오늘은 진짜 짧게 쓸 주제 하나 찾아서 쓰려한다.

그 주제는 바로

for-of

사실 처음부터 그냥 쓰려고 했으면 쓰기 어렵고, 길게 써야 하나

우리는 사실 이미 http://ggoals.tistory.com/32 에서 iterable protocol

즉, iterable object 에 대해서 배운적이 있다. 

for-of 는 iterable object 에 대해서만 반복문을 실행시켜준다.

Array-like 에서 설명했던 코드를 다시 가져와보면

let values = {0: 'aaa', 1: 'bbb', length: 2};

for( var key in values) {
    console.log( key + ": " + values[key]);
}

for(var k = 0; k < values.length; k++) {
    console.log(values[k]);
}

// error 발생!
// sample.html:xx Uncaught TypeError: values[Symbol.iterator] is not a function
for( var key of values) {
    console.log( key + ": " + values[key]);
}

Array-like object 는 iterable 오브젝트가 아니다. ( Symbol iterator 및 next() 메서드 프로퍼티가 없으니깐 ) 그렇기 때문에 위 주석에 적은 에러가 난다.

sample

아래와 같이 iterable object 인 Array object 에서 사용이 가능하고, 다영ㄴ히 querySelectorAll 로 뽑은 객체도 for-of 가 사용 가능하다. destructing 과 섞어서 쓰는 것도 가능하다.

for(let value of [10, 20, 30]) {
	console.log(value)
}

for(let value of "test") {
	console.log(value)
}

let nodes = docuemnts.querySelectorAll('li');
for(let node of nodes) {
	console.log(node.textContent);
}


let values = [
	{item: '선물1', amount: {apple: 10, candy:20}},
	{item: '선물2', amount: {apple: 30, candy:40}}
];

for(let {item:one, amount: {apple:two, candy:three}} of values) {
	console.log(one + two + three);
	//선물11020
	//선물23040
}

let sports = {
	soccer : '축구',
	baseball : '야구'
};
let keyList = Object.keys(sports);
for(let key of keyList) {
	...
}