17. JavaScript 배열과 타입 배열의 모든 것 | 웹 개발 기초

깃털 스타일, dall-e

 

JavaScript Indexed Collections: 배열과 타입 배열의 모든 것

 

01. 배열

1) 배열의 정의와 역할

배열은 JavaScript에서 가장 중요한 데이터 구조 중 하나로, 여러 개의 값을 하나의 변수로 묶어 관리할 수 있게 해줍니다. 배열은 순서가 있는 컬렉션으로, 각 값은 인덱스를 통해 접근할 수 있습니다. 이를 통해 동일한 유형의 데이터를 효율적으로 관리하고 조작할 수 있습니다.

2) 배열 생성 방법

배열 리터럴

배열 리터럴을 사용하여 간단하게 배열을 생성할 수 있습니다. 대괄호 []를 사용하여 값을 쉼표로 구분해 나열하면 됩니다.

let fruits = ["apple", "banana", "cherry"];
console.log(fruits); // ["apple", "banana", "cherry"]

Array 생성자

Array 생성자를 사용하여 배열을 생성할 수도 있습니다. 이는 배열의 크기를 지정하거나, 초기 값을 설정할 때 유용합니다.

let numbers = new Array(3); // 크기가 3인 빈 배열 생성
let colors = new Array("red", "green", "blue"); // 초기 값이 있는 배열 생성
console.log(numbers); // [empty × 3]
console.log(colors); // ["red", "green", "blue"]

3) 배열 조작 메서드

push()와 pop()

push() 메서드는 배열의 끝에 하나 이상의 요소를 추가합니다. pop() 메서드는 배열의 끝에서 요소를 제거하고 그 요소를 반환합니다.

let stack = [];
stack.push(1, 2); // [1, 2]
console.log(stack); // [1, 2]
let last = stack.pop(); // 2
console.log(stack); // [1]
console.log(last); // 2

shift()와 unshift()

shift() 메서드는 배열의 첫 번째 요소를 제거하고 그 요소를 반환합니다. unshift() 메서드는 배열의 앞에 하나 이상의 요소를 추가합니다.

let queue = [1, 2, 3];
let first = queue.shift(); // 1
console.log(queue); // [2, 3]
console.log(first); // 1
queue.unshift(0); // [0, 2, 3]
console.log(queue); // [0, 2, 3]

splice()와 slice()

splice() 메서드는 배열의 특정 위치에서 요소를 추가, 제거 또는 교체합니다. slice() 메서드는 배열의 일부를 추출하여 새로운 배열을 반환합니다.

let array = ["a", "b", "c", "d"];
array.splice(1, 2, "x", "y"); // ["b", "c"] 제거 후 "x", "y" 추가
console.log(array); // ["a", "x", "y", "d"]

let sliced = array.slice(1, 3); // 인덱스 1부터 3 이전까지 추출
console.log(sliced); // ["x", "y"]

4) 배열 순회 방법

for 루프

전통적인 for 루프를 사용하여 배열을 순회할 수 있습니다. 인덱스를 사용하여 배열의 각 요소에 접근합니다.

let fruits = ["apple", "banana", "cherry"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
// 출력:
// apple
// banana
// cherry

for...of 루프

for...of 루프는 배열의 요소를 간편하게 순회할 수 있게 해줍니다.

let colors = ["red", "green", "blue"];
for (let color of colors) {
  console.log(color);
}
// 출력:
// red
// green
// blue

forEach() 메서드

forEach() 메서드는 배열의 각 요소에 대해 제공된 콜백 함수를 실행합니다.

let numbers = [1, 2, 3];
numbers.forEach(function (number) {
  console.log(number);
});
// 출력:
// 1
// 2
// 3

 

02. 타입 배열

1) 타입 배열의 정의와 용도

타입 배열(Typed Arrays)은 동일한 데이터 타입의 요소를 효율적으로 관리할 수 있도록 설계된 배열입니다. 타입 배열은 이진 데이터를 직접 다루기 위한 것으로, 성능이 중요한 상황에서 유용합니다. 주로 WebGL과 같은 그래픽 프로그래밍, 비디오 처리, 대용량 데이터 분석 등에서 사용됩니다.

2) 타입 배열 생성 방법

Int8Array, Uint8Array

Int8Array는 8비트 정수 배열을 생성하며, 각 요소는 -128에서 127 사이의 값을 가집니다. Uint8Array는 0에서 255 사이의 8비트 부호 없는 정수 배열을 생성합니다.

let int8Array = new Int8Array([1, -1, 127, -128]);
console.log(int8Array); // Int8Array(4) [1, -1, 127, -128]

let uint8Array = new Uint8Array([0, 255, 128, 64]);
console.log(uint8Array); // Uint8Array(4) [0, 255, 128, 64]

Int16Array, Uint16Array

Int16Array는 16비트 정수 배열을 생성하며, 각 요소는 -32768에서 32767 사이의 값을 가집니다. Uint16Array는 0에서 65535 사이의 16비트 부호 없는 정수 배열을 생성합니다.

let int16Array = new Int16Array([32767, -32768, 12345]);
console.log(int16Array); // Int16Array(3) [32767, -32768, 12345]

let uint16Array = new Uint16Array([0, 65535, 12345]);
console.log(uint16Array); // Uint16Array(3) [0, 65535, 12345]

3) 타입 배열의 주요 메서드와 속성

set()

set() 메서드는 배열의 특정 위치에 다른 배열의 값을 복사합니다.

let sourceArray = new Uint8Array([1, 2, 3]);
let destinationArray = new Uint8Array(5);
destinationArray.set(sourceArray, 1); // sourceArray를 인덱스 1부터 복사
console.log(destinationArray); // Uint8Array(5) [0, 1, 2, 3, 0]

subarray()

subarray() 메서드는 기존 배열의 특정 부분을 새로운 배열로 반환합니다.

let array = new Uint8Array([1, 2, 3, 4, 5]);
let subArray = array.subarray(1, 4); // 인덱스 1부터 4 이전까지 추출
console.log(subArray); // Uint8Array(3) [2, 3, 4]

BYTES_PER_ELEMENT

BYTES_PER_ELEMENT 속성은 각 요소가 차지하는 바이트 수를 반환합니다.

console.log(Uint8Array.BYTES_PER_ELEMENT); // 1
console.log(Int16Array.BYTES_PER_ELEMENT); // 2
console.log(Float32Array.BYTES_PER_ELEMENT); // 4

4) 타입 배열 사용 예제

타입 배열은 대용량 데이터를 처리하는 데 유용합니다. 예를 들어, 이미지 데이터를 처리하거나, 복잡한 계산을 수행할 때 사용됩니다.

// 예제: 이미지 데이터 처리
let width = 100;
let height = 100;
let size = width * height;
let imageData = new Uint8Array(size);

// 이미지 데이터를 초기화
for (let i = 0; i < size; i++) {
  imageData[i] = i % 256; // 0에서 255 사이의 값 할당
}

// 이미지 데이터의 일부를 추출하여 새로운 배열 생성
let subImageData = imageData.subarray(0, 50);
console.log(subImageData);

이 예제에서는 100x100 픽셀 크기의 이미지를 나타내는 배열을 생성하고, 각 픽셀에 값을 할당합니다. 그런 다음 이미지 데이터의 일부를 추출하여 새로운 배열을 생성합니다. 타입 배열을 사용하면 이러한 작업을 효율적으로 수행할 수 있습니다.

타입 배열은 대용량 데이터 처리와 성능 최적화에 필수적인 도구입니다. 다양한 타입 배열을 적절하게 활용하면 JavaScript 애플리케이션의 성능을 크게 향상시킬 수 있습니다.

 

03. 배열과 타입 배열의 차이점

1) 메모리 관리

배열

일반적인 JavaScript 배열은 동적 배열로, 메모리를 유연하게 관리합니다. 배열의 크기를 조절할 수 있으며, 다양한 데이터 타입을 혼합하여 저장할 수 있습니다. 이러한 유연성 때문에 배열은 메모리 관리가 덜 효율적일 수 있습니다. 각 요소는 참조 타입으로 저장되며, 가비지 컬렉터가 필요할 때 메모리를 해제합니다.

let mixedArray = [1, "string", true, { key: "value" }];
console.log(mixedArray); // [1, "string", true, { key: "value" }]

타입 배열

타입 배열은 고정 크기의 배열로, 동일한 데이터 타입의 요소를 저장합니다. 각 요소는 연속적인 메모리 블록에 저장되며, 메모리 사용이 더 효율적입니다. 메모리 해제는 가비지 컬렉터가 아니라 프로그램이 직접 관리합니다. 타입 배열은 특히 대용량 데이터를 처리할 때 메모리 효율성이 뛰어납니다.

let int8Array = new Int8Array(5); // 크기가 5인 타입 배열 생성
int8Array[0] = 10;
int8Array[1] = 20;
console.log(int8Array); // Int8Array(5) [10, 20, 0, 0, 0]

2) 성능

배열

일반 배열은 다목적 데이터 구조로, 다양한 상황에서 사용될 수 있습니다. 하지만 성능 면에서는 타입 배열에 비해 떨어질 수 있습니다. 배열의 요소가 다양한 데이터 타입을 가질 수 있기 때문에 타입 검사와 메모리 할당이 추가로 필요합니다. 특히 대용량 데이터나 성능이 중요한 애플리케이션에서는 비효율적일 수 있습니다.

let largeArray = [];
for (let i = 0; i < 1000000; i++) {
  largeArray.push(i);
}
console.time("Array");
let sum = 0;
for (let i = 0; i < largeArray.length; i++) {
  sum += largeArray[i];
}
console.timeEnd("Array"); // 시간 측정

타입 배열

타입 배열은 특정 데이터 타입에 최적화되어 있어, 대용량 데이터를 처리할 때 훨씬 효율적입니다. 메모리가 연속적으로 할당되고, 타입 검사가 불필요하기 때문에 성능이 뛰어납니다. 특히 그래픽 프로그래밍, 비디오 처리, 실시간 데이터 분석 등의 분야에서 타입 배열의 성능 이점이 두드러집니다.

let largeTypedArray = new Int32Array(1000000);
for (let i = 0; i < largeTypedArray.length; i++) {
  largeTypedArray[i] = i;
}
console.time("TypedArray");
let typedSum = 0;
for (let i = 0; i < largeTypedArray.length; i++) {
  typedSum += largeTypedArray[i];
}
console.timeEnd("TypedArray"); // 시간 측정

이 예제에서는 일반 배열과 타입 배열의 성능을 비교할 수 있습니다. 타입 배열을 사용하면 대용량 데이터를 더 빠르고 효율적으로 처리할 수 있습니다.

배열과 타입 배열은 각각의 장단점이 있으며, 용도에 맞게 선택하여 사용해야 합니다. 일반 배열은 유연성과 다목적성을 제공하지만, 대용량 데이터나 성능이 중요한 상황에서는 타입 배열이 더 적합합니다. 각 상황에 맞는 적절한 데이터 구조를 선택하는 것이 중요합니다.

 

04. 실용적인 예제

1) 배열을 사용한 데이터 관리 예제

일반 배열은 다양한 데이터 타입을 저장하고 관리할 수 있는 유연한 데이터 구조입니다. 여기서는 학생들의 성적을 관리하는 예제를 통해 배열의 사용법을 살펴보겠습니다.

// 학생들의 성적을 관리하는 배열
let students = [
  { name: "Alice", score: 85 },
  { name: "Bob", score: 92 },
  { name: "Charlie", score: 88 },
  { name: "David", score: 76 }
];

// 새로운 학생 추가
students.push({ name: "Eve", score: 95 });
console.log(students);

// 특정 학생 제거 (인덱스로 찾기)
let index = students.findIndex(student => student.name === "Charlie");
if (index !== -1) {
  students.splice(index, 1);
}
console.log(students);

// 학생들의 평균 점수 계산
let totalScore = 0;
for (let student of students) {
  totalScore += student.score;
}
let averageScore = totalScore / students.length;
console.log(`Average Score: ${averageScore}`);

// 성적이 높은 순으로 정렬
students.sort((a, b) => b.score - a.score);
console.log(students);

이 예제에서는 학생들의 성적을 관리하기 위해 배열을 사용했습니다. 학생을 추가하고 제거하며, 평균 점수를 계산하고 성적 순으로 정렬하는 방법을 보여줍니다. 일반 배열의 유연성을 활용하여 다양한 작업을 손쉽게 수행할 수 있습니다.

2) 타입 배열을 사용한 성능 최적화 예제

타입 배열은 대용량 데이터를 효율적으로 처리할 수 있는 고정 크기의 배열입니다. 여기서는 이미지 데이터를 처리하는 예제를 통해 타입 배열의 성능 최적화를 살펴보겠습니다.

// 100x100 픽셀의 그레이스케일 이미지 데이터를 생성
let width = 100;
let height = 100;
let size = width * height;
let imageData = new Uint8Array(size);

// 이미지 데이터를 초기화 (모든 픽셀을 128의 그레이스케일 값으로 설정)
for (let i = 0; i < size; i++) {
  imageData[i] = 128;
}

// 이미지 데이터를 변환 (픽셀 값을 50씩 증가)
for (let i = 0; i < size; i++) {
  imageData[i] = (imageData[i] + 50) % 256;
}

// 특정 영역의 이미지를 추출 (50x50 영역)
let subImageData = imageData.subarray(0, 50 * 50);

// 결과 출력
console.log(subImageData);

이 예제에서는 100x100 픽셀 크기의 그레이스케일 이미지를 타입 배열을 사용하여 생성하고, 데이터를 초기화한 후 변환 작업을 수행했습니다. 또한 특정 영역의 이미지를 추출하여 별도의 배열로 관리했습니다. 타입 배열을 사용하면 대용량 데이터를 효율적으로 처리하고 메모리를 효과적으로 관리할 수 있습니다.

 

이처럼 일반 배열과 타입 배열은 각각의 용도와 장점이 있습니다. 일반 배열은 유연성과 다양한 데이터 타입을 다룰 수 있는 능력이 있으며, 타입 배열은 성능과 메모리 관리에서 뛰어난 성능을 발휘합니다. 상황에 따라 적절한 배열 타입을 선택하여 사용하는 것이 중요합니다.

---

관련된 다른 글도 읽어보시길 추천합니다

 

2024.07.10 - [Study] - 11. JavaScript 반복문 완벽 가이드 | 웹 개발 기초

11. JavaScript 반복문 완벽 가이드 | 웹 개발 기초

2024.07.05 - [Study] - 10. JavaScript 연산자와 조건문 이해하기 | 웹 개발 기초

10. JavaScript 연산자와 조건문 이해하기 | 웹 개발 기초

2024.07.05 - [Study] - 09. JavaScript 변수와 데이터 타입 이해하기 | 웹 개발 기초

09. JavaScript 변수와 데이터 타입 이해하기 | 웹 개발 기초

---

읽어주셔서 감사합니다

공감은 힘이 됩니다

 

:)