Javascript : 반복문 동기화하기

JavaScript는 비동기 언어이다. 즉, 요청을 완료하지 않고 다음 요청으로 넘어가는데,

분명히 반복문 작업을 한 이후, 그 데이터로 다음 이벤트를 하기를 원할 때가 있다.

#Javascript의 반복문

JS(ES6)는 꽤 많은 반복 함수를 지원한다. for, for in, for of, forEach, some, every, while 등..

1. forEach : Array, (ES6부터는 Map, Set(집합) 지원)에서 사용 가능하다. 배열의 각 요소에 대해, 각 요소들이 호출될 때마다 callback함수를 지원한다.

const arr = [1, 3, 5, 7, 9]

arr.forEach(element => {
	console.log(element);
});
//1, 3, 5, 7, 9

그런데 forEach문은 비동기적으로(, 병렬적으로) 작동하기 때문에 하나의 요소 호출 후 callback, 다음 요소 호출 후 callback이 작동하는 것이 아닌 모든 요소를 한꺼번에(=병렬로) callback을 실행한다. 만약 순차적인 접근을 원했을 때, 아래와 같이 쓴다면 원하는 결과를 얻지 못할 것이다.

const arr = [1, 3, 5, 7, 9];
const result = new Array();

arr.forEach(element => {
	result.push(element);
});

console.log(result);	//[]

 

2. for in : 객체(ex. JSON)에 사용 가능(ES6부터 지원),  호출될 때 객체의 key를 뽑아낸다. 객체를 다룰 때 유용하다.

const obj = {
	name : "han",
    email : "abcd@kakao.com",
    birth : 010101,
    gender : "male",
    etc : {
    	hobby : "sing"
    }
}

for (const key in obj) {
	console.log(key, ' ', obj[key]);
}

//name han, email abcd@kakao.com, birth 010101, gender male, etc { hobby : "sing" }

 

3. for of : Array, Map, Set(집합), String 등 Iterable한 것에 대해 반복 가능 = 즉 객체(json)는 안됨. 객체를 사용하기 위해선 Symbol.iterator() 를 설정해줘야한다.

const str = "Hi Im Han"

for (const item of str) {
	console.log(str);
}
//Hi Im Han

출처 : ko.javascript.info/iterable

iterable 객체

 

#JavaScript 반복문 순차 접근?

결론만 말하자면, 반복문을 순차적으로 접근하려면

forEach 말고 for of, for를 쓰면 된다.

그러나 위 둘은 병렬로 처리되는 forEach보다 오버헤드가 크다.