JavaScript에서 배열의 특정 위치(인덱스)에 항목을 추가하는 방법

JavaScript에서 배열의 특정 위치(인덱스)에 항목을 추가하는 방법을 알아보세요.

배열에 새 항목을 추가할 때 맨 끝에 붙이거나(append), 맨 앞에 넣고(prepend) 싶지 않고, 정확히 원하는 위치에 삽입하고 싶은 경우가 있습니다. 이럴 때 유용하게 쓸 수 있는 방법을 소개합니다.

참고: 특정 위치의 데이터를 다룰 때 우리는 보통 인덱스(index)라는 용어를 사용합니다. 배열 인덱스는 0부터 시작하기 때문에 다음과 같이 매칭됩니다.

0 → 첫 번째 항목
1 → 두 번째 항목
이런 식으로 계속 이어집니다.

예를 들어 항목이 5개인 배열에서 세 번째 항목에 접근하려면 인덱스 2를 사용해야 합니다.

자, 이제 본론으로 들어가 보겠습니다.

splice() 메서드 만나기

배열의 특정 인덱스 위치에 항목을 추가하려면 강력한 JavaScript 메서드인 array.splice()를 사용하면 됩니다. splice()는 배열에서 항목을 추가하거나 제거할 수 있는 메서드입니다.

splice()의 기본 문법은 다음과 같습니다:

array.splice(startIndex)
array.splice(startIndex, deleteCount)
array.splice(startIndex, deleteCount, value1)

splice() 메서드는 3개 이상의 인자를 받습니다:

첫 번째 인자: startIndex — 항목을 삽입하고 싶은 위치(인덱스)입니다.
두 번째 인자: 선택 사항인 deleteCount — startIndex 위치부터 몇 개의 항목을 삭제할지 지정합니다.
세 번째 인자: 배열에 추가할 새로운 항목 값(들)입니다.

splice() 실전 예제

가상의 액션 영화 "Ask Questions Later"(먼저 묻지 마세요)의 출연진 명단이 있다고 가정해 봅시다. 배우들은 영화에서 맡은 역할의 크기를 기준으로 순서대로 나열되어 있습니다.

그런데 한 배우가 자신의 이름이 주연 리스트에 없다고 난리를 피웁니다:

const mainCastList = [
  "Michael Jai White",
  "Jean-Claude Van Damme",
  "Sigourney Weaver",
  "Jason Statham",
  "Uma Thurman",
  "The Rock",
  "Wesley Snipes"
]

화난 배우는 다름 아닌 스티븐 시걸(!!)입니다. 그는 이 영화에 딱 7초 등장하는데, 그 짧은 시간 동안 적 10명을 제압하기에는 충분한 시간이었죠. 시걸 씨는 이 정도면 주연 리스트에 올릴 만한 스크린 타임이라고 생각하는 모양입니다.

그리고 스티븐 시걸과 언쟁을 벌일 사람이 있겠습니까?

자, 방금 배운 splice() 메서드와 인자 문법을 사용해 그를 주연 리스트에 추가해 봅시다.

마이클 자이 화이트 바로 다음, 즉 두 번째 자리에 스티븐 시걸을 넣겠습니다(이유는 잠시 후에 설명드리겠습니다):

const mainCastList = [
  "Michael Jai White",
  "Jean-Claude Van Damme",
  "Sigourney Weaver",
  "Jason Statham",
  "Uma Thurman",
  "The Rock",
  "Wesley Snipes",
]

mainCastList.splice(1, 0, "Steven Seagal")

console.log(mainCastList)
// ["Michael Jai White", "Steven Seagal", "Jean-Claude Van Damme", "Sigourney Weaver", "Jason Statham", "Uma Thurman", "The Rock", "Wesley Snipes"]

됐습니다 시걸 씨, 이제 만족하시길 바랍니다!

복습은 학습의 중요한 부분이니, 위 코드에서 일어난 일을 다시 한번 살펴보겠습니다:

mainCastList 변수에 splice() 메서드를 연결합니다.
그다음 splice()에 3개의 인자를 전달합니다: 시작 인덱스(1), deleteCount(0 = 아무것도 삭제하지 않음), 마지막으로 해당 인덱스 위치에 추가할 항목("Steven Seagal")입니다.

아, 그리고 시걸 씨를 리스트 1위에 넣을 수 없는 이유는요, 당연히 마이클 자이 화이트가 그를 혼내줄 테니까요.

splice() 메서드 활용 시 알아두면 좋은 것들

여러 항목 한 번에 추가하기

여러 항목을 한 번에 추가하려면 쉼표로 구분해서 나열하면 됩니다:

mainCastList.splice(1, 0, "Steven Seagal", "Sylvester Stallone")

startIndex부터 끝까지 모두 삭제하기

두 번째 인자(예제에서는 0)를 전달하지 않으면 startIndex 위치부터 모든 항목이 기본적으로 삭제됩니다. 실제 프로젝트에서 splice()를 사용할 때는 각별히 주의하세요.

배열 끝에서부터 시작하기

배열의 시작이 아니라 끝에서부터 항목을 추가/삭제할 위치를 지정하고 싶다면, splice()의 첫 번째 인자에 음수 값을 사용하면 됩니다:

mainCastList.splice(-1, 0, "Steven Seagal")
console.log(mainCastList)
// ["Michael Jai White", "Jean-Claude Van Damme", "Sigourney Weaver", "Jason Statham", "Uma Thurman", "The Rock", "Steven Seagal", "Wesley Snipes"]