Array-like objects [javascript] :: 마이구미

이번 글은 자바스크립트에서의 "Array-like objects" 를 다뤄본다.

Array-like objects 익숙하지 않는 용어일 수도 있다.

그대로 해석하면 배열 같은 객체? 한번 알아보자.

자바스크립트에서 몇몇 객체는 배열처럼 보이지만, 실제로 배열은 아니다.

이것이 바로 Array-like objects 라고 불린다.

Array-like objects의 조건은 아래와 같다.

• 배열처럼 인덱스로 접근이 가능하고, length 속성이 존재한다.
• 실제 배열의 네이티브 메소드인 push, forEach, indexOf 와 같은 메소드는 존재하지 않는다. (Array Document)

Array-like objects의 두가지 예로는 아래와 같다.

• document.getElementsByClassName() 의 결과
• arguments

Array-like objects를 구별해야하는 이유를 arguments를 예로 간단히 살펴보자.

function fnc() {
	console.log(arguments[0] + " " + arguments[1]);
	arguments.indexOf(4);
}

fnc(1,2,3,4);

위의 코드를 실행하면 어떻게 될까?

arguments는 전달인자들을 배열형태로 전달받을 수 있다.

그렇기에, 콘솔창에는 1 2 가 출력되는 것을 볼 수 있다.

하지만 에러도 함께 뜨는 것을 볼 수 있을 것이다.

1 2
Uncaught TypeError: arguments.indexOf is not a function

배열처럼 인덱스로 접근할 수 있지만, 실제 배열이 아니기 때문에 indexOf 메소드가 없다는 에러가 뜬다.

이러한 형태를 띄는 것이 Array-like objects이다.

Array-like objects는 실제 배열이 아니기 때문에, 위처럼 에러를 초래할 수 있다.

대부분 Array-like objects에서 배열 형태로 바꾸어 사용한다.

Array.prototype.slice.call(arguments);

그 중 많이 알려진 방법으로 위처럼 slice, call을 활용한다.

실제로 코드를 작성하여 테스트 해보길 바란다.

자세한 사항은 아래 링크들을 참고하길 바란다.

Array-like objects 참고 URL

http://2ality.com/2013/05/quirk-array-like-objects.html

Array.prototype.slice()

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/slice