[JavaScript] 반복문 -- for-of / for-in (Iterating vs. Enumerating)

 

 

const basket = ['apples', 'oranges', 'grapes']

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

// forEach
basket.forEach( item => {
	console.log(item);
}

// while
let i = 0;
while (i < basket.length) {
	console.log(basket[i]);
}

// do-while
let j = 0;
do {
	console.log(basket[j]);
    j++;
} while (j < basket.length);

 

 

자바스크립트에는 크게 기본 반복문(Traditional Loops)와 고급 반복문 (Modern Loops) 이 있다.

기본 반복문은 인덱스 기반으로 배열이나 숫자 범위를 반복할 때 사용되며,

for 문, while 문, do...while문 이 있다.

고급 반복문은 기본 반복문보다 더 직관적이고 선언적인 방식으로 사용되며,

forEach, for...of, for...in 이 있다.

 

그 중에서 가장 헷갈리는 for...of 와 for...in 에 대해 이해하는 시간을 가져보자.

 

 

1. for...of (Iterating)

Iterating 이란, 반복(iteration)하면서 값(value)을 가져오는 것이다.

배열, 문자열, Set, Map 등 반복 가능한(iterable) 요소를 순회하며, 순서를 보장한다.

 

const basket = ['apples', 'oranges', 'grapes']

for (item of basket) {
	console.log(item); // apples, oranges, grapes
}

for (char of 'basket') {
	console.log(char); // b, a, s, k, e, t
}

 

 

2. for...in (Enumerating)

객체(Object)의 속성(property)을 열거(하나씩 나열)할 때 사용한다.

객체의 키(key)를 가져오며, 순서를 보장하지 않는다.

 

const detailedBasket = {
	apples : 5,
    oranges : 10,
    grapes : 50
}

for (item in detailedBasket) {
	console.log(item);
}

// apples
// oranges
// grapes

 

 

for...in 과 Object.keys() 차이점

둘 다 객체의 키를 반복하는 기능은 같지만, 동작 방식이 다르다.

for...in 은 상속된 속성까지 포함할 수 있으며, 문자열을 리턴한다.

Object.keys() 는 상속을 제외하고 자신의 속성만 가져오며, 배열을 리턴한다.

 

const parent = { inherited: "I'm inherited!" };
const obj = Object.create(parent); // obj의 프로토타입에 parent를 추가
obj.name = "James";
obj.age = 25;


for (let key in obj) {
  console.log(key); // name, age, inherited (프로토타입 상속된 속성도 포함!)
}

for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key); // name, age (inherited는 제외됨)
  }
}

console.log(Object.keys(obj)); // ["name", "age"]