[JavaScript] for, forEach(), for ... in, for ... of 반복문 차이

 

 

🚀 매번 사용할 때마다 헷갈려서 기록하기 위해 포스팅해봅니다.

 

for (let i = 0; i < arr.length; ++i)

arr.forEach((x) => { console.log(x) })

for (const prop in obj)

for (let item of arr)

 

 

✔️ for 반복문

가장 기초적인 반복문입니다. 3개의 선택식과 반복을 수행할 { } 부분으로 이루어져 있습니다.

📖 구문

for ([initialization]; [condition]; [final-expression])
   statement

👨🏻‍💻 예제

const arr = [1, 2, 3];

const objArr = [
  {
    a: 1,
    b: 2,
    c: 3,
  },
  {
    a: 4,
    b: 5,
    c: 6,
  },
];

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

for (let i = 0; i < objArr.length; i++) {
  console.log(objArr[i]);
}

 

 

✔️ forEach() 반복문

forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다.

📖 구문

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

👨🏻‍💻 예제

const arr = [1, 2, 3];

const objArr = [
  {
    a: 1,
    b: 2,
    c: 3,
  },
  {
    a: 4,
    b: 5,
    c: 6,
  },
];

arr.forEach((value, idx) => {
  console.log(value);
});
objArr.forEach((value, idx) => {
  console.log(value);
});

 

 

✔️ for ... in 반복문 (객체 반복)

객체를 반복할 때 사용되며 해당 객체에서 모든 property(속성)에 대해 반복합니다.

for ... in의 경우 특정 순서에 따라 인덱스를 반환하는 것을 보장할 수 없으므로 순서가 중요한 배열의 경우에는 for, forEach(), for ... of 사용을 권장합니다.

📖 구문

for (variable in object) { ... }

👨🏻‍💻 예제

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

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

 

 

✔️ for ... of 반복문

for ,, of 반복문은 반복 가능한 객체(Array, Map, Set, String, TypedArray, arguments 객체 등등)에 대해서 반복합니다.

📖 구문

for (variable of iterable) {
  statement
}

👨🏻‍💻 예제

const arr = [1, 2, 3];

const objArr = [
  {
    a: 1,
    b: 2,
    c: 3,
  },
  {
    a: 4,
    b: 5,
    c: 6,
  },
];

for (const item of arr) {
  console.log(item);
}
for (const item of objArr) {
  console.log(item);
}

 

 

⚖️ for ... in 반복문과 for ... of 반복문의 차이점

• for in 반복문 : 객체의 모든 열거 가능한 속성에 대해 반복, key를 리턴
• for of 반복문 : [Symbol.iterator] 속성을 가지는 컬렉션 전용, value를 리턴

[Symbol.iterator] 속성을 가지는 컬렉션

Array
Array.prototype[Symbol.iterator]

String
String.prototype[Symbol.iterator]

Map
Map.prototype[Symbol.iterator]

Set
Set.prototype[Symbol.iterator]

DOM data structures
NodeList.prototype[Symbol.iterator] HTMLCollection.prototype[Symbol.iterator]

arguments
arguments[Symbol.iterator]

 

📚 참고

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...in
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...of