본문 바로가기
Front-end/Javascript

[Javascript] for in 은 속성 반환용

by JiGyeong 2019. 8. 14.

배열의 반복과 for...in

for...in은 인덱스의 순서가 중요한 Array에서 반복을 위해 사용할 수 없습니다.

배열 인덱스는 정수로 된 열거 가능한 속성이며, 일반적인 객체의 속성들과 같습니다. for...in은 특정 순서에 따라 인덱스를 반환하는 것을 보장할 수 없습니다. for...in반복문은 정수가 아닌 이름을 가진 속성, 상속된 모든 열거 가능한 속성들을 반환합니다.

반복되는 순서는 구현에 따라 다르기 때문에, 배열의 반복이 일관된 순서로 요소를 방문하지 못할 수도 있습니다. 그러므로 방문의 순서가 중요한 배열의 반복시에는 숫자 인덱스를 사용할 수 있는 for 반복문을 사용하는 것이 좋습니다.(또는 Array.prototype.forEach()for...of를 권장합니다.)

 

괜히 한 자라도 덜 쓰겠다고 for(var i in array) 했다가 undefined 값이 반환 되는 경험을 했습니다.

그래서 찾아보니 for...in 문은 정수가 아닌 속성을 반환한다고 합니다.

사실 for...in 은 객체의 반복을 위해 만들어졌지만, 배열의 반복을 위해서는 추천되지 않고,  Array.prototype.forEach(), for...of 가 사용되고 있습니다.

 

그러면 for...in은 어떻게 사용하는 것이 좋을까요?

이것은 쉽게 객체의 속성을 확인(콘솔이나 다른 방법으로 출력)할 수 있기 때문에 실질적으로 디버깅을 위해 사용될 수 있습니다. 배열이 데이터의 저장에 있어서는 더 실용적이지만, 키-값 쌍이 선호되는 데이터의 경우(속성이 "key"의 역할을 함) 특정 값을 가진 키가 있는지 확인하려는 경우에 for...in을 사용할 수 있습니다.

 

var a = [5, 6, 7, empty × 4, 1, ll: 1] 인 경우

for (var i in a ) console.log(i) 를 찍어보면 " 0 1 2 7 ll " 이 나옵니다.

 

 

'Front-end > Javascript' 카테고리의 다른 글

== 와 === 차이 명확하게 알아보기  (0) 2023.04.27
Webpack  (0) 2021.10.26
Fabric, Javascript Canvas Drawing Library  (0) 2021.01.26