for

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

for (let i = 0; i < arr.length; i++) {
  const e = arr[i]
  console.log(i, e)
}

• 다른 언어에서도 많이 볼 수 있는 형태, but
• 동기방식이기 때문에 오류가 나면 그대로 뻗어버림
• 배열을 순회하기 위해 배열의 길이를 계산하고, 추가적인 변수 선언등이 필요해 번거로움
• 더 좋은 방법은 없을까?

for-in

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

for (const prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

• symbol을 제외한 모든 속성의 key 값을 순회할 수 있도록 해줌
• 개체의 key값을 가져오는 작업이 필요한 경우에는 유용하게 사용가능, 하지만..

var obj = {a: 1, b: 2, c: 3};
// 콘솔에서 실행시키면 마크다운이 몰?루 시전하니 주의
Object.prototype.molLu = function() {
	return "몰?루"
}

for (const prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"
// obj.molLu = function() {
//	return "몰?루"
//}

• prototype chain에서 상속받은 속성까지 탐색해버림
• 이로인해 정렬된 데이터를 사용하는 등 순서가 중요한 배열에서는 순서가 섞일 우려가 있어 사용하기 곤란함

foreach

const myArr = [1, 2, 3, 4, 5];

const newMyArr = myArr.forEach((currentElement, index, array) => {
    console.log(`요소: ${currentElement}`);
    console.log(`index: ${index}`);
    console.log(array);
});

• 파라미터로 주어진 함수를 각각의 요소들마다 실행시키는 반복문
• 배열과 인덱스 모두에 접근 가능
• 반복문 실행결과로 값을 따로 반환해주지 않음
• 반복문 실행을 하면서 내부에서 배열의 요소를 바꿀 수 있지만, 반복횟수는 처음에 정해지기 때문에 더 늘어나거나 줄어들지 않음
• 다른 반복문들과 다르게 break, continue 사용 불가 -> 반복문 탈출 곤란

for-of

const arr = ['a', 'b', 'c']
for (const [key, value] of arr.entries()) {
  console.log(key, value)
}
// 0 "a"
// 1 "b"
// 2 "c"

• 반복가능한 객체에 대해 값을 반복하게 됨
• 반복문 실행중 대상의 변경이 가능하며, 이 경우 변경한 결과에 맞추어 반복횟수가 변함
• key, value값을 전부 사용 가능함
• break, continue문 사용 가능
• 반복문의 앞쪽에 요소를 추가할 경우 무한루프에 빠질 수 있음에 주의

출처:
https://yceffort.kr/2021/06/best-solution-for-looping-over-array
https://velog.io/@bining/javascript-for-in-for-of-forEach-%EC%B0%A8%EC%9D%B4%EC%A0%90
https://bigtop.tistory.com/58