개발 지식 한스푼

JavaScript _ 배열의 종류

Monstera Olive 2025. 1. 16. 23:25
반응형

 

 

JavaScript에서 배열은 기본적으로 단일 타입 배열(single type array)을 요구하지 않으며, 다양한 데이터 타입을 동시에 저장할 수 있는 배열입니다. 배열은 몇 가지 특수 형태로 구분하거나 활용 할 수 있습니다.

 

 

표준 배열(Standard Array)

  • JavaScript의 표준 배열은 순서가 있는 컬렉션입니다.
  • 배열의 크기는 동적으로 조정되며, 숫자, 문자열, 객체 등 모든 타입의 데이터를 저장 할 수 있습니다.
const standardArray = [1, "Hello", true, { key: "value" }];
console.log(standardArray);

// [1, "Hello", true, { key: "value" } ]
// 위 배열에는 number, string, boolean, object 타입이 모두 저장됨

 

 

다차원 배열(Multidimensional Array)

  • 배열 안에 배열을 포함한 형태로, 2차원 또는 n차원 배열을 구성할 수 있습니다.
  • 다차원 배열은 보통 행렬 구조나 테이블 형태의 데이터를 표현할 때 사용됩니다.
const multiArray = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

console.log(multiArray[1][2]);      // 6 (두번째 행의 세번째 요소)

 

 

희소 배열(Sparse Array)

  • 연속적인 인덱스를 가지지 않는 배열입니다.
  • 배열 요소 중 일부가 비어 있는 경우를 희소 배열이라고 합니다.
  • 비어있는 인덱스는 undefined가 아닌 empty slot으로 간주됩니다.
  • 희소 배열은 루프 순회 시 건너뛸 수 있으므로 의도된 상황이 아니라면 주의해야 합니다.
const sparseArray = [1, , 3];

console.log(sparseArray);               // [1, <1 empty item>, 3]
console.log(sparseArray.length);    // 3 (empty slot은 길이에 포함됨)

 

 

타입 배열(Typed Array)

  • 정해진 데이터 타입만 저장 할 수 있습니다.
  • 이진 데이터를 다룰 때 사용되며, ArrayBuffer와 함께 사용됩니다.
  • 요소 크기가 고정되어 있어 성능이 표준 배열보다 더 빠릅니다.
  • 타입 배열은 Int8Array, Float32Array 등 다양한 타입으로 나뉘며, 각각 고정된 크기의 데이터를 저장합니다.
const intArray = new Int16Array(4);  // 16비트 정수형 배열, 길이 4
intArray[0] = 10;
intArray[1] = 20;

console.log(intArray);       // Int16Array [10, 20, 0, 0]

 

 

배열로 사용되는 객체(arguments)

  • 함수 내에서 사용되는 유사 배열 객체입니다.
  • 배열처럼 인덱스를 통해 요소에 접근 할 수 있지만, 배열의 메서드(ex_map, forEach 등)를 직접 사용할 수는 없습니다.
  • arguments 객체는 배열 메서드를 사용하려면 Array.from()으로 변환해야 합니다.
function showArgs() {
    console.log(arguments[0]);           // 첫 번째 인자 출력
    console.log(arguments.length);    // 전달된 인자의 개수
}

showArgs("Hello", "World");   // Hello, 2

const argsArray = Array.from(arguments);

 

 

비정형 배열(Array.of(), Array.from())

Array.of()

  • 주어진 인자를 배열의 요소로 갖는 새로운 배열을 생성합니다.
  • 요소가 숫자일 때도 길이로 착각하지 않고 배열 요소로 간주합니다.

 

Array.from()

  • 배열과 유사한 객체(ex_arguments, NodeList 등)를 배열로 변환하거나, 매핑을 적용한 배열을 생성합니다.
const arr = Array.of(3);    // [3]

const str = "Hello";
const chars = Array.from(str);    // ["H", "e", "l", "l", "o"]

 

 

함수형 배열(map, filter, reduce 등)

  • 배열 메서드를 사용하여 기존 배열을 변형한 새로운 배열을 생성합니다.
  • 함수형 프로그래밍 스타일을 적용하여 요소별로 특정 연산을 수행 할 수 있습니다.
const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(num => num * 2);    // map() : 요소별 2배
// [2, 4, 6, 8, 10]

const evens = numbers.filter(num => num % 2 === 0);    // filter() : 짝수만 필터링
// [2, 4]

const sum = numbers.reduce((acc, num) => acc + num, 0);    // reduce() : 배열 합계
// 15

 

 


 

 

JavaScript 배열은 다양한 데이터 타입과 구조를 다룰 수 있는 강력한 데이터 구조입니다. 표준 배열 외에도 다차원 배열, 희소 배열, 타입 배열 등 다양한 형태로 배열을 활용할 수 있습니다. 또한, Array.from(), TypedArray, map, filter 등을 통해 더 복잡한 데이터 처리도 손쉽게 구현할 수 있습니다.

반응형