for...in / for... of loop diff - javascript

const arrayExample = ['내','가','최','고'];

/* 1 : for in loop */
for (let z in arrayExample){
  console.log("for in loop - ", arrayExample[z]);
}
/* basic for문과 for in loop 은 반복변수에 index를 리턴
   예시는 배열이지만 object 에도 사용 가능 */




/* 2 : for of loop */
for (let z of arrayExample){
  console.log(z);
}

/* 3 : forEach */
arrayExample.forEach(function(j){
  console.log(j);
});

/* for of 와 forEach는 해당 값을 리턴 */

 

/* using for in loop */


//Not Recommended:
myObj = {'firstName':'Ada','secondName':'Lovelace'};
for (const key in myObj) {
    console.log(myObj[key]);
}

//Recommended:
myObj = {'firstName':'Ada','lastName':'Lovelace'};
for (const key in myObj) {
    if (myObj.hasOwnProperty(key)) {
        console.log(myObj[key]);
    }
}

 

 

//for in 반복문과 for of 반복문의 차이점
//for in 반복문 : 객체의 모든 열거 가능한 속성에 대해 반복
//for of 반복문 : [Symbol.iterator] 속성을 가지는 컬렉션 전용


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

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

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

for (var value of iterable) {
  console.log(value); // 3, 5, 7
}

/* 출처 : https://jsdev.kr/t/for-in-vs-for-of/2938 */

참고 자료

https://aljjabaegi.tistory.com/354 

https://bitsofco.de/for-in-vs-for-of/

http://jsben.ch/BQhED (성능 비교 : 그냥 basic for문 쓰는게 젤 빠르다. 모든 브라우저에서 사용할 수 있으며..)

https://jsperf.com/native-map-reduce-vs-for/2 (성능 비교)