자바스크립트 for in vs for of 반복문 정리

[ipadorusa]

1. forEach

   arr.forEach(callback[, thisArg]); es6 (Map,Set)에서도 사용할수 있다

   • callback
   • currentValue 처리할 현재 요소.
   • index (Optional) - 처리할 현재 요소의 인덱스.
   • array (Optional) - 호출한 배열.
   • [thisArg] - callback을 실행할 때 this로 사용할 값.

     const items = ['item1', 'item2', 'item3'];
     items.forEach(function(item) {
     console.log(item);
     });
     // 출력 결과: item, item2, item3

2. for in = iterates over the enumerable properties of an object es6 이후 속성(edge 부터 지원)

   • variable 매번 반복마다 다른 속성이름(Value name)이 변수(variable)로 지정된다.
   • object 반복작업을 수행할 객체로 열거형 속성을 가지고 있는 객체. properties에 접근(값이 아닌=not the values)

     
     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"

3. for of = iterates over the property values of objects
for of 반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문입니다. for of 구문을 사용하기 위해선 컬렉션 객체가 [Symbol.iterator] 속성을 가지고 있어야만 합니다(직접 명시 가능).

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

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

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

for in vs for of 

let myString = "test"; for (let i in myString) {   console.log(i);// logs 0, 1, 2, 3 }

for (let i of myString) {   console.log(i);// logs t, e, s, t }

const a = [ {a:1,b:2,c:3} ]

for (const item in a) { console.log(item, a[item]) // 0 , {a:1,b:2,c:3} }

for (const item of a) { console.log(item) // {a:1,b:2,c:3} , undefined }