[JavaScript] 유사배열 (NodeList)에 forEach 메서드 사용하기

아래 사진과 같이 순차적으로 사진을 display 하는 방법을 알아보고 있었는데
querySelectorAll()로 이미지박스들의 노드리스트를 뽑아
setTimeout()로 순차적으로 css 클래스를 부여하는 방법으로 하려고 했는데 어쩐일인지 적용이 안됨

찾아보니 NodeList는 유사배열이라 Array 메서드 사용이 불가능했다.
노드리스트가 배열이 아닌건 알고 있었는데 forEach를 사용할 수 없는 건 처음 알았다.

var array = [1, 2, 3];		//베열 [ 1, 2, 3 ]
var nodeList = document.querySelectorAll('a'); // 노드리스트 [a , a, a...]

직접 [] 리터럴을 사용해서 선언한 배열만 배열이다.
물론 유사배열도 인덱싱할 수 있고, .length 속성 같은 거는 사용이 가능한데
Array 메서드 사용 가능 여부 때문에 구분을 해야한다.

노드리스트에 forEach 메서드를 직접 사용할 수 없으니 다른 방법을 찾아봤다.

var nodeList = document.querySelectorAll('img');		//노드리스트

Array.prototype.forEach.call(nodeList, function(item){
	console.log(item);
})

Array.prototype.forEach.call 메서드로 유사배열 객체에 대해forEach 메서드를 빌려서 사용할 수 있다!

forEach.call로 이미지를 순차적으로 표시하는 코드를 짰다.

var kbImgs = document.querySelectorAll(".kb div");  //커비 이미지박스 노드리스트
var i = 1;
//순차적으로 별의 커비 이미지가 보이도록 함
//노드 리스트는 엄밀히 배열이 아니므로 forEach.call 메서드를 사용하면 Array의 메서드를 빌려사용할 수 있다.
Array.prototype.forEach.call(kbImgs, function(kbImg){
    setTimeout(function(){ kbImg.classList.add("visible")} , 300*i);
    if(i >= 7 ){        //7번째 사진 (별의커비 로고)부터 다른 사진이 뜨는 속도의 2배 느리게 보이도록 함
        i += 2;
    } else {
        i++;
    }
})

이제 이미지가 순차적으로 잘 뜬다.

결론: 유사배열에는 forEach.call 메서드를 사용하자.