JavaScript 배열: 인덱스 조회와 삽입·삭제 비용

배열은 0번부터 번호가 붙은 칸입니다

번호로 값을 읽고, 끝에 값을 붙이고, 가운데 값을 지울 때 칸이 어떻게 달라지는지 한 단계씩 확인합니다.

모든 예제는 브라우저 개발자 도구의 Console에서 각각 독립적으로 실행합니다. 여러 예제를 차례로 붙여 넣다가 Identifier has already been declared가 나오면 페이지를 새로고침한 뒤 다음 예제를 실행하세요.

선수 지식: JavaScript 변수·배열·조건문을 먼저 익힙니다. 객체 참조나 함수가 낯설면 아래 단계별 예제부터 시작하고, class 전체 구현은 해당 동작을 손으로 추적한 뒤 읽습니다. 각각의 코드는 독립 실행합니다.

1. 사물함 번호처럼 생각해 봅니다

장바구니에 우유, 빵, 사과를 차례대로 담았습니다. JavaScript 배열은 첫 칸부터 0, 1, 2라는 번호를 붙입니다. 이 번호를 인덱스라고 합니다.

사람은 첫 번째를 1이라고 부르는 일이 많지만, 배열의 첫 번째 칸은 0입니다. 그래서 두 번째 값인 빵을 읽을 때는 cart[1]이라고 씁니다.

2. 번호로 값을 읽습니다

const cart = ['우유', '빵', '사과'];

console.log(cart[0]);
console.log(cart[1]);
console.log(cart.length);

우유
빵
3

첫 줄은 배열을 만들고 cart라는 이름을 붙입니다. cart[0]은 0번 칸, 즉 첫 값을 읽습니다. cart[1]은 1번 칸, 즉 두 번째 값을 읽습니다. length는 값이 몇 개인지 알려주므로 3입니다. 값을 읽기만 했기 때문에 배열 내용은 바뀌지 않습니다.

const fruits = ['우유', '빵', '사과'];
console.log(fruits[2]);

사과

3. 끝에 값을 하나 추가합니다

push는 배열의 끝에 새 값을 붙입니다.

const foods = ['우유', '빵', '사과'];
foods.push('달걀');

console.log(foods.join(', '));
console.log(foods[3]);

우유, 빵, 사과, 달걀
달걀

첫 줄에서 값은 세 개입니다. 두 번째 줄이 달걀을 끝에 붙입니다. 기존 값의 인덱스는 그대로이고 달걀이 새 3번 칸을 받습니다. 마지막 두 줄은 바뀐 배열과 3번 칸을 확인합니다.

join(', ')은 배열의 값을 쉼표로 이어 출력하기 위한 표현입니다. 값을 넣거나 빼지 않습니다. 이 절에서는 push가 실제 배열을 바꾸고, join은 바뀐 모습을 보여 주기만 한다는 차이를 기억하세요.

4. 가운데 값을 지우면 뒤 값이 앞으로 옵니다

빵을 지운다고 해보겠습니다. 빵은 1번 칸에 있습니다. 빈 칸을 그대로 두지 않기 위해 뒤에 있던 사과와 달걀의 번호가 하나씩 작아집니다.

const basket = ['우유', '빵', '사과', '달걀'];
basket.splice(1, 1);

console.log(basket.join(', '));
console.log(basket[1]);

우유, 사과, 달걀
사과

splice(1, 1)에서 첫 번째 1은 “1번 인덱스부터”, 두 번째 1은 “값 한 개를” 뜻합니다. 빵이 빠지고 사과는 2번에서 1번으로, 달걀은 3번에서 2번으로 이동합니다. splice는 원본 배열 자체를 바꿉니다.

const colors = ['빨강', '파랑'];
colors.splice(1, 0, '초록');
console.log(colors.join(', '));

빨강, 초록, 파랑

바로 실행해 보는 핵심 예제

코드 직접 실행

본문 예제를 선택하고 실제 계산 결과를 확인합니다.

예제 크게 보기 (새 탭)

독자 질문: 인덱스 조회는 빠른데 앞에서 삭제하면 왜 비용이 커지나요?

왜 쓰나요? 배열은 위치 번호로 읽기 쉽지만 앞·가운데를 지우면 뒤 항목이 이동합니다.

아래 바닐라 JavaScript 코드는 독립 실행 예제입니다. 본문에서 배운 개념을 새 데이터로 확인합니다. 다른 예제와 같은 콘솔에 이어 붙이지 말고 새 콘솔 또는 새 .cjs 파일에서 실행하세요.

const tasks = ["A", "B", "C"];
console.log(tasks[1]);
tasks.push("D");
tasks.splice(1, 1);
console.log(tasks.join(","));

실행 결과와 비용

이번 검토에서는 Node.js v24.18.0에서 위 독립 예제를 실행해 다음 출력과 일치하는지 확인했습니다.

B
A,C,D

시간·공간 복잡도: 인덱스 읽기 O(1), push는 보통 분할 상환 O(1), 가운데 splice 삭제는 뒤 원소 이동으로 O(n)입니다. JavaScript 엔진 최적화에 따라 실제 시간은 달라집니다.

직접 풀 문제

위 코드에서 tasks.splice(0, 1)도 실행하면 마지막 배열은 무엇인가요?

풀이와 기대 결과

C,D입니다. 앞 삭제는 남은 원소의 인덱스를 옮길 수 있습니다.

원자료의 다른 학습 순서 (선택)

자료구조 과정 원래 순서의 다음 글: 03 Map·Set으로 ID 조회와 중복 관리

검증 범위: 위 독립 예제의 출력만 로컬에서 확인했습니다. 이 글은 독립 자료구조 실습입니다. 실제 브라우저 표시와 모든 입력·플랫폼의 실행은 검증하지 않았습니다.

5. 지금까지의 선택 기준을 정리합니다

따라서 번호로 자주 읽고 끝에 자주 추가한다면 배열이 편합니다. 반대로 앞이나 가운데에서 값을 계속 지우면 뒤의 많은 값이 자리를 옮길 수 있습니다. 먼저 들어온 값을 계속 꺼내는 일이라면 큐가 더 자연스럽습니다.

6. 심화: 원본을 바꾸지 않고 첫 값만 제거하기

function removeFirst(values, target) {
  const index = values.indexOf(target);
  if (index === -1) return values.slice();
  return [...values.slice(0, index), ...values.slice(index + 1)];
}

const source = [4, 2, 4, 1];
console.log(JSON.stringify(removeFirst(source, 4)));
console.log(JSON.stringify(source));

[2,4,1]
[4,2,4,1]

7. 연습으로 연결합니다

기존 문제 JavaScript 배열 최솟값 찾기에서 0번부터 마지막 인덱스까지 차례로 읽어 보세요. 다른 구조와 비교하고 싶다면 어떤 자료구조를 고를까?로 돌아갈 수 있습니다.

참고 자료

공식 문서 확인일: 2026년 9월 10일.

• MDN Array