JavaScript에서 배열의 특정 위치 값 교체하기 - splice() 메서드 활용법

JavaScript에서 배열의 특정 위치에 있는 값을 다른 값으로 교체하려면 splice() 메서드를 사용하면 됩니다. splice()는 배열을 직접 수정하면서 지정한 인덱스부터 원하는 개수만큼 요소를 제거하고, 그 자리에 새로운 요소를 삽입할 수 있는 강력한 메서드입니다.

splice() 메서드의 기본 문법

splice() 메서드는 다음과 같은 형태로 사용합니다.

array.splice(startIndex, deleteCount, newItem)

• startIndex: 변경을 시작할 인덱스 위치
• deleteCount: 제거할 요소의 개수
• newItem: 해당 위치에 삽입할 새로운 요소

예제 코드

아래 예제에서는 이름 목록 배열에서 2번 인덱스(세 번째)에 있는 값을 'Adam'으로 교체합니다.

var changePosition = 2;
var listOfNames = ['John', 'David', 'Mike', 'Sam', 'Carol'];
console.log("교체 전 =");
console.log(listOfNames);
var name = 'Adam';
var result = listOfNames.splice(changePosition, 1, name);
console.log("교체 후 =");
console.log(listOfNames);

실행 방법

위 프로그램을 실행하려면 Node.js 환경에서 다음 명령어를 입력합니다.

node fileName.js

실행 결과

파일명이 demo154.js인 경우, 실행 결과는 다음과 같습니다.

PS C:\Users\Amit\JavaScript-code> node demo154.js
교체 전 =
[ 'John', 'David', 'Mike', 'Sam', 'Carol' ]
교체 후 =
[ 'John', 'David', 'Adam', 'Sam', 'Carol' ]

코드 설명

위 코드에서 listOfNames.splice(2, 1, name)은 세 번째 인수가 의미하는 바가 중요합니다. 즉, 인덱스 2(세 번째 요소)부터 시작해 1개의 요소를 삭제하고, 그 자리에 'Adam'을 삽입하라는 뜻입니다. 그 결과 'Mike'가 제거되고 'Adam'이 그 위치를 대체하게 됩니다.

참고로 splice() 메서드는 원본 배열을 직접 변경(mutate)한다는 점에 유의해야 합니다. 만약 원본 배열을 유지하고 싶다면, 먼저 slice()나 스프레드 연산자(...)로 복사본을 만든 후 splice()를 적용하는 것이 좋습니다.