Iterables 이터러블 for in for of 차이

Iterables 이터러블?

객체가 Symbol.iterator프로퍼티에 대한 구현을 가지고 있다면 이터러블이라고 할 수 있다. Array, Map, Set, String, Int32Array, Uint32Array 등과 같은 일부 내장 타입에는 이미 Symbol.iterator 프로퍼티가 구현되어 있으며 객체의 Symbol.iterator 함수는 반복할 값 목록을 반환합니다.

`for..of` 문

for..of는 객체의 Symbol.iterator 프로퍼티를 호출하여, 이터러블 객체를 반복합니다.

예시) 배열의 간단한 for..of 루프

let someArray = [1, "string", false];

for (let entry of someArray)
 console.log(entry); // 1, "string", false
}

`for..of` vs `for..in` 문의 공통점

for..of 및 for..in 문 모두 목록을 반복합니다.

for of VS for in 차이점

반복되는 값은 다르다.

for..in: 반복되는 객체의 키 목록을 반환한다. Key

for..of: 반복되는 객체의 숫자 프로퍼티 값 목록을 반환한다. Value

let list = [4, 5, 6];

for (let i in list){
 console.log(i); // "0", "1", "2"
}

for (let i of list){
 console.log(i); // "4", "5", "6"
}

작동에서의 차이점

for..in: 모든 객체에서 작동하고 객체의 프로퍼티를 검사하는 방법으로 사용됩니다.

for..of: 이터러블 객체의 값에 주로 관심이 있습니다. Map 및 Set과 같은 내장 객체는 저장된 값에 접근할 수 있는 Symbol.iterator 프로퍼티를 구현합니다.

let pets = new Set(["Cat", "Dog", "Hamster"]);
pets["species"] = "mammals";

for (let pet in pets){
 console.log(pet); // "species"
}

for (let pet of pets){
 console.log(pet); // "Cat", "Dog", "Hamster"
}

코드 생성 (Code generation)

ES5 및 ES3 타게팅 (Targeting ES5 and ES3)

ES5 또는 ES3-호환 엔진을 대상으로 하는 경우, 반복자는 Array 유형의 값만 허용합니다. 이런 배열이 아닌 값이 Symbol.iterator 프로퍼티를 구현하더라도 배열이 아닌 값에서 for..of 루프를 사용하면 오류가 발생합니다.

컴파일러는 for..of 루프에 대한 간단한 for 루프를 생성합니다, 예를 들면:

let numbers = [1, 2, 3];
for (let num of numbers){
 console.log(num);
}

는 다음과 같이 생성합니다:

var numbers = [1, 2, 3];
for (var _i = 0; _i < numbers.length; _i++){
 var num = numbers[_i];
 console.log(num);
}

ECMAScript 2015 및 상위 버전 타케팅 (Targeting ECMAScript 2015 and higher)

ECMAScipt 2015-호환 엔진을 타케팅하는 경우, 컴파일러는 엔진의 내장 반복자 구현을 대상으로 하는 for..of 루프를 생성합니다.

Iterables 이터러블 for in for of 차이