• Array-like objects [javascript] :: 마이구미
    Javascript 2017. 4. 21. 19:58
    반응형

    이번 글은 자바스크립트에서의 "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.prototype.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

    반응형

    댓글

Designed by Tistory.