Javascript for in 반복문

 

자바스크립트에서 사용되는 반복문인 for 명령어는 in 이라는 명령어와 같이 사용할 수 있습니다.

일반적으로 for in 문법을 사용하면 데이터의 인덱스(색인) 을 반환하는 것 으로 알고 있습니다.

그러나 결론부터 이야기하면 for in 반복문을 통해서 나온 대상은 단순한 인덱스라 할 수 없습니다.

let array = ['a', 'b', 'c'];

for(let i in array) console.log(i); //0,1,2 값이 반환됩니다.

 

자바스크립트(Javascript)에서 배열은 객체 입니다.

함수나 클래스가 아니기 때문에 prototype 프로퍼티를 갖지 않고 __proto__ 프로퍼티를 가지고 있습니다.

이러한 프로퍼티는 Array.prototype으로 상속을 받고, 이 Array 객체는 Object 객체로부터 상속을 받고 있습니다.

그래서 각종 forEach, join, find 및 toString 함수를 쓸 수 있는 것 입니다.

그렇기 때 문에 선언한 배열에서 각종 함수를 쓸 수 있는거구나!

 

위 개념을 가지고 코드를 변경하여 봅니다.

let array = ['a', 'b', 'c'];
array.x = 1234;
array.gogo = function(arg){ console.log(arg); }
for(let i in array) console.log(i); //???

 

선언한 배열인 array 변수에 x 와 gogo 라는 프로퍼티를 추가하여 주었습니다.

기본 대입 연산자를 사용하였기 때 문에 해당프로퍼티의 속성은 전부 true 일 것 입니다.

* 참조 : 프로퍼티 정의하기

https://lts0606.tistory.com/605

 

위 반복문인 for .. in 을 실행하면 아래와 같이 숫자 이외의 값이 출력되는 것을 볼 수 있습니다.

키 값 x와 gogo가 나오네요!

 

for in 반복문을 사용하게되면 해당 객체의 고유의 프로퍼티의 키 값이 나오게 됩니다.

다시말해, 프로퍼티 속성 값 중에 enumerable 값이 true 인 대상은 전부 나오게 되는 것 입니다.

단순한 배열의 인덱스 값으로 보였던 0, 1, 2 라는 값은 배열 객체에 존재하는 프로퍼티들의 키 값을 의미 합니다.

배열(Array)에서 알고 있는 forEach나 map, filter 같은 키 값들은 enumerable 값이 false 이므로 나오지 않는 것 입니다.

Array에서 사용되는 배열의 함수 대부분은 enumerable 값이 false 입니다.

 

이러한 특성을 고려한 다면 객체의 프로퍼티를 전부 사용하는 목적이 아니라, 단순하게 데이터를 나오게 하려면 for..of 또는 forEach, 일반 반복문 형식을 사용 해 주어야 합니다.

그렇지 않는 경우에 enumerable이 true 인 프로퍼티가 전부 나오게 되는 실수를 범할 수 있습니다.

let array = ['a', 'b', 'c'];
array.x = 1234;
array.gogo = function(arg){ console.log(arg); }
//for(let i in array) console.log(i);

//#1. for .. of
for(let i of array) console.log(i);

//#2. forEach
array.forEach( arg=> console.log(arg) );

//#3. 일반
for(let i=0;i < array.length;i++) console.log(array[i]);

 

for of를 사용하면서 종종 만날 수 있는 실수는 "파일" 과 관련된 작업에서 간혹 만날 수 있습니다.

input type file 또는 드래그앤드롭에서의 파일 정보가 담긴 객체인 dataTransfer 값의 files 배열을 사용하는 경우 입니다.

item이랑 length 속성도 존재하네요! 두 값은 enumerable값이 true 입니다!

 

객체 file 값을 사용해야 되는 데 아무생각없이 for in 반복문을 사용하게 되면 의도치 않는 프로퍼티인 item 과 length를 만나게 되 버릴 수 있습니다.

 

이처럼 자바스크립트(javascript)에서의 for .. in 반복문은 프로퍼티에 대한 정보값을 나열하는 기능이므로(enumerable이 true인) 사용시 주의해야 하겠습니다!

 

이상으로 자바스크립트에서의 for in 반복문에 대해서 살펴 보았습니다.

궁금한점 또는 틀린 부분은 언제든 연락주세요!👻