자바스크립트 배열(Array)의 모든 것

 

자바스크립트의 배열

배열의 기본 이해

자바스크립트(JavaScript)에서 배열(Array)은 순서가 있는 리스트 형태의 컬렉션으로, 각 요소(element)에 인덱스(index)를 통해 접근할 수 있습니다. 주의할 점은 자바스크립트의 배열은 다른 언어의 배열과 달리 고정된 크기가 없고, 동적으로 늘어나거나 줄어들 수 있습니다. 또한 배열은 실제로 객체의 한 종류이며, `length` 프로퍼티를 통해 요소의 개수를 추적합니다.

• 순서 있는 데이터 집합
• 길이 가변적
• 인덱스로 접근 가능
• 실제로는 객체 타입

 

배열 생성 방법

• 리터럴(`[ ]`)
• `Array( )` 생성자
• `Array.of`
• `Array.from`

리터럴 표기법

가장 일반적이고 직관적인 방법

const arr = [10, 20, 30];

Array 생성자

const arr1 = new Array();       // 빈 배열
const arr2 = new Array(5);      // 길이가 5인 배열 (모든 요소는 empty)
const arr3 = new Array(1, 2, 3); // [1, 2, 3]

Array.of 메서드 (ES6+)

인수를 요소로 가진 배열을 생성

const arr = Array.of(1, 2, 3); // [1, 2, 3]

Array.from 메서드 (ES6+)

유사 배열 객체 혹은 이터러블 객체를 진짜 배열로 변환

const arrFromString = Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']
const set = new Set([1,2,3]);
const arrFromSet = Array.from(set); // [1, 2, 3]

 

length 프로퍼티의 동작 원리

• 인덱스를 기반으로 length가 결정
• length 조정 시 배열 길이 변화

const arr = [1, 2, 3, 4];
arr.length = 2; 
console.log(arr); // [1, 2]로 잘림

 

---

배열 조작의 기본 메서드

요소 추가/제거

• `push` : 배열 끝에 요소 추가, 배열의 새 길이를 반환
• `pop` : 배열 끝 요소 제거 후 제거한 요소 반환
• `shift` : 배열 앞 요소 제거 후 제거한 요소 반환
• `unshift` : 배열 앞에 요소 추가, 배열의 새 길이를 반환

const arr = [1, 2, 3];
arr.push(4);        // [1, 2, 3, 4]
arr.pop();          // [1, 2, 3], pop()은 제거한 요소 4 반환
arr.shift();        // [2, 3], shift()는 제거한 요소 1 반환
arr.unshift(0);     // [0, 2, 3]

 

임의 위치 조작

• `splice` (추가/삭제/교체)

const arr = [1, 2, 3];
arr.splice(1, 1, 'a'); // [1, 'a', 3] 인덱스 1의 요소 2를 제거하고 'a'를 삽입

 

---

순회 메서드

• `for` 문
• `for...of` 문 (ES6)
• `forEach` 메서드

전통적인 for문 사용

가장 기본적인 방식의 `for` 반복문입니다. 인덱스를 직접 제어할 수 있어 유연하지만 반복 로직이 다소 장황해질 수 있습니다.

const arr = [10, 20, 30];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

for...of 문 (ES6+)

ES6에서 도입된 `for...of` 문은 이터러블 객체(배열 포함)를 간결하게 순회할 수 있습니다. 인덱스를 명시적으로 다루지 않아도 되고, 요소에 직접 접근합니다.

for (const value of arr) {
  console.log(value);
}

forEach 메서드

`forEach`는 배열의 각 요소에 대해 콜백 함수를 실행하지만 반환값이 없으며, break/continue와 같은 반복 제어문을 사용할 수 없습니다.

arr.forEach((element, index, array) => {
  console.log(element, index);
});

 

---

배열 변환 메서드

고차 함수는 함수를 인자로 받거나 함수를 반환하는 함수로, 배열 메서드에서 흔히 볼 수 있는 패턴입니다. 콜백 함수로 로직을 전달하므로 코드가 더 간결하고 선언적(무엇을 할 것인지)에 가까워집니다. 아래 메서드들은 모두 고차 함수 형태이며, 원본 배열을 변경하지 않고 새로운 결과를 반환하거나, 부수효과 없이 순수한 결과를 도출하는 패턴에 자주 활용됩니다.

• 새 배열 생성 메서드
  • `map` : 각 요소에 대해 콜백을 실행한 결과를 새로운 배열로 반환
  • `filter` : 조건을 만족하는 요소들만 모아 새로운 배열로 반환
• 누산을 통한 값 도출
  • `reduce` : 배열을 누산(accumulate)하여 단일 값으로 반환
• 다차원 배열 다루기 :
  • `flat` : 다차원 배열을 지정된 깊이만큼 평탄화
  • `flatMap` : map 이후 flat 진행

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

// map : 각 요소에 대해 콜백을 실행한 결과를 새로운 배열로 반환
const doubled = arr.map(x => x * 2); // [2, 4, 6, 8]

// filter : 조건을 만족하는 요소들만 모아 새로운 배열로 반환
const even = arr.filter(x => x % 2 === 0); // [2, 4]

// reduce : 배열을 누산(accumulate)하여 단일 값으로 반환
const sum = arr.reduce((acc, val) => acc + val, 0); // 10

// flat : 다차원 배열을 지정된 깊이만큼 평탄화
const arr2 = [1, [2, [3]]];
console.log(arr2.flat());     // [1, 2, [3]]
console.log(arr2.flat(2));    // [1, 2, 3]

// flatMap : 다차원 배열을 map 이후 지정된 깊이만큼 평탄화
const arr3 = [1, 2, 3];
console.log(arr3.flatMap(x => [x, x * 2])); // [1,2,2,4,3,6]

 

---

검색 및 검사 메서드

• `indexOf(value)` : 해당 값의 첫 번째 인덱스 반환, 없으면 -1
• `lastIndexOf(value)` : 해당 값의 마지막 인덱스 반환
• `includes(value)` : 해당 값이 배열에 있으면 true
• `find(callback)` : 주어진 조건을 만족하는 첫 번째 요소 반환, 없으면 undefined
• `findIndex(callback)` : 조건을 만족하는 첫 번째 요소의 인덱스 반환, 없으면 -1
• `some(callback)` : 하나라도 조건을 만족하면 true, 모두 불만족이면 false
• `every(callback)` : 모든 요소가 조건을 만족해야 true

const arr = [5, 12, 8, 130, 44];

console.log(arr.indexOf(12)); // 1
console.log(arr.includes(130)); // true

console.log(arr.find(x => x > 10));    // 12
console.log(arr.findIndex(x => x > 100)); // 3
console.log(arr.some(x => x < 10));    // true (5와 8이 10보다 작음)
console.log(arr.every(x => x < 200));  // true (모두 200보다 작음)

 

---

배열 요소 변형/정렬 메서드

• `sort([compareFunction])` : 배열 자체를 정렬. compareFunction을 제공하지 않으면 요소를 문자열로 변환한 뒤 유니코드 순서로 정렬 (숫자 정렬 시 주의 필요)
• `reverse()` : 배열 요소 순서를 반대로 뒤집음 (배열 자체 변경)
• `fill(value, start, end)` : 지정한 구간의 요소를 value로 채움 (배열 자체 변경)
• `copyWithin(target, start, end)` : 특정 구간 요소를 복사하여 target 인덱스부터 붙여넣음 (배열 자체 변경)

const arr = [1, 3, 2];
arr.sort(); // [1, 2, 3]
arr.reverse(); // [3, 2, 1]

const arr2 = [1, 2, 3, 4];
arr2.fill(0, 1, 3); // [1, 0, 0, 4]

const arr3 = [10, 20, 30, 40];
arr3.copyWithin(2, 0, 2); // [10, 20, 10, 20]

숫자 정렬 시에는 compareFunction을 명시적으로 제공하는 것이 일반적입니다.

const numbers = [40, 1, 5, 200];
numbers.sort((a, b) => a - b); // [1, 5, 40, 200]

 

---

배열 합치기, 잘라내기, 슬라이싱

• `concat` : 기존 배열을 변경하지 않고 다른 배열이나 값들을 합쳐 새 배열 반환
• `slice(start, end)` : start부터 end 미만까지의 요소를 복사하여 새로운 배열 반환 (배열 변경 없음)
• `splice` : 위에서 언급했듯이, 배열을 변경하며 요소 추가/제거/교체 가능

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = arr1.concat(arr2); // [1, 2, 3, 4]

const arr3 = [10, 20, 30, 40];
const sliced = arr3.slice(1, 3); // [20, 30], arr3는 변경 없음

 

---

배열을 문자열로 변환

• `join(separator)` : 구분자를 사용해 모든 요소를 문자열로 결합
• `toString()` : 배열을 쉼표로 구분한 문자열로 변환

const arr = [1, 2, 3];
console.log(arr.join('-')); // "1-2-3"
console.log(arr.toString()); // "1,2,3"

 

---

스프레드 문법(...)과 구조 분해 할당

• 스프레드 문법(`...`) : 배열을 펼쳐 개별 요소로 분산
• 구조 분해 할당 : 배열 요소를 개별 변수에 할당하기 쉬워짐

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

const [first, second, ...rest] = arr; 
console.log(first);  // 1
console.log(second); // 2
console.log(rest);   // [3]