[WEB] 웹 상의 전역변수 length

최근 자료구조를 공부하면서 타입스크립트로 자료구조를 구현해보고 있다. 힙을 구현해보는 과정에서 현재 힙의 크기를 length라는 이름으로 지정했는데, 분명 타입 문제가 없음에도 불구하고 어디선가 오류가 발생해서 힙 정렬이 제대로 동작하지 않는 문제가 있었다. 구현된 내용은 vite을 이용하여 웹 콘솔에서 출력했다.

 당시 코드의 일부는 다음과 같다.

export class ABHeap<HElem> {
    /**
     * priority: val1 > val2 를 반환하는 비교 함수
     */
    protected comp: Predicate<HElem>;
    list: HElem[];
    protected readonly maxLen: number;
    protected length: number = 0;
    //...
    delete() {
        if (this.isEmpty) {
            throw new Error("heap is empty");
        }

        const result = this.list[0]; // 첫번째 데이터 -> 반환
        this.length--; // 인덱스 0 기준이라, 마지막 데이터는 length - 1 위치에 존재.
        const last_data = this.list[this.length]; // 마지막 데이터 -> 비교하면서 삽입.
        this.list[length] = result;
    //....

 문제가 발생한 부분은 현재 코드에서 마지막 줄 부분으로, this를 빼먹은 것이 문제였다. 이 문제는 발견하기 까다로운데, 자바스크립트 및 타입스크립트를 사용하는 경우 IDE 상에서 length 전역변수를 자동완성으로 지원해주기 때문이다. 정확히 말하자면 웹 프론트 개발 환경에서 존재하는 변수로, node 같은 백엔드 환경에는 없다.

length가 var 변수로 선언되어 있는 모습

  그렇다면 length 전역 변수는 어디에 사용될까?

---

window.length

https://developer.mozilla.org/ko/docs/Web/API/Window/length

Window.length - Web API | MDN

 웹 상에서 length 변수는 화면과 관련된 정보를 가지고 있는 객체의 프로퍼티 중 하나로, 현재 화면 내의 frame 또는 iframe의 개수를 의미한다. iframe은 현재 문서에 다른 html 문서를 삽입할 때 사용하는 태그 중 하나로, 유튜브 영상 등 외부 API을 페이지에 둘 때 사용된다.

 window.length 프로퍼티를 length 라는 이름으로 사용할 수 있는 것은 웹 환경의 특징 때문이다. 웹 환경에서 var로 변수를 선언하면 window 객체와 자동으로 연결된다. 다음 예시를 보자.

웹 환경에서 여러 변수를 선언하고 출력해본 모습

 my_apple 및 my_ball은 var 변수로 선언했지만 window 객체로 접근이 가능했다. 반대로 window 객체의 프로퍼티로 선언한 my_cat은 단순히 my_cat으로 접근이 가능하다. 이 예시에서 볼 수 있듯이 웹 환경에서 window 객체는 전역객체로 동작하기 때문에 변수를 var로 선언하는 경우 window 객체에 등록된다. 따라서 window.length 역시 단순히 length로 접근할 수 있는 것이다.

https://www.w3schools.com/jsref/prop_win_length.asp

Window length Property

 w3schools에서 length 기반으로 현재 페이지 상의 프레임들을 의미하는 frames을 순회하는 예제를 제시한다. 다만 실제로 프레임 전체에 대한 처리가 필요한 경우가 있을지는 잘 모르겠다.

---

결론

 프론트엔드 환경에서 전역변수 length는 window.length로, 현재 페이지 상의 iframe 등 삽입되는 html 요소의 개수를 의미한다. 프레임들은 for문 및 window.frames[ ] 을 통해 순차 접근이 가능하다.

 이처럼 window.length는 웹 환경에서 의미를 가지고 미리 선언된 변수이므로, 프론트엔드 코드를 작성할 때 length 변수를 전역(var)으로 선언해서 덮어쓰지 않도록 조심하자.