자바스크립트 / for ... of & for ... in 차이점

1. for of

for...of 명령문은 반복가능한 객체 (Array, Map, Set, String, Typedrray, arguments 객체 등을 포함) 에 대해서 반복합니다. 객체 데이터 값에 대한 순회. 

 

const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}

// expected output: "a"
// expected output: "b"
// expected output: "c"

 

for (variable of iterable) {
  statement
}

 

variable : 각각의 순회 요소들은 각각 변수에 할당됩니다. 변수들은 const, let을 통해 선언될 수 있습니다. 

iterable : 반복되는 열거가능(enumerable)한 속성이 있는 객체. (Array, Map, Set, String, Typedrray, arguments 객체..)

 

 

- String에 대한 반복

 

let iterable = "boo";

for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"

 

- Map에 대한 반복

 

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let entry of iterable) {
  console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]

for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

 

- Set에 대한 반복

 

let iterable = new Set([1, 1, 2, 2, 3, 3]);

for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3

 

- DOM 컬렉션에 대한 반복

NodeList 같은 DOM 컬렉션에 대해 반복: 다음 예는 article의 직계 자손인 paragraph에 read 클래스를 추가합니다:

// 주의: 이는 NodeList.prototype[Symbol.iterator]가
// 구현된 플랫폼에서만 작동합니다
let articleParagraphs = document.querySelectorAll("article > p");

for (let paragraph of articleParagraphs) {
  paragraph.classList.add("read");
}

 

2. for in

 

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

 

for (variable in object) { ... }

variable : 매번 반복마다 다른 속성이름(Value name)이 변수(variable)로 지정됩니다.

 

object : 반복작업을 수행할 객체로 열거형 속성을 가지고 있는 객체.

 

const object = { a: 1, b: 2, c: 3 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}

// expected output:
// "a: 1"
// "b: 2"
// "c: 3"

 

- for ...of 와 for ...in의 차이

for ...in은 객체의 모든 열거가능한 속성에 대해 반복합니다.

for...of 구문은 컬렉션 전용입니다. 모든 객체보다는, [Symbol.iterator] 속성이 있는 모든 컬렉션 요소에 대해 이 방식으로 반복합니다.

(순회가 가능한 요소에 대하여.)

 

다음 예는 for...of 루프와 for...in 루프의 차이를 보입니다.

Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};

let iterable = [3, 5, 7];
iterable.foo = "hello";

for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}