한빛출판네트워크

저자: 버디 커니완(Budi Kurniawan), 역 전순재

객체들을 계층적으로 다루는 자바스크립트의 능력은 실제로도 유용한 애플리케이션을 수 없이 제공한다.

예를 들어, 윈도우의 익스플로러에서처럼 폴더 트리를 만들 수 있다. 익스플로러에서는 파일 디렉토리 시스템을 여기저기 옮겨 다닐 수 있을 뿐만 아니라 폴더 아이콘을 클릭하면 디렉토리를 열 수 있다. 또다른 예로는 XML-기반의 온라인 도움말 시스템이나 온라인 북의 목차를 들 수 있다.

자바스크립트로 객체를 다룰 경우, "배열 객체(array object)"를 사용하는 방법말고는 별다른 선택이 있지 않다. 본 기사에서는 자바스크립트로 다루는 배열 객체를 검토해 보겠다. 다음 기사에서는 다음과 같은 객체 트리와 작업하는데 필요한 처리 방법들을 설명하겠다. 객체 하나를 만들고, 그 루트에다 자손 객체를 추가하며, 그 객체 트리에서 객체 하나를 탐색하고, 객체 하나를 다른 객체에 추가하며, 그리고 객체를 삭제하는 법 등을 설명할 것이다.

배열 객체

배열은 자바스크립트에서 순서있는 데이터 집단을 처리하고 저장하는데 유일하게 사용할 수 있는 데이터 구조이다. 다른 프로그래밍 언어와는 달리, 자바스크립트 배열은 서로 다른 종류의 데이터를 자신의 요소로 저장하는데 사용된다.

이 개념을 더 깊이 파고 들어가면, 요소의 개수를 지정하지 않고서도 배열을 사용할 수 있다는 것을 알게 될 것이다. 배열은 마치 자바에서의 벡터 객체(Vector object)처럼 행동하여 아무 요소들을 추가할 수 있다.

그러나 배열 객체는 배열에서 요소 하나만을 삭제하기가 대단이 어렵다는 한가지 약점이 있다.

베열 만들기

배열을 만드는 작업은 아주 쉽다. new 키워드를 사용하여 변수에 Array()를 할당하기만 하면 된다.

var myArray = new Array();

자바스크립트 배열은 철저하게 동적이기 때문에 요소의 개수를 지정하는 것에 대해서는 걱정하지 않아도 된다. 배열이 생성되고 나면 언제든지 요소들을 추가할 수 있기 때문이다. 그렇지만 어떤 이유 때문에 배열의 크기를 미리 지정해야 한다면 다음과 같은 서술문을 사용하기 바란다.

var myArray = new Array(20);

배열 요소는 0에서부터 세기 시작한다. 위와 같이 배열의 크기를 20 요소로 지정할 경우, 배열은 0에서부터 19까지 요소의 지표를 갖게된다.

배열은 length 특성도 가지고 있다. length 특성은 주어진 배열 크기보다 더 큰 지표를 가진 요소를 추가하면 자신을 조절한다. 예를 들어 목록 1의 코드에서, 배열은 크기가 20 요소로 먼저 정의 되었고, 그리고 그 배열에 21번째 요소가 추가된다. length 특성은 저절로 조정된다.

---

목록 1: 배열 만들기

---

배열 채우기

값들을 배열의 요소에 할당하면 배열을 채울 수 있다. 예를 들어 목록 2의 코드에서 myArray라고 부르는 배열이 생성되고 첫 번째와 두 번째 요소를 채우고 있다고 하자. 이 경우, 첫 번째 요소는 숫자이고 두 번째 요소는 문자열이다. 요소가 모두 같은 데이터 형이어야 하는 다른 언어와는 다르게, 자바스크립트에서는 다양한 형의 요소들로 배열을 채우는 것이 적법하다.

---

목록 2: 배열 채우기

목록 3의 코드에서 보여주는 것처럼, 심지어 배열을 또 다른 배열의 요소로 할당할 수도 있다.

---

목록 3: 배열을 또다른 배열의 요소로 할당하기

---

배열을 채우고 만들어 내는 법을 알아야 자바스크립트로 객체 계층도와 작업하기 위한 기본적 토대가 된다.

"delete" 연산자

넷스케이프 네비게이터 4 이전까지 자바스크립트는 배열 요소를 지우는데 사용되는 delete 연산자를 가지고 있지 않았다. 그렇지만 곧 보게 되게 되듯이, delete 연산자는 요소를 지우는데 필요한 이상적인 방식이 아니다. 왜냐하면 배열의 length 특성을 감소시키지 않기 때문이다.

목록 4는 delete 연산자를 사용하여 배열에서 세 번째 요소를 삭제하는 코드를 보여준다. 세 번째 요소가 어떻게 변경되는지 주목하라.

---

목록 4: 배열 요소를 삭제하기

---

목록 4의 코드는 세 번째 요소가 delete 연산자를 사용하여 제거되기 전후에 각각 myArray의 length 특성과 그 배열의 세 번째 요소를 출력한다. 이 코드를 마이크로소프트 인터넷 익스플로러 4와5, 넷스케이프 네비게이터 4에서 실행하면, 다음과 같은 결과를 보게 될 것이다. 주목할 것은 length 특성이 세 번째 요소를 삭제한 후에도 여전히 변하지 않는다는 것이다.

    3
    third element.
    3
    undefined

코드를 넷스케이프 네이게이터 3에서 실행하면 다음과 같은 결과를 얻는다.

    3
    third element.
    3
    null

목록 5의 코드는 배열 요소 하나를 삭제하고 새로운 값을 지워진 요소에 재할당한다.

---

목록 5: 배열 요소를 삭제하고 새로운 값을 재할당한다.

---

목록 5의 코드를 인터넷 익스플로러 4와5, 넷스케이프 네비게이터 4에서 실행하면, 다음과 같은 결과를 얻는다.

    3
    second element.
    3
    undefined
    3
    new element.
    3
    third element.

delete 연산자가 실제로 요소를 메모리로부터 제거하지 않는다는 것은 확실하다. 그러므로, 가끔 배열 요소를 지울 다른 방법을 강구할 필요가 있다.

진짜로 배열 요소 지우기

지금까지 필자처럼 여러분도 delete 연산자에 실망했으리라 생각한다. 그렇지만 필자의 경험에 의하면 실제로 배열의 length 특성을 감소시킬 수 있으며, 효과적으로 마지막 요소를 제거할 수 있다. 목록 6의 코드를 살펴 보라.

---

목록 6: 진짜로 배열 요소 지우기

---

목록 6의 코드는 다음의 결과를 만들어 낸다.

    Array length : 2
    element 0 : first element.
    element 1 : second element.
    element 3 : undefined

이것을 보면 length 특성을 감소시키고 난후에, 마지막 요소가 진짜로 없어진 것을 알 수 있다. 배열에서 n번째 요소를 제거하는 크로스-브라우저 함수는 목록 7에 있다.

---

목록 7: deleteElement 함수

function deleteElement(array, n) {
  //n번째 요소를 배열에서 제거하기
  var length = array.length;
  if (n >= length || n<0)
    return;

  for (var i=n; i




이 코드는 n이 수치 값이라고 간주한다. 목록 8에 있는 코드를 살펴 보면 deleteElement 함수를 사용하고 있다.







목록 8: deleteElement 함수를 사용하기








목록 8의 코드는 myArray라고 부르는 배열을 만들고 채워 넣는다. 그리고 myArray 배열(Array) 객체를 루프하면서 length의 값과 그의 모든 요소들을 화면에 표시한다.
for (var i=0; i");

그리고나서 myArray의 두 번째 요소를 삭제하고 length 특성과 그 내용들을 다시 화면에 표시한다. 결과는 다음과 같다.
    length : 4
    element 0 : first element.
    element 1 : second element.
    element 2 : third element.
    element 3 : 4th
    length : 3
    element 0 : first element.
    element 1 : third element.
    element 2 : 4th


버디 커니완(Budi Kurniawan)은 호주 시드니에 적을 둔 독립 IT 컨설턴트로 인터넷과 객체지향 프로그래밍을 전문적으로 한다. 이 외에도 마이크로소프트 기술과 자바 기술을 가르친 경험이 있다.