[JavaScript] for of 문과 for in 문

여려가지 for문에 대해 알아보자

 

 

[ for .. of 문 ]

for...of 문은 이터러블을 순회하면서 이터러블의 요소를 변수에 할당한다. for...of 문의 문법은 다음과 같다.

 

for (변수선언문 of 이터러블) { ... }

 

for...of 문은 for...in 문의 형식과 매우 유사하다.

 

for (변수선언문 in 객체) { ... }

 

하지만 두가지 for문에는 차이가 있다. 

 

for...in 문의 경우 객체 혹은 유사 배열 객체라면 사용할 수 있다. 

유사 배열 객체는 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고, length 프로퍼티를 갖는 객체를 말한다. 

유사 배열 객체는 length 프로퍼티를 갖기 때문에 for문과 for...in 문으로 순회할 수 있고, 인덱스를 나타내는 숫자 형식의 문자열을 프로퍼티 키로 가지므로 마치 배열 처럼 인덱스로 프로퍼티 값에 접근할 수 있다. 

 

하지만 유사 배열 객체는 이터러블이 아닌 일반 객체이다. 따라서 유사 배열 객체에는 Symbol.iterator 메서드가 없기 때문에 for...of 문으로 순회할 수 없다. 

 

const ary = {
  0 : 1,
  1 : 2,
  2 : 3,
};

for ( let num in ary) {
  console.log( ary[num] );
}

for ( let item of ary) {
  console.log(item); // TypeError : ary is not iterable
}

 

단, argument, NodeList, HTMLCollection은 유사 배열 객체이면서 이터러블이다. 

 

다만 ES6에서 도입된 Array.form 메서드를 사용하여 배열로 간단히 변환할 수 있다. 

배열도 마찬가지로 ES6에서 이터러블이 도입되면서 Symbol.iterator 메서드를 구현하여 이터러블이 되었다.

 

// 유사 배열 객체
const arrayLike = {
  0: 1,
  1: 2,
  2: 3,
  length: 3
};

// Array.from은 유사 배열 객체 또는 이터러블을 배열로 변환한다
const arr = Array.from(arrayLike);
console.log(arr); // [1, 2, 3]

 

Array.from 메서드는 유사 배열 객체 또는 이터러블을 인수로 전달받아 배열로 변환하여 반환한다.