for / for...in / for...of

---

 

for...in 과 for...of 의 차이점

 

 

`for...in`과 `for...of`은 JavaScript에서 객체와 배열을 순회하는 데 사용되는 두 가지 다른 루프 유형입니다. 

이들 간의 주요 차이점은 다음과 같습니다:

1. `for...in`:
   - 객체의 프로퍼티를 열거하는데 사용됩니다.
   - 배열 역시 객체이기 때문에 배열의 인덱스(프로퍼티)를 열거할 수 있지만, 프로퍼티 순서가 보장되지 않습니다. 

      순서는 숫자 프로퍼티에 대해서는 정렬되지만, 다른 프로퍼티에 대해서는 정렬되지 않을 수 있습니다.
   - `for...in`은 객체의 상위 프로퍼티까지 열거하므로 반드시 `hasOwnProperty` 메서드로 해당 객체의 직접 소유 프로퍼티를 확인하          는 것이 좋습니다.

 

2. `for...of`:
   - 배열, 문자열, Set, Map, NodeList 등 iterable한 객체의 요소를 순회하는데 사용됩니다.
   - 순서가 보장되며, 배열 요소, 문자열 문자, Set 및 Map의 값, NodeList의 노드 등을 반복적으로 탐색할 수 있습니다.
   - `for...of`를 사용할 때, 단순하게 값을 반환하며 프로퍼티의 이름이나 인덱스를 제공하지 않습니다.

요약하면, `for...in`은 객체 프로퍼티를 열거하고 순서를 보장하지 않으며, 

`for...of`은 iterable한 객체의 요소를 순회하고 순서를 보장합니다.

 

 

---

 

for문 코드 변경

 

일반적인 for문

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

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

 

 

똑같은 for문을 for...of로 쓰는법

 

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

for (const num of numbers) {
  console.log(num);
}

 

 

for...of 문은 배열이나 이터러블(iterable) 객체를 반복하는데 간단하고 직관적인 방법을 제공합니다.

for...of 루프를 사용하면 배열의 각 요소나 이터러블 객체의 값을 순회하며 사용할 수 있습니다.

이를 통해 코드를 더 간결하게 작성할 수 있고, 일반적인 for 루프보다 코드 가독성이 향상됩니다.

 

이렇게 하면 배열의 각 요소를 순회하면서 출력할 수 있습니다. 

for...of를 사용하면 배열을 직접 인덱스로 접근하는 것보다 코드가 더 명확하고 간결해집니다.

 

 

 

 

 

 

 

 

끝!!