[JAY⌨️JS] 자바스크립트 for in, for of 루프의 차이점

 

 

 

 1️⃣ 비슷한 기능을 하는 for..in, for ...of 무슨 차이가 있을까?

• JavaScript는 Object, Array, Map 및 String과 같은 Collection을 반복하는 여러 메서드를 제공한다.
• for in과 for of는 ES6에서 요소를 순회하기 위한 목적으로 새롭게 추가 되었다.
• 두 메서드의 구현 방식은 동일하다. 그렇다면 차이점은 뭘까? 아래 예제를 통해 살펴보자.

 

 

 

 1️⃣ for...in loop

 

✅ Object와 함께 for...in 사용

• for...in은 Object의 key를 순회.
• 아래 예시와 같이 사용하면 key를 순회하면서 value값도 함께 표시할 수 있다.

// for..in Input

const car = {
  make: "🚘Tesla",
  model: "Model 3",
  year: 2020
};

for (const i in car) {
  console.log(`${i}: ${car[i]}`);
	// key값에 접근, value는 직접 접근 불가
}

// for..in Output

make: 🚘Tesla
model: Model 3
year: 2020

 

 

 

✅ Array와 함께 for…in 사용

• for...in 은 Object를 순회할 때 key를 가져오는데 Array는 key가 없으므로 index를 가져온다.
• array에서 반환되는 index 값은 number가 아닌 string이라는 점 주의.

// for..in Input

const fruits = ["🍎apple", "🍌banana", "🍊orange"];

for (const i in fruits) {
  console.log(`${i}: ${fruits[i]}`);
}

// for..in Output

0: 🍎apple
1: 🍌banana
2: 🍊orange

 

 

 

 ⚠️ for...in loop 사용 시 주의사항.

 

😰 성능 문제

• JavaScript 반복문 중 명확한 속도 차이가 있는 것은 for-in문뿐이다.
• for in loop 를 반복할 때마다 인스턴스 또는 프로토타입 체인을 검색하게 되므로
  결과적으로 for...of를 비롯해 배열 메소드 forEach map filter 등과 같은 반복문보다 느린 속도를 가진다.

// for...in Input

// 1-1. Array.prototype에 customProperty를 추가.
Array.prototype.customProperty = 'This is a custom property on the Array prototype';

// 1-2. for..in loop를 사용할 배열을 생성.
const myArray1 = [1, 2, 3, 4, 5];

// 1-3. for in loop를 사용하면 customProperty도 출력됨.
for (const i in myArray1) {
    console.log(myArray1[i]);
}

// for..in Output

1, 
2, 
3, 
4, 
5, 
This is a custom property on the Array prototype

상속과 프로토타입 - JavaScript | MDN

 

 

🥵 반환 문제

• Array에 for..in loop를 활용하면 index에 할당되는 값들은 "0", "1", "2"과 같이 Number가 아닌 String으로 반환하기 때문에
  숫자연산을 해야 할 경우 parseInt() 등의 메소드로 일일이 정수로 변환해 주는 작업을 해야 한다.

//for..in Input

const myArray2 = [10, 20, 30];
for (const i in myArray2) {
    console.log(parseInt(i) + 100);
}

// for..in Output

110, 120, 130


// key + 100 연산을 그대로 진행한다면 결과가 아래와 같다.
// = 0100, 1100, 2100

 

 

 

 

 2️⃣ for...of loop

• Object를 제외한 반복 가능한 iterable Object Array Map Set String 등을 순회.
• for...in 처럼 Object의 key 또는 index를 반복하는 게 아니라 요소를 직접 반복.
• 반환되는 index나 value의 number는 그대로 number로 반환되기 때문에 숫자 연산도 문제없이 가능하다. 

 

✅ Array와 함께 for…of 사용

// for..of Input

const fruits = ["🍎apple", "🍌banana", "🍊orange"];

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

// for..of Output

🍎apple
🍌banana
🍊orange

 

 

✅ Map과 함께 for…of 사용

// for..of Input

const map = new Map([
  ["one", 1],
  ["two", 2],
  ["three", 3]
]);

for (const [key, value] of map) {
  console.log(`${key}: ${value + 100}`);
}

// for..of Output

one: 101
two: 102
three: 103

 

 

 

✅ Map과 함께 for…of 사용

// for..of Input

const greeting = "Hello, World!";

for (const i of greeting) {
  console.log(i);
}

// for..of Output

H
e
l
l
o
,
 
W
o
r
l
d
!

 

 

 

🙋🏻‍♀️ 결론!

• for...inloop는 Object의 열거 가능한 속성(iterable)의 (key)를 임의의 순서로 순회. 
• for...ofloop는 순회할 수 있는 객체의 값(values)을 순회.
• 크게 고민할 것 없이 Object가 아니면 그냥 for...of 루프를 사용하면 된다.