[JavaScript/DeepDive]27.배열(1)

• [27.1] 배열이란?
• const arr = ['apple', 'banana', 'orange'];
• 배열이 가지고 있는 값을 요소라고 부른다.
• 자바스크립트의 모든 값은 요소가 될 수 잇다.
  • 즉, 원시값은 물론 객체, 함수, 배열 등 자바스크립트에서 값으로 인정하는 모든 것은 배열의 요소가 될 수 있다.
• 배열의 요소는 배열에서 자신의 위치를 나타내는 0 이상의 정수인 인덱스를 갖는다.
• 배열은 요소의 개수, 즉 배열의 길이를 나타내는 length 프로퍼티를 갖는다.
  • arr.length // ->3
• 배열은 인덱스와 length 프로퍼티를 갖기 때문에 for 문을 통해 순차적으로 요소에 접근할 수 있다.
  • // 배열의 순회
    for ( let i = 0; i < arr.length; i++) {
         console.log(arr[i]); // 'apple' 'banana' 'orange'
    }
• 자바스크립트에 배열이라는 타입은 존재하지 않는다.
  • 배열은 객체 타입이다.
• 배열의 장점은 처음부터 순차적으로 요소에 접근할 수도 있고, 마지막부터 역순으로 요소에 접근할 수도 있으며, 특정 위치부터 순차적으로 요소에 접근할 수도 있다는 것이다.

 

 

 

• [27.2] 자바스크립트 배열은 배열이 아니다.
• 배열의 요소는 하나의 데이터 타입으로 통일되어 있으며 서로 연속적으로 인접해 있다.
  • 이러한 배열을 밀집배열이라 한다.
• 자바스크립트의 배열은 자료구조에서 말하는 일반적인 의미의 배열과 다르다.
  • 즉, 배열의 요소를 위한 각각의 메모리 공간은 동일한 크기를 갖지 않아도 되며, 연속적으로 이어져 있지 않을 수도 있다.
    • 배열의 요소가 연속적으로 이어져 있지 않는 배열을 희소 배열이라 한다.
• 자바스크립트의 배열은 일반적인 배열의 동작을 흉내 낸 특수 객체다.
• 일반적인 배열과 자바스크립트 배열의 장단점을 정리해보면 다음과 같다.
  • 일반적인 배열은 인덱스로 요소에 빠르게 접근할 수 있다.
    • 하지만 특정 요소를 검색하거나 요소를 삽입 또는 삭제하는 경우에는 효율적이지 않다.
  • 자바스크립트 배열은 해시 테이블로 구현된 객체이므로 인덱스로 요소에 접근하는 경우 일반적인 배열보다 성능적인 면에서 느릴 수밖에 없는 구조적인 단점이 있다.
    • 하지만 특정 요소를 검색하거나 요소를 삽입 또는 삭제하는 경우에는 일반적인 배열보다 빠른 성능을 기대할 수 있다.

 

 

 

• [27.3] length 프로퍼티와 희소 배열
• legnth 프로퍼티는 요소의 개수, 즉 배열의 길이를 나타내는 0 이상의 정수를 값으로 갖는다.
• length 프로퍼티의 값은 빈 배열일 경우 0이며, 빈 배열이 아닐 경우 가장 큰 인덱스에 1을 더한 것과 같다.
  • [ ].length // -> 0
• length 프로퍼티의 값은 배열에 요소를 추가하거나 삭제하면 자동 갱신된다.
• length 프로퍼티 값은 요소의 개수, 즉 배열의 길이를 바탕으로 결정되지만 임의의 숫자 값을 명시적으로 할당할 수도 있다.
  • const arr = [1,2,3,4,5];
    // 현재 length 프로퍼티 값인 5보다 작은 숫자 값 3을 length 프로퍼티에 할당
    arr.length = 3;
    
    // 배열의 길이가 5에서 3으로 줄어든다.
    console.log(arr); // [1,2,3]
• 배열의 요소가 연속적으로 위치하지 않고 일부가 비어 있는 배열을 희소 배열이라 한다.
• 일반적인 배열의 length는 배열 요소의 개수, 즉 배열의 길이와 언제나 일치한다.
  • 하지만 희소 배열은 length와 배열 요소의 개수가 일치하지 않는다.
    • 희소 배열의 length는 희소 배열의 실제 요소 개수보다 언제나 크다.
• 배열을 생성할 경우에는 희소 배열을 생성하지 않도록 주의하자.
• 배열에는 같은 타입의 요소를 연속적으로 위치시키는 것이 최선이다.

 

 

 

• [27.4] 배열 생성
• 배열 리터럴
• 배열 리터럴은 0개 이상의 요소를 쉼표로 구분하여 대괄호([ ])로 묶는다.
• 배열 리터럴은 객체 리터럴과 달리 프로퍼티 키가 없고 값만 존재한다.
  • const arr = [1,2,3];
    console.log(arr.length);
• 배열 리터럴에 요소를 생략하면 희소 배열이 생성된다.
• Array 생성자 함수
• Array 생성자 함수는 전달된 인수의 개수에 따라 다르게 동작하므로 주의가 필요하다.
• 전달된 인수가 1개이고 숫자인 경우 length 프로퍼티 값이 인수인 배열을 생성한다.
  • const arr = new Array(10);
    console.log(arr); // [empty * 10]
    console.log(arr.length); // 10
• 이때 생성된 배열은 희소 배열이다.
• 전달된 인수가 없는 경우 빈 배열을 생성한다.
• 전달된 인수가 2개 이상이거나 숫자가 아닌 경우 인수를 요소로 갖는 배열을 생성한다.
  • new Arr(1,2,3) // -> [1,2,3]

 

 

 

• [27.5] 배열 요소의 참조
• 배열의 요소를 참조할 때는 대괄호([ ]) 표기법을 사용한다.
• 인덱스는 값을 참조할 수 있다는 의미에서 객체의 프로퍼티 키와 같은 역할을 한다.
  • const arr= [1,2];
    
    // 인덱스가 0인 요소를 참조
    console.log(arr[0]); // 1
    // 인덱스가 1인 요소를 참조
    console.log(arr[1]); // 2
• 존재하지 않는 요소에 접근하면 undefined가 반환된다.

 

 

 

• [27.6] 배열 요소의 추가와 갱신
• 객체에 프로퍼티를 동적으로 추가할 수 있는 것처럼 배열에도 요소를 동적으로 추가할 수 있다.
• 존재하지 않는 인덱스를 사용해 값을 할당하면 새로운 요소가 추가된다.
  • 이때 length 프로퍼티 값은 자동 갱신된다. 
    • const arr = [0];
      
      // 배열 요소의 추가
      arr[1] = 1;
      console.log(arr); // [0,1]
      console.log(arr.length); // 2
• 이미 요소가 존재하는 요소에 값을 재할당하면 요소값이 갱신된다.
• 인덱스는 요소의 위치를 나타내므로 반드시 0 이상의 정수(또는 정수 형태의 문자열)를 사용해야 한다.
  • 만약 정수 이외의 값을 인덱스처럼 사용하면 요소가 생성되는 것이 아니라 프로퍼티가 생성된다.
    • 이때 추가된 프로퍼티는 length 프로퍼티 값에 영향을 주지 않는다.

 

 

 

• [27.7] 배열 요소의 삭제
• 배열은 사실 객체이기 때문에 배열의 특정 요소를 삭제하기 위해 delete 연산자를 사용할 수 있다.
• const arr = [1,2,3];
  
  // 배열 요소의 삭제
  delete arr[1];
  console.log(arr); // [1,empty,3]
  
  // length 프로퍼티에 영향을 주지 않는다. 즉, 희소 배열이 된다.
  console.log(arr.length); // 3
• 희소 배열을 만들지 않으면서 배열의 특정 요소를 완전히 삭제하려면 Array.prototype.splice 메서드를 사용한다.