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

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

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(', '));

빨강, 초록, 파랑

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