[JS] 객체 반복문 돌리기

 

1️⃣ for...in

for...in 문은 객체의 key를 하나씩 가져온다.

const obj = {
	key1: 'value1',
    key2: 'value2',
    key3: 'value3',
}

for (const key in obj) {
	console.log(key + ' : ' + obj[key]);
}

// key1 : value1
// key2 : value2
// key3 : value3

 

2️⃣ for...of

for...of 문은 iterable한 속성을 지닌 String, Array, TypedArray, Map, Set 에서 값을 하나씩 가져온다.

객체는 iterable이 아니기 때문에 사용할 수 없다.

const obj = {
	key1: 'value1',
    key2: 'value2',
    key3: 'value3',
}

for (const value of obj) { 
	console.log(value); //TypeError: obj is not iterable
}

 

그렇기 때문에 Object.keys(object) 혹은 Object.values(object)를 통해 배열로 바꿔서 값을 가져와야 한다.

Object.entries(obejct)를 이용하면 enumerable 속성의 key와 value 배열을 동시에 가져올 수도 있다.

 

const obj = {
	key1: 'value1',
    key2: 'value2',
    key3: 'value3',
}


for (const key of Object.keys(obj) {
	console.log(key);
}

// key1
// key2
// key3


for (const key of Object.values(obj) {
	console.log(key);
}

// value1
// value2
// value3


for (const [key, value] of Object.entries(obj) {
	console.log(key + ' : ' + value);
}

// key1 : value1
// key2 : value2
// key3 : value3