비실이의 개발 성장기

javascript의 for in과 for of 본문

프론트엔드/javascript

javascript의 for in과 for of

DubbingLee 2016. 11. 27. 16:14

javascript에는


for in 과 for of가 있습니다.



이 둘의 공통적인 기능은 


순회 할 객체의 길이만큼 반복을 한다는 점에서는 같습니다.




하지만, 서로 다른 부분이 존재한다고 합니다.



저도 최근에 프로젝트를 하며 


for in과 for of 둘 다 사용했으나..


이 둘의 차이점을 확실하게 알고 사용하지 않았습니다...



이번기회에 포스팅도 할 겸 확실하게 구별한 뒤, 


올바르게 사용해보려 합니다.








예제를 만들어서 알아보겠습니다.



userName 이라는 Array 객체에


아이템은 ['홍길동', '김삿갓', '변사또']


초기화 하겠습니다.


그 다음, userName 객체를 for in을 사용하여 console.log로 


각 인덱스의 값을 찍어보겠습니다.



결과는 3회 반복에 각 순번에 값으로


0, 1, 2 가 나왔습니다.


또, 여기서 나온 


0, 1, 2 라는 값은 타입이 Number 가 아니였습니다.



typeof로 타입을 확인해보니 


string 이라는 것을 알 수 있었습니다.




즉, for in을 사용하여 반복을 하였을 경우에

나오는 결과로 연산 작업을 할 경우,

결과가 string이라 올바르지 않은 결과가 나온다는 점을 알게되었습니다.






그러면 for of로 찍으면 어떠한 값이 나오는지 


알아보겠습니다.




for in과는 다르게 for of일 경우에는 


userName의 아이템 값인 


홍길동, 김삿갓, 변사또  가 나왔습니다. 


3회 반복은 같습니다.









두번째 예제로 넘어가겠습니다.


javascriptprototype을 사용하여


Array 객체에 test()라는 


함수를 직접 구현 해보겠습니다.







test()함수가 제대로 추가되었는지 확인해볼까요??


첫번째 예제에서 선언한 userName 이라는 Array 타입의


객체를 사용하여 test() 함수에 접근해보겠습니다.



제대로 동작하네요.



그런데 test() 함수를 왜 만든거죠...?


이 글은 prototype을 알아보는 글이 아닐텐데....




네.. 맞습니다. 


그럼 다시 userName 객체를 for in을 사용하여


내부 index를 찍어보겠습니다.





반복을 상당히 많이 돌았습니다...


userName 객체에는 따로 추가한게 없음에도 불구하고요..


결과를 보니 size, copy, isArray와 같이 


javascript에서 기본적으로 제공하는 Array객체의 내장함수들


마지막에 test라고 우리가 직접 추가한 함수도 확인할 수 있습니다.



이처럼 for in을 사용하게 되면 반복대상(userName)으로 지정한 객체(Array)가 


기본적으로 가지고 있는 내부함수들직접추가한 함수들까지


포함하여 반복한 것을 확인하였습니다.




그러면 여기서 for of 를 사용 해볼까요?




for of 는 정상적으로 3회 반복


userName의 아이템인 '홍길동', '김삿갓', '변사또' 가 


나왔습니다.









세번째 예제로 넘어가겠습니다.


이번엔 위에서 사용한 Array 타입이 아닌 JSON 타입의 


객체 userInfo 를 생성하겠습니다.



userInfo 객체의 내부 구성은 


아이템 3개로 했습니다.



이제 for in 을 사용하여 내부 아이템들을 찍어보겠습니다.





결과는 3회 반복에 아이템의 key값이 출력된 것을 확인했습니다.


그럼 아이템의 value값을 찍으려면...



위와 같이 userInfo[key] 를 사용하면 아이템의 value에 접근 가능합니다.




그러면 for ofuserInfo 객체를 순회 해 보겠습니다.




에러가 발생했네요..


에러내용은 '반복하려는 userInfo 의 []가 


Symbol.iterator 함수를 가지고 있지않다...'




여기서 Symboljavascript ES6에 추가 된 


새로운 타입이라고 합니다.



ES5 까지 javascript 타입 종류는 


undefined, null, Number, string, Boolean, Object


6가지 였으나, ES6 로 오면서 Symbol 이 추가되었습니다.



또, for of ES6 에서 추가 되었다고 합니다.



즉, for of 는 순회하려는 대상이 Symbol 이 아니면 


에러를 발생시킵니다.




그럼 for of 로는 JSON타입의 객체를 순회할 수 없는 걸까요??




방법은 있습니다.


Object.keys(userInfo) 로 변환하여 사용하면 가능 합니다.




for in 을 사용했을 때와 동일한 결과가 나왔습니다.




(아무래도 다음에는 Symbol 에 대해 알아봐야겠습니다.)







# 잘못 된 부분이나 기타 의견이 있으면 댓글로 남겨주세요~



4 Comments
댓글쓰기 폼