JS 배열

JavaScript

순서가 있는 값들의 연속적인 나열. 자바스크립트의 배열은 엄밀하게 말하면 배열의 동작을 흉내낸 특수한 객체이다.

자바스크립트의 배열

  • 순서가 있는 데이터 집합.
  • 해시 테이블로 구성되어 있다.
  • 0으로 시작하는 숫자형 인덱스를 사용한다.
  • length 프로퍼티를 가지고 있다.
  • 배열의 요소가 모두 같은 타입일 필요도 없고 배열이나 객체도 포함할 수 있다.
  • 배열 리터럴은 대괄호로 접근하며 접근할 때에도 대괄호를 사용한다.
  • 배열의 길이보다 큰 인덱스로 요소를 할당하게 될 경우 자동으로 큰 인덱스만큼 늘어나지만 요소값으로 undefined가 들어간다.
  • 인덱스로 배열에 요소를 접근하게 될 경우 일반적인 배열보다 느리다. (구조적 단점) → 자바스크립트엔진은 배열을 일반 객체와 구분하여 배열처럼 동작하도록 최적화
  • 특정 요소를 탐색하거나 요소를 삽입, 삭제시 효율적이다.
  • isArray로 배열인지 아닌지 확인할 수 있다.

length 프로퍼티

요소의 개수, 즉 배열의 길이를 나타내는 정수를 값으로 가진다. 빈 배열인 경우 0, 아닌 경우 가장 큰 인덱스에 + 1한 값이다.

희소배열

  • 희소 배열의 length는 실제 요소 개수보다 크다.
  • 값이 없이 비어있는 요소는 메모리 공간이 확보되지 않으며 빈 요소를 생성하지 않는다.
  • 희소 배열은 사용하지 않는 것이 좋다.

배열생성

배열 리터럴

  • 0개 이상의 요소를 쉼표로 구분하여 대괄호로 묶는다.
  • 프로퍼티 이름은 없고 값만 존재한다.
  • 요소를 생략하면 희소 배열이 생성된다.

Array 생성자 함수

Array 생성자 함수는 전달된 인수의 갯수에 따라 다르게 동작한다.

  • 전달된 인수가 1개이고 숫자인 경우, 인수를 length 프로퍼티의 값으로 갖는 배열을 생성한다. 이때 생성된 배열은 희소배열.
  • 전달된 인수가 없는 경우 빈 배열을 생성한다. (= 배열리터럴[ ] )
  • 전달된 인수는 0 ~ 232-1(4294967295) 사이의 정수. 벗어나면 RangeError (ex. 음수)
  • 배열은 요소를 최대 4294967295개 가질 수 있다.
  • 전달된 인수가 2개 이상이거나 숫자가 아닌 경우, 인수를 요소로 갖는 배열을 생성한다.
  • 함수로 호출한다고 하더라도 배열을 생성하는 생성자 함수로 동작한다. 함수 내부에서 new.target을 확인하기 때문.

Array.of

  • Array 생성자 함수와 다르게 전달된 인수가 1개이고 숫자이더라도 인수를 요소로 갖는 배열을 생성
  • ES6에서 새롭게 도입
    1
    2
    const arr1 = Array.of(2);
    console.log(arr1); // [2]

Array.from

  • 유사 배열 객체(array-like object) 또는 이터러블 객체(iterable object)를 변환하여 새로운 배열을 생성
  • 두번째 인수로 전달한 함수를 통해 값을 만들면서 요소를 채울 수 있다. 두번째 인수로 전달한 함수는 요소값과 인덱스를 순차적으로 전달받아 새로운 요소를 생성한다.
  • ES6에서 새롭게 도입
    1
    2
    const arr = Array.from({ length: 2, 0: 'a', 1: 'b' });
    console.log(arr); // [ 'a', 'b' ]

배열의 참조

  • 배열 요소를 참조할 때에는 대괄호 표기법을 사용한다. 대괄호 안에는 인덱스가 와야 함.
  • 존재하지 않는 요소에 접근시 undefined → 배열도 객체이기 때문에 객체의 존재하지 않는 프로퍼티에 접근했을 때 undefined를 반환하는 것처럼 배열도 마찬가지이다. 희소배열도 포함.

배열 요소의 추가와 갱신

  • 요소가 존재하지 않는 인덱스의 배열 요소에 값을 할당하면 새로운 요소가 추가됨. length 프로퍼티 값은 자동 갱신.
  • 현재 배열의 length 프로퍼티 값보다 큰 인덱스로 새로운 요소를 추가하면 희소 배열이 된다.
    1
    2
    3
    4
    const arr = [0, 1, 2];
    arr[4] = 4;
    console.log(arr); // [0, 1, 2, empty, 4]
    console.log(arr.length); // 5
  • 인덱스로 요소에 접근하여 명시적으로 값을 할당해야 요소가 생성된다.
  • 이미 요소가 존재할 경우 해당 요소에 값을 재할당하면 값이 갱신된다.
  • 정수 이외의 값을 인덱스처럼 사용하면 프로퍼티가 생성된다. 이때 생성된 프로퍼티는 length 프로퍼티 값에 영향을 미치지 않는다.
    1
    2
    3
    4
    5
    6
    7
    const arr = [];

    arr[0]=1;
    arr['foo']=2;

    console.log(arr); // [1, foo:2]
    console.log(arr.length); // 1

배열 요소의 삭제

특정 요소를 삭제하기 위해 delete 연산자를 사용할 수 있다. delete를 사용할 경우 희소배열이 되며 length 프로퍼티 값은 변하지 않기 때문에 delete 연산자를 사용하지 않는 것이 좋다.

희소 배열을 만들지 않으면서 배열의 특정 요소를 삭제하고 싶다면 Array.prototype.splice 메소드를 사용한다.

1
2
3
4
5
const arr = [1, 2, 3, 4, 5];

delete arr[2];
console.log(arr); // [1, 2, empty, 4, 5]
console.log(arr.length); // 5

REFERENCE
https://poiemaweb.com

  • © 2020-2025 404 Not Found
  • Powered by Hexo Theme Ayer