[Javascript] for...in , for...of (2)

for...in, for...of(1) https://mtm1018.tistory.com/49

[Javascript] for...in, for...of (1)

 

 

 

저번 글에서는 for...in이 객체에서만 사용되는게 아니라 enumerable한 요소에서 사용된 다는 것을 알았습니다.

 

그렇다면 for...of는 어떤 곳에서 쓰일까요??

 

iterable 한 요소만 가능합니다.

 

iterable이란 반복 가능한 요소를 뜻하는 말입니다.

 

그럼 이것은 어떻게 찾을까요?

let arr = [123,456,789,258]

이런 배열이 있습니다. 이 배열을 그대로 콘솔창에 찍어보면 [[Prototype]]이라는 게 보이는 데 화살표를 열고 쭉 내려가다보면

 

 

Symbol이란 곳에 내장되어있는 게 보입니다.

 

for...of은 기본적으로 이렇게 사용합니다.

for(let value of arr){
console.log(value) // 123 456 789 258
}

그렇다면 이런건 어떨까요? 객체에다가 인덱스를 만들고 값도 부여해주는겁니다.

 

그러면 배열같지 않을까요?

const todo = {
0 : '공부하기',
1 : '양치하기',
2 : ()=>{},
length : 3
}

console.log(todo)

콘솔에 찍어보면 iterable이 안보이네요. 마치 배열처럼 이것도 열거할 수 있는것같은데 말이죠.

 

이런것을 유사배열이라고 합니다.

 

물론 symbol.iterator라는 속성도 커스텀하게 만들어 줄 수 있지만,

 

더 쉬운 방법이 있습니다.

 

객체를 배열로 만들어 주는 방법이 있습니다.

const keys = Object.keys(todo) // 객체의 키를 배열로 변환

console.log(key) // ['0', '1', '2', 'length']

const values = Object.values(todo) // 객체의 값을 배열로 변환

console.log(values) // ['공부하기', '양치하기', ƒ, 3]

const entries = Object.entries(todo) // 객체의 키 값 한 쌍을 배열로 변환

console.log(entries) // [Array(2), Array(2), Array(2), Array(2)]

번외로 콘솔창에 오류나면 보이는 단어들의 뜻이 뭔지 몇가지만 정리하겠습니다.

enumerable : 열거 가능
iterable : 반복 가능
mutable : 변형 가능
immutable : 변형 불가능