배열 생성 방법

자바스크립트에서 배열은 Array 생성자 함수나 간편한 대괄호 표기법을 통해 생성할 수 있습니다.

1. Array 생성자 사용

• 인자 없음 : 빈 배열 생성

const list = new Array();

• 숫자 인자 하나 : 배열의 길이 지정 (모든 요소는 undefined)

const list = new Array(3);
// 결과: [empty × 3]

• 여러 인자 : 초기 요소를 직접 전달하여 배열 생성

const list = new Array(1, 'hello', true);
// 결과: [1, 'hello', true]

2. 대괄호 표기법 사용

const emptyList = [];

const numberList = [10, 20, 30];

const mixedList = ['apple', 42, null, {name: 'test'}];

배열 타입 확인

typeof 연산자는 배열에 대해 'object'를 반환하므로, 추가 검사가 필요합니다.

instanceof 사용 (단일 전역 컨텍스트)

const items = [];
if (items instanceof Array) {
  console.log('배열이 맞습니다.');
}

Array.isArray() 권장 (ES5)

const items = [];
if (Array.isArray(items)) {
  console.log('배열이 맞습니다.');
}

// iframe 등 다중 전역 환경에서도 안전하게 동작

배열 조작 메서드

요소 추가

1. push() - 끝에 추가

let scores = [1, 2, 3];
scores.push(4, 5); // 반환값: 5 (새 길이)
console.log(scores); // [1, 2, 3, 4, 5]

2. unshift() - 앞에 추가

let scores = [1, 2, 3];
scores.unshift(4, 5); // 반환값: 5 (새 길이)
console.log(scores); // [4, 5, 1, 2, 3]

3. splice() - 중간에 삽입

let items = [1, 2, 3];
items.splice(1, 0, 'a', 'b'); // 2번째 위치에 삽입
console.log(items); // [1, 'a', 'b', 2, 3]

요소 제거

1. pop() - 끝 요소 제거

let data = [1, 2, 3];
let removed = data.pop(); // 반환값: 3
console.log(data); // [1, 2]

2. shift() - 첫 요소 제거

let data = [1, 2, 3];
let removed = data.shift(); // 반환값: 1
console.log(data); // [2, 3]

3. splice() - 중간 요소 제거

let nums = [1, 2, 3, 4, 5];
let removed = nums.splice(2, 2); // 인덱스 2부터 2개 제거
console.log(removed); // [3, 4]
console.log(nums); // [1, 2, 5]

splice 메서드 종합 활용

splice(startIndex, deleteCount, item1, item2, ...)는 요소 제거와 추가를 동시에 수행합니다.

• 특정 요소 하나 제거 : array.splice(index, 1)
• 특정 위치에 요소 추가 : array.splice(index, 0, value)
• 특정 위치 요소 교체 : array.splice(index, 1, newValue)

// 예: 두 번째 요소 제거 후 네 번째 위치에 추가
let items = ['a', 'b', 'c', 'd'];
items.splice(1, 1, 'B', 'C'); // 인덱스 1의 'b' 제거 후 'B','C' 삽입
console.log(items); // ['a', 'B', 'C', 'c', 'd']

배열을 문자열로 변환 - join()

let chars = ['J', 'a', 'v', 'a'];
let joined = chars.join(''); // 'Java'
let withDash = chars.join('-'); // 'J-a-v-a'
let defaultJoin = chars.join(); // 'J,a,v,a' (기본 구분자: 쉼표)

배열 일부 추출 - slice()

let numbers = [10, 20, 30, 40, 50];

// 인덱스 1부터 3 이전(인덱스 3 미포함)까지 추출
console.log(numbers.slice(1, 3)); // [20, 30]

// 인덱스 2부터 끝까지 추출
console.log(numbers.slice(2)); // [30, 40, 50]

// 전체 복사 (얕은 복사)
console.log(numbers.slice()); // [10, 20, 30, 40, 50]

배열 병합 - concat() (원본 불변)

let groupA = [1, 2, 3];
let groupB = [4, 5, 6];
let single = 7;

let merged = groupA.concat(groupB, single, [8, 9]);
console.log(merged); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

// 복제용
let copy = groupA.concat();
console.log(copy); // [1, 2, 3]

배열 복제 방법

• slice() 사용

let original = [1, 2, 3];
let cloned = original.slice(0);
console.log(cloned); // [1, 2, 3]

• concat() 사용

let original = [1, 2, 3];
let cloned = original.concat();
console.log(cloned); // [1, 2, 3]

두 방법 모두 얕은 복사(shallow copy)를 수행합니다.

배열 정렬

1. reverse() - 순서 뒤집기

let chars = ['a', 'b', 'c'];
chars.reverse();
console.log(chars); // ['c', 'b', 'a']

2. sort() - 정렬 (기본: 문자열 유니코드 순)

let fruits = ['banana', 'apple', 'Cherry', 'date'];
fruits.sort();
console.log(fruits); // ['Cherry', 'apple', 'banana', 'date'] (대소문자 구분)

3. 숫자 정렬을 위한 비교 함수

function ascending(a, b) {
  return a - b;
}

let numbers = [40, 1, 5, 200, 3];
numbers.sort(ascending);
console.log(numbers); // [1, 3, 5, 40, 200]

// 내림차순
function descending(a, b) {
  return b - a;
}
numbers.sort(descending);
console.log(numbers); // [200, 40, 5, 3, 1]