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

for...in 반복문과 for...of 반복문

일반적으로 for...in 반복문은 객체에,

 

for...of 반복문은 배열같은곳에 사용한다고 알고있습니다.

 

이 글에서는 for...in과 for...of를 학습함과 동시에

 

객체와 이터러블이란 것에서 더 알아보겠습니다.

---

for...in 반복문

for...in 반복문을 알아보기에 앞서 in문 이라고 있습니다.

const human = {
name : "peter",
birth : "2000,01",
job : "CEO",
likeNumber : 5
}

console.log("name" in human) // true

이런 식으로 객체안에 이게 있어? 라고 물어보는 문법입니다.

 

이것을 기반으로 보면 for...in의 이해도 조금은 빨라질 겁니다.

 

for ...in은 객체를 순환하는 용도로 사용하는 반복문인데요.

 

사용예제를 보면서 익혀봅시다.

const human = {
name : "peter",
birth : "2000,01",
job : "CEO",
likeNumber : 5
}


for(let key in human){
console.log(key) // name birth job likeNumber
}

for(let value in human){
console.log(human[value]) // peter 2000.01 CEO 5
}

이렇게 객체를 순환하면서 키와 값을 찾을 수 있습니다.

 

그런데 객체의 값을 찾으려면 왜 대괄호 같은 걸 써야할까요?

 

보통 객체에서 무엇인가를 찾을때 human.name과 같은 점 표기법을 사용합니다

 

하지만 점표기법같은 경우 고정된 이름에만 사용할 수 있어서 수동적인 면이 있습니다.

 

하지만 대괄호 표기법은 변수같은것도 참조해서 사용할 수 있기 때문에 대괄호표기법을 사용합니다.

 

그런데 만약 코드에 누가 프로토타입을 넣는다면 어떻게 될까요?

const human = {
name : "peter",
birth : "2000,01",
job : "CEO",
likeNumber : 5
}

Object.prototype.car = "porsche"

for(let key in human){
console.log(key) // name birth job likeNumber car
}

for(let value in human){
console.log(human[value]) // peter 2000.01 CEO 5 porsche
}

나는 peter라는 사람이 부모님한테 무슨 차를 상속받았는지 알고싶지도 않은데 계속 뜰겁니다.

 

이처럼 자신이 어떤 프로퍼티를 가지고있는지 확인할 수 있는 방법중 hasOwnProperty라고 있는데요.

const human = {
name : "peter",
birth : "2000,01",
job : "CEO",
likeNumber : 5
}

Object.prototype.car = "porsche"

console.log(human.hasOwnProperty("name")) // true

이처럼 이 객체에 어떤 값이 들어있는지 안들어있는지 알아 볼 수 있는 방법입니다.

 

요즘엔 더 짧게 써서 hasOwn이라는 방식도 사용합니다.

console.log(Object.hasOwn(human,"name")) // true

이를 응용하여 for...in 반복문을 돌린다면 내가 반복문 돌린 객체에 어떤 키나 값이 있는지 명확하게 알 수 있을거 같습니다.

for(let key in human){
  if(Object.hasOwn(human,key)){
    console.log(key) // name birth job likenumber
}} 

---

그런데 for...in 반복문을 썻을때 정말 객체만 반복시켜줄까요?

 

배열을 만들어서 실험해보도록 합시다

let arr = [314,159,265,358]

for(let key in arr){
console.log(key) // 0 1 2 3
console.log(arr[key]) 314 159 265 358
}

놀랍습니다. 객체만 순회가 되는줄알고 여태 시도도 안해봤었는데 배열도 순회가 되는군요?

 

이게 어떻게 가능한거냐면 for...in은 객체만 순환이 아닌 enumerable한 속성을 순환 시켜줍니다.

 

배열도 enumerable속성을 가지고 있는데 여기서 나오는 enumerable이란 열거 가능한 요소를 말합니다.

 

예를들면 배열의 인덱스 같은 것들이 있습니다.

 

약간 숨겨진 속성같은건데 실은 이것은 개발자가 객체에 넣어줄 수 있는 속성입니다.

 

객체는 커스텀 할 수 있는 요소들이 있는데 이렇게 객체를 커스텀하게 만들어 줄때 쓰는게 defineProperty라는게 있습니다.

 

defineProperty는 프로퍼티를 생성할 때 미리 커스텀 하고싶다면 사용하는게 좋습니다

 

만약 여러개의 속성을 한꺼번에 커스텀 할때는 defineProperties라고 복수형으로 넣으면 됩니다.

 

앞서 만들어 두었던 human객체로 예시를 들어보겠습니다.

Object.defineProperty(human,"hobby",{
value : "football",
enumerable : false, // enumarble을 false로 바꿨기 떄문에 조회가 안됩니다.
writable : false, // 이 프로퍼티는 이제 수정을 못하는 상태로 바꿨습니다.
configurable : false // 이제 이 프로퍼티는 삭제도 못합니다
})


Object.defineProperties(human,{
age : { ... },
tel : { ... } 
})

 

 

 

for...in, for...of (2) https://mtm1018.tistory.com/50