eslint가 for..in으로 화낼 때 화해하기

for..in loops iterate over the entire prototype chain, which is virtually never what you want. Use Object.{keys,values,entries}, and iterate over the resulting array.

---

왜 화낼까?

 

에러 메시지를 읽어보면...

 

for..in 루프는 전체 프로토타입 체인을 반복하는데 이건 너가 원하는 것이 아닐 것이다.

Object.{keys,values,entries}를 사용하고 배열을 반복하라.

 

즉 for .. in을 쓰면 프로토타입까지 반복한다는 것이다.

const arr = [1, 2, 3, 4, 5];

let result = "";

for (const element in arr) {
  result += element.toString() + " ";
}
console.log(result);

console.log("--------------------");
Array.prototype.hi = "hi";

result = "";

for (const element in arr) {
  result += element.toString() + " ";
}
console.log(result);

// result
// 0 1 2 3 4
// -----------------------------
// 0 1 2 3 4 hi

 

 

object도 마찬가지일까 싶어서 해봤다.

const obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4,
  e: 5,
};

let result = "";

for (const element in obj) {
  result += element.toString() + " ";
}
console.log(result);

console.log("--------------------");
Object.prototype.hi = "hi";

result = "";

for (const element in obj) {
  result += element.toString() + " ";
}
console.log(result);

// result
// a b c d e
// --------------------
// a b c d e hi

 

그렇다면 다른 객체를 상속받는 경우에는 어떨까??

const obj1 = {
    "a" : 1,
    "b" : 2,
    "c" : 3,
    "d" : 4
}

const obj2 = Object.create(obj1)
console.log(obj2) // {}
obj2.bb = 10
console.log(obj2) // {"bb" : 10 }

obj1.e = 5
console.log(obj1) // {a: 1, b: 2, c: 3, d: 4, e: 5}
console.log(obj2) // {"bb" : 10 }

let result1 = ''
for (const ele in obj2) {
  result1 += ele + " "
}
console.log(result1) // bb a b c d e

let result2 = ''
Object.keys(obj2).forEach((ele) => result2 += ele + " ")
console.log(result2) // bb

 

forEach를 활용하면 상속된 프로퍼티까지는 가져오지 않는 모습이다. 그래서 eslint가 화내는 것이다!

 

그리고 for ... in을 사용한다면 순서가 보장되지 않는다고 하는데 나는 잘 모르겠다..

그 예제를 찾을 수 없다.. 어떻게 해야 안되는거지?? symbol을 통해서 하면 안된다고 하는데 현재 Chrome환경에서는 너무 잘되고 있다.

key에 정수랑 string을 섞든, string만 쓰던간에 알파벳은 알파벳끼리, 숫자는 숫자끼리 object를 선언하자마자 정렬되어 있어서 keys()를 쓰던, for ... in을 하던 그대로 나온다.

혹시 아시는 분 계시면 댓글 주시면 정말로 감사하겠습니다!!

 

아무튼, 내가 찾아본 결과로는 for ... in은 상속된 것까지 반복하기에 원하지 않는 것까지 반복될 수 있다는 것!