[JavaScript] for in 과 for of 반복문의 차이점

JavaScript에서 for...of 문과 for...in 문은 둘 다 반복문이지만, 서로 다른 목적과 작동 방식을 가지고 있습니다. 

아래에서 각각의 차이를 자세하게 설명해보도록 하겠습니다!!

---

1. for in 반복문

for...in 문은 객체의 속성을 열거할 때 사용됩니다. 객체의 모든 열거 가능한 속성, 즉 속성과 메서드를 순회합니다. 하지만 이 방식은 객체의 속성을 열거할 때 순서가 보장되지 않습니다.

 

for in 반복문의 기본형태는 다음과 같습니다.

for ( const 반복 변수 in 배열 또는 객체){
	문장
}

예시 코드를 한 번 만들어 보겠습니다.

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

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

for...in 문은 객체의 프로토타입 체인까지 탐색하여 상속된 속성도 열거합니다. 이로 인해 의도하지 않은 속성까지 열거될 수 있으므로 주의가 필요합니다. 또한, 배열에 for...in을 사용하는 경우 배열의 인덱스 뿐만 아니라 배열의 프로토타입 체인에 있는 속성까지 열거할 수 있습니다.

 

-> for 반복문의 반복변수에는 요소의 인덱스들이 들어옵니다. 이를 활용해서 배열 요소에 접근할 수 있습니다.

 

---

2. for of 반복문

for...of 문은 주로 순서대로 나열할 수 있는 것들을 다룰 때 사용합니다. 예를 들어, 여러분이 과일이 들어있는 바구니 안의 과일들을 하나씩 확인하고 싶다고 생각해봅시다. 바구니 안에 있는 과일들은 순서가 있으며, 그 순서대로 하나씩 꺼내서 확인하고 싶을 것입니다. 이때 for...of 문을 사용하면 편리합니다.

for ( const 반복변수 of 배열 또는 객체){
	문장
}

예시코드를 작성해보겠습니다.

const fruits = ['apple', 'banana', 'orange'];

for (const fruit of fruits) {
  console.log(fruit);
}

위의 코드에서 fruit라는 변수는 fruits 배열 안의 각 과일을 한 번에 하나씩 가리킵니다. for...of 문은 배열의 각 요소를 순서대로 가져와서 작업할 수 있게 도와줍니다.

 

-> for...of 문은 객체의 값을 직접 가져오기 때문에 보다 직관적이고 간결한 반복문을 작성할 수 있습니다. 또한, 배열의 경우 인덱스에 직접 접근하지 않아도 되기 때문에 코드가 더 명확해집니다.

 

---

3. 요약

요약 하자면

- for in 반복문 : 배열 요소를 하나하나 꺼내서 특정 문장을 실행할 때 사용
- for of 반복문 : 반복 변수에 인덱스 대신에 요소의 값을 기준으로 반복할 때 사용