[객체 순회+hasOwnProperty] for-in, for-of, for-each

·2024년 6월 4일

자바스크립트

목록 보기
1/21
post-thumbnail

hasOwnProperty

"자신(own)의 속성(property)을 가지고(has)있는지 확인 방법"이 덮어쓰여질 수 있는 위험에 대처하는 안전한 방법은?
  • hasOwnProperty -> 객체에서 쓰면 훼손될 여지(함수로 정의해버린다던가)가 있으므로 조상에서 가져와서 쓴다. -> '빌려와서 쓴다' 개념 -> call 메서드 사용. -> call(a,b) a: 빌려쓸 객체 이름, b: 매개변수

  • Call -> 조상 아니더라도 쓸 수 있음. string 이 array의 능력을 쓰고 싶다던가. Array.prototype.forEach.call('hello', ()=>{})

for in : 열거 가능한 속성들 반환해줌.

  • enumerable : 열거 가능한
  • ().프로토타입 으로 바꾼 것도 나열해주니까 if문으로 해당 키를 그! 객체가 가지고 있는지 확인해주기
for (let key in javaScript) {
  if (Object.prototype.hasOwnProperty.call(javaScript, key)) {
    console.log(javaScript[key]);
  }
}
  • 순서가 중요한 배열에게 정확한 순서를 보장해주지 않음
  • ㄴ> 객체에 양보하자!
  • if문 안 쓰고 아예 조상 프로토타입에서 바꾼 거 안 보이게 하고 싶으면 defineProperty 사용해서 enumerable:flase 로 해주면 된다.
Object.defineProperty(Object.prototype, "nickName", {
  enumerable: false,
});

for (let key in javaScript) {
  console.log(javaScript[key]);
}

for of : 이터러블한 요소 반환해줌

  • 이터러블한 거? string, array
  • ㄴ> 유사배열객체는 이터러블 하지 않게 때문에 안 돌아감.(HTMLCollection 같은 DOM 컬렉션 객체는 예외다! 유사배열객체여도 이터러블하다.)
  • 이터러블한 거 어떻게 확인해? Symbol(Symbol.iterator) 가 들어있으면 돌릴 수 있다. (강제로 유사배열객체에 넣으면 돌아감)

이터러블은 Symbol.iterator(이터러블 객체)가 구현된 객체이다. Symbol.iterator는 for...of 반복문 및 스프레드 연산자와 같은 기능을 제공하여 Array, Map, Set과 같은 기능을 제공하게 하는 프로토콜이다.

for in 은 잘 안 쓴다. -> 객체도 for of 로 쓴다. -> 근데 객체는 이터러블 아니잖아 -> 객체를 배열로 만들면 됨!

const keys = Object.keys(arrayLike);

for(let value of keys){
	console.log(value);
}

for-each

  • forEach는 배열의 메서드다!
  • forEach(callbackFn)
    forEach(callbackFn, thisArg)
  • callbackFn 에 매개변수는 element, index, array
  • forin 이랑 forof 합쳐둔 것처럼 생겼다


참조
https://ko.javascript.info/iterable

profile
'한 번 더!'의 가능성을 믿어! 오늘도 열심히 굴러가 보는 프론트엔드 개발자 😎

0개의 댓글