JavaScript 반복(for ... in, for ... of, .forEach)

JavaScript 반복

JavaScript에서 객체나 배열등을 반복할 때 for문을 사용하게 됩니다. 또한, JavaScript에서 for ... in, for ... of, .forEach 등을 만들어서 보다 편리하게 Object, Array등을 반복할 수 있게 됩니다.

for ... in

- 객체의 열거가능한 key(속성)들을 반복하는데 사용한다. (Nonenumerable(비열거형)인 value에는 접근할 수 없습니다.)
- Object의 key or index를 반복 
- 반복할 때마다 인스턴스 or 프로토타입 체인을 검색하므로 느린 속도를 가집니다.
- index에 할당되는 값들은 String 타입으로 변환됩니다.

let obj = {
    a: 1,
    b: 2
};

for (let key in obj) {
    console.log(key); //a, b
}

for ... of

- [Symbol.iterable]한 Object(Array, Map, Set, String, TypedArray 등)에 대한 속성값(value)을 반복 순회한다.
- 요소를 직접 반복

let obj = [1, 2];

for (let element of obj) {
    console.log(element); //1, 2
}

*Interable, iterator

- Iteration protocol

: 어떠한 객체든 특정 조건을 만족하면 iterable 또는 iterator로 평가 받을 수 있도록 하는 규약

- Iterable

: 반복이 가능한 객체

준수 사항

1. 객체 내에 [Symbol.iterator]메서드가 존재

- Iterator

Iterable 객체에서 반복을 실행하는 반복기
(Iterable 객체가 반복을 하며 어떠한 값을 반환할 지 결정)

준수사항

1. 객체 내에 next 메서드 존재
2. next 메서드는 IteratorResult 객체({done: boolean} || {value: any} ) 반환한다.
   (done: Iterator 반복 완료 판별, value: 반복 수행을 하면서 반환하는 값)

.forEach

Array, Map, Set의 요소들을 반복하여 작업을 수행하며 forEach 내부 callback함수를 사용한다.(undefined 반환 -> break, continue, return 구문 사용 못 함)

arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

let obj = [1, 2];

obj.forEach((o) => console.log(o)); // 1, 2

*추가 (forEach는 순차처리가 왜 안되는 가?)

=> forEach는 배열 요소를 돌면서 callback을 실행할 뿐, 한 callback이 끝날때까지 기다렸다가 다음 callback을 실행하는 것이 아니다.

내부 코드를 보면 다음과 같습니다.

Array.prototype.forEach = function (callback) {
	for (let idx = 0; idx < this.length; idx++) {
    	callback(this[idx], idx, this);
    }
}

Ref

https://jsdev.kr/t/for-in-vs-for-of/2938
https://velog.io/@bining/javascript-for-in-for-of-forEach-%EC%B0%A8%EC%9D%B4%EC%A0%90
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
https://262.ecma-international.org/6.0/#sec-iteration\