배열의 원하는 위치에 요소를 추가해야 하는 경우가 종종 있습니다. 하지만 JavaScript는 이 기능을 기본적으로 제공하지 않기 때문에, 직접 함수를 만들어 사용해야 합니다. 이 함수를 Array 프로토타입에 추가하면 모든 배열 객체에서 바로 호출하여 사용할 수 있다는 장점이 있습니다.
커스텀 insert 메서드 만들기
아래 예제는 Array.prototype에 insert 메서드를 추가하는 코드입니다. 위치 값이 배열 길이보다 크면 맨 뒤에 추가하고, 0 이하이면 맨 앞에 추가하며, 그 외의 경우에는 해당 위치 뒤의 요소들을 한 칸씩 뒤로 밀어낸 후 새 요소를 삽입합니다.
Array.prototype.insert = function(data, position) {
if (position >= this.length) {
this.push(data) // 위치가 배열 전체 길이보다 크면 맨 끝에 추가
} else if (position <= 0) {
this.unshift(data) // 위치가 0 이하면 맨 앞에 추가
} else { // 기존 요소들을 오른쪽으로 한 칸씩 이동
for (let i = this.length; i >= position; i--) {
this[i] = this[i - 1];
}
this[position] = data;
}
}
let arr = [1, 2, 3, 4];
arr.insert(-1, 2);
console.log(arr);실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
[1, 2, -1, 3, 4]
이렇게 하면 이후 생성하는 모든 배열 객체에서 insert 메서드를 자유롭게 사용할 수 있습니다.
splice() 메서드 활용하기
사실 별도의 커스텀 함수 없이도 내장 메서드인 splice()를 사용하면 배열의 지정된 위치에 손쉽게 요소를 삽입할 수 있습니다.
var months = ['Jan', 'March', 'April', 'June']; months.splice(1, 0, 'Feb'); console.log(months);
실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
['Jan', 'Feb', 'March', 'April', 'June']
splice() 메서드의 인자 설명
splice() 메서드의 각 인자는 다음과 같은 역할을 합니다.
- 첫 번째 인자: 요소를 삭제하거나 삽입할 시작 인덱스입니다.
- 두 번째 인자: 삭제할 요소의 개수입니다. 위 예제에서는
0을 전달했기 때문에 아무 요소도 삭제되지 않고 삽입만 이루어집니다. - 세 번째 인자부터: 배열에 삽입할 실제 값들이며, 여러 개를 한 번에 전달할 수도 있습니다.
요소 추가만 필요한 경우에는 두 번째 인자를 0으로 설정하면 되고, 기존 요소를 교체하고 싶다면 삭제할 개수를 함께 지정하면 됩니다. 대부분의 상황에서는 표준 내장 메서드인 splice()를 사용하는 것이 코드 가독성과 유지보수 측면에서 더 권장됩니다.