[JavaScript]반복문 for in vs for of

forEach 반복문

forEach 반복문은 Array 객체에서 사용이 가능한 메서드입니다.

배열의 요소들을 반복하여 작업을 수행할 수 있습니다. forEach 구문의 parameter로 callback 함수를 등록할 수 있고, 배열의 각 요소들이 반복될 때 이 callback 함수가 호출됩니다. 

const arr = ['element1', 'element2', 'element3'];

arr.forEach(el => console.log(el));
/* result = element1, element2, element3 */

 

for ...in 반복문

for in 반복문은 객체의 속성들을 반복해서 작업을 수행할 수 있습니다. 모든 객체에서 사용이 가능합니다.

for in 구문은 특히 객체의 key 값에 접근할 수 있지만, value 값에 접근하는 방법을 제공하지 않습니다.

JavaScript에서 객체 속성들은 내부적으로 사용하는 속성들을 가지고 있는데, 그 중 [Enumerable]이며 for in 구문은 이 값이 true로 셋팅되어 속성들만 반복할 수 있습니다. 

이러한 속성들을 열거형 속성이라고 부르며, 객체의 모든 내장 메서드를 비롯해 각종 내장 프로퍼티 같은 비열거형 속성은 반복되지 않습니다.

const obj = {
  name: 'Dongwoo',
  age: '24',
  count: 5
};

for (let prop in obj) {
  console.log(prop);
}
/* result = name, age, count (key값이 출력된다) */​

const arr = [1, 2, 3];
arr.foo = 'bar';

Object.prototype.objTest = function() {};
Array.prototype.arrTest = function() {};

for (let prop in arr) {
  console.log(prop);
}

/* result = 0, 1, 2, foo, arrTest, objTest */​

 

for ...of 반복문

for of 반복문은 ES6에 새로 추가된 Collection 반복 구문입니다. for of 구문을 사용하기 위해선 Collection 객체가 [Symbol.iterator] 속성을 가지고 있어야만 합니다.

아래에 보면 알겠지만 in과 달리 value값만 출력하고 [Symbol.iterator]속성을 가지고 있는 것만 반복한다.

const arr = [1, 2, 3];
arr.foo = 'bar';

Object.prototype.objTest = function() {};
Array.prototype.arrTest = function() {};

for (let prop of arr) {
  console.log(prop);
}

/* result = 1, 2, 3 (value값이 출력된다) */

 

[참고링크]

MDN for ...of : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...of

MDN for ...in : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...in