[Javascript] for loop 유의해서 쓰자

1. index ; condition ; operation

 

아주 오래된, index , condition 을 명시한 for loop은 언어 어디에나 쓰여왔다

가령 다음과 같은 코드다.

const array = ['a', 'b', 'c', 'd', 5];
for(let i=0 : i < array.length; i++) {
	console.log(array[i]) // 모든 원소 순서대로 iteration
}

// 출력결과: a b c d 5

---

2. for .. in

C++, Java, Kotlinm 언어등에서도 흔히 배열 loop에 많이 쓰는 형태다.

const array = ['a', 'b', 'c', 'd', 5];

for(let alphabet in array) {
      console.log(alphabet);
      // not logging [a,b,c,d,5]
      // output: 0,1,2,3,4
}

출력결과 : 0,1,2,3,4 // 배열의 원소가 아닌, index가 출력된다.

 

 

MDN 공식 문서에서는 이렇게 말하고있다.

The for...in statement iterates over all enumerable properties of an object that are keyed by strings (ignoring ones keyed by Symbols), including inherited enumerable properties.

for..in 문은 String 형태의 키를 갖는 오브젝트를 순회할때 사용한다. (키가 존재하지 않으면 무시한다)

const array = ['a','b','c','d',5]
// array 에서의 'key'는 String은 아지만 index 번호로 인식한다.

 

정리하면 for ..in 구문을 사용할 때 다음과 같은 사실을 유의해야한다.

• 임의의 순서로 객체 순서를 순회한다. == 순서를 보장하지 않는다.
• 최근에 수정된 key - value 쌍은 순회 순서에서 최후방으로 밀린다.
• ∴ loop을 도는 동안 Create, Update, Delete가 일어나는 경우 사용하지 않는 것이 적절하다. 

When to use??

배열, 객체 내에 특정 Key 값이 존재 유무를 따질 때

이 외의 상황에선 거의 쓰지 않는다.

forEach, for ...of를 사용한다.

---

3. forEach

원형은

object.forEach(callback()) // parameter가 'callback' 함수이다. -> 원소 갯수만큼 오름차순 순으로 콜백 함수를 수행한다.
// 따라서 original for loop보다는 수행 속도가 약간 떨어진다.

Wehen to use?

배열의 원형 수정없이 loop을 돌때 (조회, 순회시)

const array = ['a', 'b', 'c', 'd', 5];

array.forEach(alphabet=>{
    console.log(alphabet);
});

// output: a,b,c,d,5
// 모든 element 순회

※ 참고 : every(), some(), find(), findIndex() 와 달리 exception throw 없이는 중간에 멈춤 불가능.

실험삼아 loop을 탈출하는 예제를 작성해보았다.

const array = ['a', 'b', 'c', 'd', 5];

array.forEach(alphabet=>{
    console.log(alphabet);
    if (alphabet ==='c') break;
});
// output : SyntaxError: Illegal break statement

SyntaxError가 발생한다. 역시 공식문서는 틀리지 않았어..

 

---

4. for...of

The for...of statement creates a loop iterating over iterable objects, including: built-in String, Array, array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined iterables

★ 문자열, 배열, 오브젝트, Map, Set 등에 모두 사용 가능하다.

 

문자열

const name = 'falcon';
for (const alphabet of name) {
    console.log(alphabet);
}
// f a l c o n

배열

const array = ['a', 'b', 'c', 'd', 5];
for(let alphabet of array) {
    console.log(alphabet);
}
// a, b, c, d, 5

Map

const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
for (const entry of map) {
    console.log(entry);
}
//[ 'a', 1 ]
//[ 'b', 2 ]
//[ 'c', 3 ]

for (const [key, value] of map) {
	console.log(`key: ${key}, value : ${value}`);
}

//key: a, value : 1
//key: b, value : 2
//key: c, value : 3

 

---

※ for...of vs for...in

for...in 은 객체의 '모든' 속성에 대해 순서를 보장하지 않고 반복.

for...of 는 Collection 전용으로 Symbol.iterator을 가지는 요소에 대해 반복. 

Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};

const array = [3, 5, 7];
array.foo = "hello";

for (let i in array) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i of array) {
  console.log(i); // logs 3, 5, 7
}

 

---

Reference

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...in