[JavaScript] forEach is not a function error

[JavaScript] forEach is not a function error

문제

• javascript 상에서 forEach 구문을 돌렸지만 해당 에러 메시지가 뜨며 실행이 되지 않는다.

원인

• 배열이 아니기 때문이다. 다른 사람은 유사 배열이라 한다.
  • Array.isArray(forEach 수행에 실패한 객체) 를 돌려보면 된다.
  • 이게 참 어이가 없다. for 문은 돌아가는데 forEach는 안된다?
• 내 경우에는 document.getElementsByTagName('~')으로 받은 elements가 이에 속했다.
• 그럼 유사 배열이란 게 대체 뭔지 살펴보자
  • https://developer.mozilla.org/ko/docs/Web/API/Element/getElementsByTagName
  • getElementsByTagName은HTML collection을 반환한다
• HTMLCollection
  • https://developer.mozilla.org/ko/docs/Web/API/HTMLCollection
  • 순서대로 정렬된 일반 컬렉션(arguments처럼 배열과 유사한 객체)
  • 속성 : length
  • 그니까 짭 배열 객체 라 이거다.
• forEach
  • Array.prototype.forEach()
  • https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
  • Array 만 취급하니까 당연히 돌아갈 리가 없다.

혹시 Collection.prototype.forEach() 막 이런 거 검색하면 나올까?

그런거 없다

arguments를 살펴보면

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/arguments

참고: "Array 형태"란 arguments가 length 속성과 더불어 0부터 인덱스 된 다른 속성을 가지고 있지만, Array의 forEach, map과 같은 내장 메서드를 가지고 있지 않다는 뜻입니다.

그러하다.

mozilla에서는 이 짭 배열 객체를 [ Array 형태 ] 란 이름으로 부르고 있었다.

forEach, map 좀 달아주면 어디 덧나나.

해결

Array.from( Array-형태-객체 ).forEach(
    function(element, index, array){ 
        // 적용하고 싶은 코드
        element.onclick = tagClickEvent; 
    }
);

위에서 계속 설명된 것과는 달리 무척 간단하다.

그니까 array 형태 객체를 array로 만들어서 돌리면 될 일이다.

happy 하다.

참조

• https://github.com/dabeng/JSON-Loop/issues/1
• https://haenny.tistory.com/86