Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

자바스크립트 배열 객체의 속성 완벽 정리 – constructor부터 prototype까지


배열 객체란 무엇인가?

자바스크립트의 배열(Array) 객체는 하나의 변수에 여러 값을 저장할 수 있게 해주는 자료구조입니다. 배열은 동일한 타입의 요소들이 순서대로 나열된 고정 크기 컬렉션을 저장하며, 각 요소에는 인덱스를 통해 접근할 수 있습니다.

배열 객체의 주요 속성

자바스크립트 배열 객체가 제공하는 대표적인 속성은 다음과 같습니다.

번호속성 및 설명
1constructor
객체를 생성한 배열 함수에 대한 참조를 반환합니다.
2index
문자열 안에서 일치(match)한 위치의 0 기반(zero-based) 인덱스를 나타냅니다.
3input
이 속성은 정규 표현식 매치 결과로 생성된 배열에만 존재합니다.
4length
배열에 포함된 요소의 개수를 나타냅니다.
5prototype
객체에 새로운 속성과 메서드를 추가할 수 있도록 해줍니다.

예제: prototype 속성 활용하기

다음 예제는 prototype 속성을 사용하여 book 객체에 price 속성을 동적으로 추가하는 방법을 보여줍니다.

<html>
    <head>
        <title>JavaScript Array Object</title>
        <script>
            function book(title, author){
                this.title = title;
                this.author = author;
            }
        </script>
    </head>
    <body>
        <script>
            var myBook = new book("Java", "John");
            book.prototype.price = null;
            myBook.price = 300;
            document.write("Book title is : " + myBook.title + "<br>");
            document.write("Book author is : " + myBook.author + "<br>");
            document.write("Book price is : " + myBook.price + "<br>");
        </script>
    </body>
</html>

실행 결과

Book title is : Java
Book author is : John
Book price is : 300

위 실행 결과에서 볼 수 있듯이, book 생성자 함수에는 원래 price 속성이 정의되어 있지 않습니다. 하지만 book.prototype.price = null; 코드로 prototype에 속성을 추가한 뒤, myBook 인스턴스에 300이라는 값을 할당하면 정상적으로 출력됩니다. 이처럼 prototype 속성을 활용하면 기존 객체의 구조를 변경하지 않고도 새로운 속성이나 메서드를 유연하게 확장할 수 있습니다.