배열이란?

• 배열은 여러 개의 값을 순차적으로 나열한 자료구조

  • 사용 빈도가 굉장히 높다.

  • 그래서 자바스크립트는 배열을 다루기 위한 유용한 메서드를 다수 제공한다.

    • 즉, 서현님 파트가 아주 중요하니 뒤에 집중해주시길…

    const arr = ['apple', 'banana', 'orange'];
    
    arr[0]; // 'apple'
    arr[1]; // 'banana'
    arr[2]; // 'orange'
    
    arr.length // 3
    
    for(let i=0; i<arr.length; i++){
    	console.log(arr[i]); // 'apple', 'banana', 'orange'
    }
    
    console.log(typeof arr); // object
    

• 배열이 가지고 있는 값을 요소(element)라고 부른다.

  • 자바스크립트의 모든 값은 배열의 요소가 될 수 있다. (원시값, 객체, 함수, 배열 등… 값으로 인정하는 모든 것은 배열의 요소가 될 수 있다.)

• 배열의 요소는 배열에서 자신의 위치를 나타내는 0 이상의 정수인 **인덱스(index)**를 갖는다.

  • 인덱스는 0부터 시작한다.
  • 인덱스는 배열의 요소에 접근할 때 사용한다.
    • 요소에 접근할 때는 대괄호 표기법을 사용한다. 대괄호 내에는 접근하고 싶은 요소의 인덱스를 지정한다.

• 배열은 요소의 개수, 즉 배열의 길이를 나타내는 length 프로퍼티를 갖는다.

• 배열은 인덱스와 length 프로퍼티를 갖기 때문에 for 문을 통해 순차적으로 요소에 접근할 수 있다.

• 배열은 객체 타입이다. (자바스크립트에 배열이라는 타입은 존재하지 않는다.)

• 객체와 배열

  구분	객체	배열
  구조	프로퍼티 키와 프로퍼티 값	인덱스와 요소
  값의 참조	프로퍼티 키	인덱스
  값의 순서	X	O
  length 프로퍼티	X	O

• 인덱스로 표현되는 값의 순서와 length 프로퍼티를 갖는 배열은 반복문을 통해 순차적으로 값에 접근하기 적합한 자료구조다.

자바스크립트의 배열은 배열이 아니다

• 자료구조에서 말하는 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조를 말한다.

  • 즉, 배열의 요소는 하나의 데이터 타입으로 통일되어 있으며 서로 연속적으로 인접해 있다. (=밀집 배열)

    

• 자바스크립트의 배열은

  • 배열의 요소를 위한 각각의 메모리 공간은 동일한 크기를 가지 않아도 된다.
  • 연속적으로 이어져 있지 않을 수도 있다.
  • 배열의 요소가 연속적으로 이어져 있지 않은 배열을 희소 배열 이라 한다.
  • 자바스크립트의 배열은 일반적인 배열의 동작을 흉내낸 특수한 객체다.

• 이 배열이라는 특수한 객체는 아래처럼 구성되어 있다.

  console.log(Object.getOwnPropertyDescriptors([1, 2, 3]));
  
  /*
  {
  	'0': {value:1, writable: true, enumerable: true, configurable: true},
  	'1': {value:2, writable: true, enumerable: true, configurable: true},
  	'2': {value:3, writable: true, enumerable: true, configurable: true},
  	length: {value:3, writable: true, enumerable: false, configurable: false}
  }
  */
  

  • 인덱스를 나타내는 문자열을 프로퍼티 키로 가지며
  • length 프로퍼티를 갖는다.

• 배열의 요소는 어떤 타입의 값도 가능하다.

  const arr = [
  	'string'.
  	10,
  	true,
  	null,
  	undefined.
  	NaN,
  	Infinity,
  	[],
  	{},
  	function(){}
  ];
  

length 프로퍼티와 희소 배열

• length 프로퍼티는 요소의 개수, 즉 배열의 길이를 나타내는 0 이상의 정수를 값으로 갖는다.

  [].length // 0
  [1, 2, 3].length // 3
  

• length 프로퍼티의 값은 배열에 요소를 추가하거나 삭제하면 자동 갱신된다.

  const arr = [1, 2, 3];
  console.log(arr.length); // 3
  
  // 요소 추가
  arr.push(4);
  console.log(arr.length); // 4
  
  // 요소 삭제
  arr.pop();
  console.log(arr.length); // 3
  

• 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 프로퍼티 값은 변경 되지만 실제로 배열의 길이가 늘어나지는 않는다.

    const arr = [1];
    
    // 현재 length 프로퍼티 값인 1보다 큰 숫자 값 3을 length 프로퍼티에 할당
    arr.length = 3;
    
    // length 프로퍼티 값은 변경되지만 실제로 배열의 길이가 늘어나지는 않는다.
    console.log(arr.length); // 3
    console.log(arr); // [1, empty x 2]
    
    console.log(Object.getOwnPropertyDescriptors(arr));
    
    /*
    {
    	'0': {value:1, writable: true, enumerable: true, configurable: true},
    	length: {value:3, writable: true, enumerable: false, configurable: false}
    }
    */
    

    • empty x 2 는 실제로 추가된 배열의 요소가 아님. 비었다고 알려주는 것. 즉, arr[1], arr[2] 에는 값이 존재하지 않는다.

• 이처럼 배열의 요소가 연속적으로 위치하지 않고 일부가 비어 있는 배열을 희소 배열이라 한다.

  const sparse = [, 2, , 4];
  
  // 희소 배열의 length 프로퍼티 값은 요소의 개수와 일치하지 않는다.
  console.log(sparse.length); // 4
  console.log(sparse); // [empty, 2, empty, 4]
  
  // 배열 sparse에는 인덱스가 0, 2인 요소가 존재하지 않는다.
  console.log(Object.getOwnPropertyDescriptors(sparse));
  
  /*
  {
  	'1': {value:2, writable: true, enumerable: true, configurable: true},
  	'3': {value:4, writable: true, enumerable: true, configurable: true},
  	length: {value:4, writable: true, enumerable: false, configurable: false}
  }
  */
  

  • 희소 배열은 length와 배열 요소의 개수가 일치하지 않는다. 희소 배열의 length는 희소 배열의 실제 요소 개수보다 언제나 크다.

• 희소 배열은 사용하지 않는 것이 좋다.