var SportObject = new Object();

SportObject[0] = '농구';

SportObject[1] = '마라톤';

new 연산자를 사용하여 Object 클래스의 Object() 메서드를 호출하면 var로 선언한 이름의 오브젝트가 생성된다. SportObject[0] = '농구'에서 SportObject[0]은 배열의 첫 번째 엘리먼트에 ‘농구’를 설정하며, SportObject[1] = '마라톤'은 배열의 두 번째 엘리먼트에 ‘마라톤’을 설정한다.

$('show1').innerHTML  = SportObject[0];

$('show2').innerHTML  = SportObject[1];

배열 인덱스를 사용하여 배열의 엘리먼트 값을 출력한다. 자바스크립트는 이와 같이 Array 클래스를 사용하지 않고 Object 클래스를 사용하여 오브젝트를 생성하고 이 오브젝트를 배열로 사용할 수 있다.

SportObject['swim'] = '수영';

$('show3').innerHTML = SportObject['swim'];

배열은 인덱스를 가지고 있어야 하며 이 값은 정수이어야 한다는 것이 일반적인 정설이다. 그런데 위의 코드를 보면 문자열 ‘swim’을 인덱스로 사용하여 ‘수영’을 배열의 엘리먼트 값으로 설정하고 있다. SportObject는 오브젝트이며 앞에서 SportObject[0], SportObject[1]의 형태로 사용했으므로 이번에는 SportObject[2]가 되어야 한다. 그런데 숫자를 사용하지 않고 SportObject['swim']와 같이 문자열이 사용하였는데도 배열이 형성되고 값이 설정된다.

문자열을 사용할 수 있다는 것은 이해하기 쉽도록 의미를 부여할 수 있다. 값이 설정될 배열의 위치를 고려하지 않아도 되며, 유일한 이름만 부여하면 배열에 추가된다. 자바스크립트에서 배열은 일반적으로 말하는 배열의 개념과는 차이가 있으며, 타 언어에 비해 확장성이 매우 좋다.

배열의 장점은 인덱스를 증가시켜 가면서 배열을 처리한다는 점이다. 하지만 ['swim'] 형태의 인덱스는 for()문을 사용하여 반복 처리를 할 수 없다. 이를 위해 자바스크립트는 for(in) 메서드를 제공하고 있다. 그렇지만 SportObject[0], [1]과 같이 일정한 규칙을 가진 형태는 Array() 클래스를 사용하여 배열을 정의하는 게 좋다. 왜냐하면 Array() 클래스에는 sort() 메서드와 같이 배열 전용의 메서드가 있으므로 이러한 메서드를 사용하여 배열을 쉽게 처리할 수 있기 때문이다.

$('show4').innerHTML  = SportObject['notDefine'];

어떻게 처리되는지 보기 위해 배열에 없는 인덱스를 지정하여 출력하였다. 에러가 나는 게 당연한데, ‘undefined’이 출력되었다. 아량이 넓어도 너무 넓은 거 같다. 없는 건 과감하게 에러가 나야 하는데, 친절하게 ‘정의되어 있지 않았다’고 안내까지 한다.

위의 결과에 대해 다른 관점에서 생각해보면 인덱스가 아니라는 생각이 든다. [0], [1]은 인덱스라고 볼 수 있지만, [‘swim’]은 인덱스라고 보기에는 어려운 점이 있다. 그럼, 혹시 자바스크립트가 인덱스 처리를 하지 않는 게 아닌가 하는 생각이 든다. 답은 ‘그렇다’ 이다. 자바스크립트는 정수 인덱스를 문자열로 변환하여 참조(연상, 연관, associative array) 배열로 배열 처리를 한다. 그래서 [0]과 [‘swim’]을 하나의 배열에 설정할 수 있으며, 배열에 없는 인덱스를 사용해도 ‘정의되어 있지 않았다’는 안내를 받을 수 있다.

이 개념은 매우 중요하다. 자바스크립트의 객체지향 구현은 이런 개념을 바탕으로 구현하기 때문이다. 사전에 정의도 하지 않은 변수를 배열의 인덱스로 사용하더라도 배열에 차곡차곡 쌓인다. 그렇다면 이건 배열이 아니다. 배열의 탈을 쓴 다른 무엇인가가 있다. 필자는 이것을 나열이라고 생각한다. 그런데 나열만 하면 떨어지게 되므로 나열된 걸 서로 관련성이 있도록 고리를 만들어 연결한 것이라고 생각한다.