for, for in, for of, forEach는 어떻게 다를까?

구조

const arr = ['a' , 'b' , 'c']

// for => index로 접근
for (let i = 0;, i < arr.length;, i++) {
  console.log(arr[i])
}
 
// for in => index로 접근
for (let i in arr) {
  console.log(arr[i])
}

// for of => value로 접근
for (const v of arr) {
  console.log(v)
}

// forEach => index, value 모두 접근가능
arr.forEach((v,i) => console.log(v))

for

for (시작; 조건식; 증감식) {
	내용
 }

변수를 선언 및 할당하고, 어디까지 순회할 것인지 결정하고, 연산을 어떻게 할 것인지 결정합니다.
++는 변수를 늘려나가고, --는 변수를 줄여나갑니다.

: array, object, map, set 사용가능

for in

주로 객체(object) 속성들을 반복하여 작업을 수행할 때 사용할 수 있습니다. for in은 객체의 key값에 접근할 수 있지만 value값에는 접근 할 수 없습니다. 그러므로 for in을 활용하기 위해서는 다음과 같은 형식으로 써야합니다.

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

for (let key in obj) {
   console.log(key, obj[key]); // a 1, b 2, c 3
}

: array, object 사용가능
: map, set 사용 불가능

for of

ES6에 추가된 새로운 컬렉션 전용 반복문입니다. '배열(array)의 반복'에 주로 사용됩니다. for of는 컬렉션 객체가 [Symbol.iterator]속성을 가지고 있어야 사용가능한 반복문로, array가 아닌 object로 변경된 변수에 해당 반복문을 사용할 경우 에러가 발생 할 가능성이 있습니다.

: array, map, set 사용가능
: object 사용 불가능

entries()를 활용하면 객체(Object)도 접근 가능

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

forEach

forEach의 경우 반복문(iteration statements)보다는 함수(functions)에 가깝습니다. 또한 콜백인자를 value, index, array 까지 세 종류를 받을 수 있습니다.

: array, map, set에 모두 사용가능
: object 사용 불가능

Undefined 공백

const arr = ['a',, 'c'];
arr.length // 3

for : "a, undefined, c"
for in : "a, c"
for of : "a, undefined, c"
forEach : "a, c"