Javascript 반복문 종류 및 차이 (일반 For문, For in, For of, forEach)

일반 For 문

Traditional한 for문이고, 밑에서 살펴볼 다른 for문들처럼 특정 자료형(들)을 대상으로 사용되지 않고, 사용자가 변수로 직접 구간을 지정해서 해당 index로 반복문을 순회한다.

가장 빠르지만 가독성이 낮다는 특징이 있다.

문법

for(초기문(***initialization***); 조건문(***condition***); 증감문(***increment***)){
실행할 내용 내용 (***statement***)
}

예시

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

/*
결과:
1
2
3
*/

---

forEach (Array.prototype.forEach())

배열 대상으로 사용 가능하다.

break와 continue를 사용할 수 없지만, 예외를 던지는 throw를 통해 종료할 수 있고, return으로 해당 조건을 건너뛸 수 있다.

map, reduce와 달리 undefined를 반환한다.

문법

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

예시

const arr = [1, 2, 3];

// 일반 함수
arr.forEach(function (item, index, arr2) {
  console.log(item, index, arr2[index + 1]);
});

//첫번쨰 인수는 배열의 각각의 item //두번쨰 인수는 배열의 index //세번째 인수는 배열 그자체

// 화살표 함수
arr.forEach((element) => {
  console.log(element);
});

/*
1
2
3
*/

---

For … in

Object의 enumerable properties (열거 가능한 속성) 순회하기 위한 용도로 사용

주의할 점은 Array도 Object라서 for … in이 사용한데, 만약 Array에 property가 지정되어 있다면 (보통 그럴 일이 없지만) 배열의 값 뿐만 아니라 properties도 순회하기 때문에 퍼포먼스에 영향을 준다.

또한 Array의 index는 정수인 반면, for …in은 정수가 아닐 수 있는, 다양한 종료의 열거 가능한 속성들을 순회하기 위한 용도로 사용하기 때문에 비록 Array를 대상으로 사용하더라도 index의 순서를 보장할 수 없다.

그래서 일반적으로 배열에 for loop을 사용할때는 일반 for문, forEach, for … of 중 하나를 사용하는 것이 권장된다.

문법

for (variable in object) { ... }

예시

const person = { 이름: "길동", 성: "홍", 나이: 20 };

for (const property in person) {
  console.log(`${property}:${person[property]}`);
}
/*
결과: 
이름: 길동
성: 홍
나이: 20
*/

---

For … of (ES6)

ES6에서 새로 추가된 반복 구문

[Symbol.iterator] 속성을 가진 collections (Array Map, Set, String,TypedArray,arguments)를 대상으로 사용 가능

문법

for (variable ofiterable) {
statement
}

예시

const arr = [1, 2, 3];

for (const i of arr) {
  console.log(i);
}
/*
결과: 
3
5
7
*/

---

For in, For of 차이

For in은 Object의 열거 가능한 모든 속성을 순회하는 반면, For of는 [Symbol.iterator] 속성을 가진 Collections 대상 (Array, Map, Set 등)으로만 순회

출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for…of

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

let iterable = [3, 5, 7];
iterable.foo = "hello";

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

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

---