자바스크립트의 for 관련 반복문은 다른 언어에 비해 가짓수가 많아보인다. 한번 정리하고, 더 헷갈리지 말도록 하자. for, for in, for of, 그리고 성격은 약간 다르지만 forEach에 대해서도 알아보자.

for

for는 이건 워낙 보편적인 반복문이니 자세한 설명은 생략한다.

예시

for (let i = 0; i < 3; i++) {
  console.log(i); // 1, 2, 3
}

for in

• 모든 객체에서 사용 가능하다.
• key에는 접근할 수 있지만 value에 직접 접근할 수는 없다. key를 통해, 간접적으로 obj[key] 형태로 value에 접근해야한다.
• 내장 메서드 및 내장 프로퍼티와 같은 비열거형 속성은 반복되지 않는다.

예시

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

for (let k in obj) {
  console.log(obj[k]); // 1, 2, 3
}

for of

• python의 for in과 비슷하다는 생각이 들었다.
• forEach와도 비슷하다.
• 배열을 하나씩 순회하면서 요소의 값을 꺼내준다.
• str에 사용할 경우 한 글자씩 뜯어준다.

예시

const myArr = [1, 2, 3];

for (let value of myArr) {
  console.log(value); // 1, 2, 3
}

forEach

• 사실 반복문이 아니라, 메서드다.
• 오직 Array, Map, Set에서 사용 가능하다.
• forEach 구문의 인자로 callback 함수를 등록할 수 있고, callback 함수에서 배열 요소의 인덱스와 값에 접근할 수 있다.

예시

const myArr = [1, 2, 3];

myArr.forEach(function(value) {
  console.log(value); // 1, 2, 3
});

[참고자료]
https://jsdev.kr/t/for-in-vs-for-of/2938