[JavaScript] 배열과 유사배열객체 그리고 .. forEach is not a Function... 에러

[JavaScript] 배열과 유사배열객체 그리고 .. forEach is not a Function... 에러

 

 

jQuery 라이브러리에서 Native Js를 하려고 코드를 정리하려 $. each function을 forEach로 바꾸던 중 간간히 아래와 같은 에러로그가 떴다.

 

 

 

처음엔 배열이 아닌가보다 대수롭게 넘겼다가 저 에러를 한 번 더 마주친 후에 유사배열객체에 대해서 잠시 잊고있었다..

 

그래서 잠시 정리를 하고 넘어가려한다.

 

 

 

일단, 배열도 유사배열도 모두 객체인 것은 알고 있는가?

 

 

 

배열

 

1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용, 자바스크립트의 배열은 객체이며 유용한 내장 메소드를 포함

 

 

유사배열 (유사배열 객체)

 

배열이 아닌데 배열인척 하는 것

조건
1. 반드시 length가 필요하다.
2. index의 번호가 0번부터 시작해서 1씩 증가해야한다.

 

 

쉽게 말해

 

배열 = 객체 + length + 메서드

유사배열 = 객체 + length

 

로 이해해도 된다.

 

 

 

예제

 

var array = [1, 2, 3, 4];
var node = document.querySelector('div'); 
var ele = document.body.children;

console.log(array);		// [1, 2, 3, 4]
console.log(node);		// NodeList [div, div, div]
console.log(ele);		// HTMLCollection [noscript, div, div, script, ...]

 

Native JS를 하면서 node나 ele와 같은 유사배열객체를 가지고 Array라고 착각하고 많이 실수한다.

 

겉으로만 봐서는 length 속성도 있고, [] 로 감싸져 있기때문에 배열과 유사배열객체의 차이를 구별하기 어렵다

 

 

이럴때는 Array.isArray 메서드를 사용해서 구분할 수 있다.

 

Array.isArray(array);	// true	
Array.isArray(node);	// false
Array.isArray(ele);	// false

 

 

배열 메서드인 forEach를 아래와 같은 배열에 사용해야하는데,

 

array.forEach(function(ele, index, array){
	console.log(ele, index, array);
});

// 1, 0
// 2, 1
// 3, 2
// 4, 3

 

 

유사배열객체에 사용했으니 위와같은 에러가 반복될 수 밖에 없었던 것이다.

 

ele.forEach(function(ele, index, array){
	console.log(ele, index);
});

// Uncaught TypeError: ss.forEach is not a function

 

 

유사배열은 말그대로 배열과 유사한 형태로 흉내낸 객체일 뿐이기 때문에 Array 에서 제공하는 메서드가 기본적으로 제공되지않는다.

 

 

예외적으로 node같은 경우는 프로토타입에 forEach가 있기 때문에 가능하다. (필요하다면 직접 프로토타입에 사용하고 싶은 메서드나 함수를 추가하여 사용할 수 있다.)

 

 

 

 

유사배열객체에 배열메서드를 간단하게 활용할 수 있는 방법

 

 

 

call을 활용하여 유사배열객체를 call의 첫번째 인자로 넘겨줘야한다.

 

[].forEach.call(ele, function(element, index, array){
	console.log(element, index);
});

// element, index ...

 

 

 

call이란 간단히 말해 함수 호출 방법 중 하나로 메서드의 첫번째 인자로 전달되는 객체를 this로 지정할 수 있다.

 

자세한 내용은 다음 게시물을 참고하자

[JavaScript] 자바스크립트 함수 호출 방법2 :내가 원하는 객체를 this로?