프론트엔드 짧은 간단 지식 정리 - 자바스크립트의 배열

1. 배열

• 자료구조로서의 배열은 데이터를 일정한 순서와 구조를 갖춘 집합으로 저장하는 방법을 의미한다.
  • 배열은 프로그래밍에서 기본적인 자료구조 중 하나로, 메모리 내에서 연속적인 공간에 요소를 저장한다.
  • 배열의 핵심적인 특성과 개념은 다음과 같다.

(1) 연속 메모리 배치

정적 배열

• 대부분의 배열은 메모리에서 연속적으로 저장된다.
• 이는 배열의 인덱스에 직접 접근할 수 있게 해 주며, 상수 시간 O(1) 복잡도로 요소에 접근할 수 있게 한다.

동적 배열

• 동적 배열은 필요에 따라 크기를 조절할 수 있으며, 초기에는 연속 메모리 공간을 사용하다가 크기가 커지면 재배치할 수 있다.
• 이 과정은 추가적인 연산이 필요하지만, 배열의 기본 속성은 유지된다.

 

(2) 인덱스 기반 접근

• 배열의 요소는 인덱스를 사용하여 접근한다.
  - 인덱스는 일반적으로 0부터 시작하여 배열의 각 요소에 위치를 제공한다.
  - 예를 들어, 배열의 첫 번째 요소는 인덱스 0, 두 번째 요소는 인덱스 1이다.

 

(3) 고정 크기와 가변 크기

고정 크기 배열:

• 배열의 크기가 고정되어 있으며, 배열이 생성될 때 크기가 결정된다.
• 배열의 크기를 변경하려면 새로운 배열을 생성하고 기존의 요소를 복사해야 한다.

가변 크기 배열

• 배열의 크기를 동적으로 조절할 수 있으며, 필요에 따라 배열의 크기를 증가시키거나 줄일 수 있다.
• 많은 고급 프로그래밍 언어에서 가변 크기 배열(예: ArrayList in Java, vector in C++)을 제공한다.

 

(4) 동일한 타입의 요소

정적 타입 언어

• 배열의 요소는 동일한 데이터 타입이어야 한다.
• 예를 들어, C나 Java에서는 배열의 모든 요소가 같은 타입을 가져야 한다.

동적 타입 언어

• 배열의 요소는 다양한 타입일 수 있다.
• 예를 들어, JavaScript에서는 숫자, 문자열, 객체 등 다양한 타입의 요소를 포함할 수 있다.

 

(5) 자료구조로서의 배열의 주요 속성

인덱스 접근

• 배열의 요소는 인덱스를 통해 빠르게 접근할 수 있다.

순서

• 배열은 요소의 순서를 유지하며, 각 요소의 위치가 인덱스로 표현된다.

고정 및 가변 크기

• 배열의 크기가 고정된 경우와 가변된 경우가 있으며, 데이터의 추가 및 삭제에 따라 배열의 크기를 조정할 수 있는 방식이 다르다.

 

(6) 응용 및 활용

정렬 및 검색

• 배열은 데이터를 정렬하고 검색하는 알고리즘에서 기본적으로 사용된다.
• 예를 들어, quick sort(퀵 정렬)나 merge sort(병합 정렬) 알고리즘은 배열을 정렬하는 데 사용됩니다.

스택과 큐

• 배열을 사용하여 stack(스택)과 queue(큐)와 같은 다른 자료구조를 구현할 수 있다.

다차원 배열

• 2차원 배열 또는 3차원 배열과 같은 다차원 배열을 사용하여 매트릭스와 같은 복잡한 데이터를 표현할 수 있다.

 

1. 밀집 배열

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

• 밀집 배열(dense array) 은 배열의 모든 인덱스가 사용되며, 인덱스가 연속적이고 배열의 크기와 같은 방식으로 데이터를 저장하는 배열이다.
  • 즉, 배열의 모든 요소가 초기화되어 있고, 인덱스가 차례로 순서대로 존재한다는 특징이 있다.

• 위 예시 코드의 배열은 인덱스 0부터 4까지 모두 값이 할당되어 있으며, 배열의 길이와 같은 방식으로 연속된 인덱스를 가지고 있다.
  • 이 배열은 모든 요소가 정의되어 있으므로 밀집 배열이라 부른다.

// 밀집 배열에 서로 다른 데이터 타입의 요소가 포함된 경우
const mixedArray = [1, "hello", { key: "value" }, [1, 2, 3], function() { return "function"; }];

• 여기서 헷갈리지 말아야 할 것이 있는데, 바로 밀집 배열이라고, 모든 배열 요소들이 꼭 동일한 타입을 가져야 하는 것은 아니라는 것이다.
  • 밀집 배열(dense array)에서는 요소의 타입이 동일할 필요는 없다. 배열의 모든 인덱스가 정의되어 있고 연속적으로 값을 가지는 것은 밀집 배열의 특징이지만, 배열의 요소 타입에 대한 제약은 없다.
    • 동일한 타입의 요소: 배열의 모든 요소가 동일한 데이터 타입을 가지는 경우가 많지만, JavaScript와 같은 동적 타입 언어에서는 배열의 요소가 다양한 데이터 타입을 가질 수 있다.
    • 다양한 타입의 요소: JavaScript 배열은 다양한 데이터 타입을 혼합하여 저장할 수 있다. 예를 들어, 숫자, 문자열, 객체, 함수 등 다양한 타입의 요소를 같은 배열에 넣을 수 있다.

• 위 예제 코드의 배열 mixedArray는 숫자, 문자열, 객체, 배열, 함수 등 다양한 타입의 요소를 포함하고 있다.
  • 모든 요소가 정의되어 있으며, 배열의 인덱스가 연속적이기 때문에 밀집 배열로 간주된다.

 

3. 희소 배열

const sparseArray = []; 
sparseArray[2] = 'a'; 
sparseArray[5] = 'b';

• 하지만 자바스크립트의 배열은, 배열의 요소를 넣기 위한 각각의 메모리 공간이 동일한 크기를 갖지 않아도 되며, 또한 연속적으로 이어져 있지 않을 수도 있다.

• 희소 배열(sparse array)은 배열의 인덱스 중 일부만이 정의되어 있고, 나머지 인덱스는 정의되어 있지 않거나 비어 있는 배열을 의미한다.
  • 즉, 배열의 대부분의 인덱스가 값을 가지지 않으며, 배열의 크기보다 적은 수의 요소만 저장될 수 있다는 뜻이다.

• 위 예시코드의 배열에서는 인덱스 2와 5에만 값이 있으며, 나머지 인덱스는 정의되지 않았다.
  • 배열의 길이는 6이지만, 실제로는 2와 5에만 값이 있다.

 

4. 밀집 배열과 희소 배열의 차이

※ 메모리 사용

• 밀집 배열은 모든 인덱스가 채워져 있기 때문에 메모리를 연속적으로 사용한다.
• 희소 배열은 메모리를 비효율적으로 사용할 수 있으며, 배열의 많은 부분이 비어있거나 정의되지 않는다.
  • 희소 배열에서는 데이터가 저장된 인덱스만 메모리에 할당된다.

※ 성능

• 밀집 배열은 인덱스가 연속적이므로 배열의 요소에 접근하는 속도가 빠르다.
• 희소 배열은 비어있는 인덱스가 많기 때문에 특정 인덱스에 접근하는 데 시간이 더 걸릴 수 있다.

※ 장점과 단점

• 밀집 배열은 배열의 모든 인덱스에 값이 있어 접근이 간단하지만, 불필요하게 큰 배열을 만들 수 있다.
• 희소 배열은 메모리를 절약할 수 있지만, 배열의 요소에 접근할 때 추가적인 계산이 필요할 수 있다.

 

5. 자바스크립트에서 희소 배열의 동작

• JavaScript에서, 희소 배열은 배열의 특정 인덱스만 정의된 경우 발생한다.
  • 배열의 크기(length 속성)는 정의된 최대 인덱스보다 클 수 있으며, 정의되지 않은 인덱스는 undefined로 간주된다.
  • 희소 배열에서 정의된 인덱스만 실제로 값이 저장된다.

const sparseArray = [];
sparseArray[100] = 'a';

console.log(sparseArray.length); // 101
console.log(sparseArray[0]); // undefined
console.log(sparseArray[100]); // 'a'

• 여기서 sparseArray의 길이는 101로 설정되어 있지만, 실제로는 인덱스 100에만 값이 있으며 나머지는 정의되지 않은 상태이다.

 

6. 요약

• 밀집 배열: 모든 인덱스가 사용되고, 연속적인 값을 가지는 배열.
• 희소 배열: 일부 인덱스만 사용되며, 많은 인덱스가 정의되지 않은 배열.