[Javascript] 반복문 for.. in 과 for.. of 의 차이

지난 포스팅에서 배열이 내장함수인 forEach()에 대한 기초적인 내용들을 정리를 해보았습니다.

forEach, for...in을 이용한 반복문 기초(ft. 배열, 객체 Data 뽑기)

forEach, for...in을 이용한 반복문 기초(ft. 배열, 객체 Data 뽑기)

 

 

그러면서 for.. in 반복문도 함께 살펴보았는데요, 이놈의 Javascript에는 for.. of 라는 반복문 형태가 또! 존재합니다. 비슷한 게 뭐가 이리 많어, 헷갈리게! 싶은데요. 역시나 자바스크립트의 이런 점을 마주하게 되면 Python이 얼마나 간결함을 잘 추구하고 있는가 싶은 생각이 들기도 합니다. 초보자가 코딩을 입문하기에는 정말 파이썬 만한 게 없을 것 같습니다. 

 

 

 

for.. in 과 for.. of의 차이

 

결론적으로, for.. in은 "모든 열거 가능한 객체"를 반복해주고 for.. of는 "컬렉션 전용"입니다.

뭔 말인지 저도 늘 헷갈립니다. 둘 다 반복문이긴 한데요, 그냥 다양한 예제를 통해 비교를 해보는 게 좋을 것 같습니다.

 

일단 for.. of 루프가 반복하는 대상이 더 '적다'고 살짝 이해를 해두세요.

 

 

 

for.. in

 

for.. in 문은 상속된 열거 가능한 속성들을 포하하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다.(non-Symbol 속성에 대해서만 반복)

 

 

for.. of

 

for.. of 구문은 "반복가능한 객체(Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)"에 대해서 반복하고, 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성한다고 MDN이 말합니다. ㅡ,.ㅡ;

 

딱, 이런 느낌이 들죠?

 

마치 사운드가 들리는듯하다.

 

 

배열(Array)에서의 반복에는 for.. of 사용

 

일단 암기, 빡! for.. in : 배열에서 사용하지 않는 게 권장됩니다.

 

왜냐하면, 배열은 '인덱스의 순서'가 중요한 객체인데요 for.. in 반복문은 "순서 없이" 반복이 되는 특징을 가졌습니다.

그래서, 배열의 인덱스 순서대로 반복한다는 결과를 "보장"할 수가 없습니다.

배열에서도 되긴 되는 거 같긴한데, 그렇게만 보일뿐.. 나도 모르게 어디선가 에러가 발생할 수 있다는 말이 됩니다.

일단, for.. in은 배열에서 쓰지 말고, 순서가 없는 object 자료형에서 사용하는 게 좋겠습니다.

 

 일단, 문법은 다음과 같은 차이를 갖고 있습니다.

      console.log("for.. in 반복 결과");
      const fruits = ["apple", "banana", "tomato"];
      for (let i in fruits){     //배열에는 for.. in을 쓰지 맙시다!
        console.log(fruits[i]);
      }

      console.log(""); // 사이 띄움

      console.log("for.. of 반복 결과");
      const heros = ["Iron-man", "Spider-man", "Bat-man"];
      for (let i of heros){
        console.log(i);
      }

 

for.. in도 배열에서 일단 이렇게, 순서대로 잘~ 출력해주는 것 같아보이긴 합니다만..

 

MDN에서 설명하는 예제를 들어보겠습니다.

      Object.prototype.objCustom = function () {};   //Object 프로토타입에 커스텀 속성 추가
      Array.prototype.arrCustom = function () {};    //Array 프로토타입에 커스텀 속성 추가

      let iterable = [3, 5, 7];
      iterable.foo = "hello";           //배열객체에 foo 속성 추가 및 값 할당.

      console.log("for.. in 반복 결과");
      for (let i in iterable) {
        console.log(i); 
      }

      console.log(""); // 사이 띄움

      console.log("for.. of 반복 결과");
      for (let i of iterable) {
        console.log(i); 
      }

 

위 예제로 살펴보면, iterable이라는 배열을 for.. in으로 반복하는 경우, 눈에 보이는 배열의 원소 뿐만 아니라, 눈에 보이지 않는 프로토타입 속성의 인덱스까지 모두 돌며 반복하는 것을 알 수 있습니다. 게다가 objCustom을 먼저 정의해주었지만, arrCustom이 먼저 출력되기도 합니다.(그래서 인덱싱의 순서를 보장할 수 없다는 의미!)

 

복잡하게 빌드된 프로그램 안에서, 배열을 for.. in으로 도는 경우 이처럼 예상치 못한 에러를 발생시킬 수 있다는 것입니다. 그러면 이 복잡 다난한 for.. in은 왜 만들었을까요? 어디에 사용하면 좋을까요?

 

TMI- 오브젝트 자료형은 아래에서 살펴보겠지만, for.. in은 '눈에 보이지 않는' 것들까지 다 순환해주니까 "디버깅"을 할때 매우 유용하다고 합니다(초보때는 아 그렇구나~ 한 후, 일단 패쓰합시다!)

 

 

 

객체(Object)에서의 반복은 for.. in을 사용

 

오브젝트 자료형에서의 반복은 역시 인덱싱 순서가 중요하지 않은 for.. in 문을 사용하면 편리합니다.

      const spiderman = {name: 'peter', age: 18, skill: '피터찌리릿'}

      console.log("for.. in 반복 결과");
      for(const key in spiderman){
        console.log(key);
      }

      console.log(""); // 사이 띄움

      console.log("for.. of 반복 결과");
      for(const key of spiderman){
        console.log(key);
      }

 

for.. in 반복의 결과로, object의 key값을 잘 출력해주었습니다.

for.. of 반복의 결과로는 에러를 표시해줍니다. spiderman 객체가 iterable(반복가능)하지 않다고 합니다.

 

for.. in의 경우에는 key값에 대응하는 value는 이렇게 간단하게 출력할 수 있겠죠?

      const spiderman = {name: 'peter', age: 18, skill: '피터찌리릿'}

      console.log("for.. in 반복 결과");
      for(const key in spiderman){
        console.log(spiderman[key]);
      }

오브젝트 자료형에서는 역시나, for.. in이 매우 편리한 것 같습니다.

 

 

 

마치며

 

위 예제 이외로도 MDN을 참고해보면, 더욱 다양한 예제들을 살펴볼 수 있습니다.

초보자를 위한 오늘의 요지, 배열에서는 for.. of 를 사용하고 오브젝트에서는 for.. in을 사용하자.

 

당연하게도 for.. of는 인덱싱 순서가 중요하고, for.. in은 순서없이 동작한다.

for.. in은 눈에 보이지 않는 속성들까지 반복하며 다 돌아다닌다 카더라~!!!

 

역시나 Javascript의 세계는 심오하거나 개떡 같거나^^;

 

 

 

 

즐거운 코딩생활, 즐코딩.

KINcoding.