JavaScript에서 기존 배열에 새로운 값을 추가하려면 splice() 메서드를 사용하면 됩니다.
splice() 메서드는 배열의 특정 위치에 요소를 삽입하거나 삭제할 때 활용되는 강력한 도구입니다. 세 번째 인자부터 전달되는 값들이 배열에 새롭게 추가되며, 두 번째 인자를 0으로 설정하면 기존 요소를 삭제하지 않고 순수하게 삽입만 수행합니다.
splice() 메서드의 기본 문법
array.splice(시작인덱스, 삭제할개수, 추가할요소1, 추가할요소2, ...)
- 시작인덱스: 요소를 삽입하거나 삭제할 시작 위치
- 삭제할개수: 제거할 요소의 개수 (삽입만 하려면 0 지정)
- 추가할요소: 배열에 새로 넣을 값들
예제 코드
아래 코드를 실행하면 기존 배열에 새로운 값을 추가하는 과정을 확인할 수 있습니다.
<html>
<head>
<title>JavaScript Array splice Method</title>
</head>
<body>
<script>
var arr = ["orange", "mango", "banana", "sugar", "tea"];
document.write("원본 배열:" + arr);
var newArr = arr.splice(2, 0, "water");
document.write("<br>새 요소 추가 후: " + arr);
</script>
</body>
</html>실행 결과
원본 배열: orange,mango,banana,sugar,tea 새 요소 추가 후: orange,mango,water,banana,sugar,tea
코드 설명
위 예제에서 arr.splice(2, 0, "water")는 다음과 같이 동작합니다.
- 인덱스 2번째 위치(세 번째 요소)부터 작업을 시작합니다.
- 두 번째 인자가 0이므로 어떤 요소도 삭제하지 않습니다.
- 해당 위치에 "water"를 삽입하고, 기존 요소들은 뒤로 밀려납니다.
그 결과 "water"가 "mango"와 "banana" 사이에 정확히 들어간 것을 확인할 수 있습니다.
참고: push()와의 차이점
배열 끝에 단순히 값을 추가하고 싶다면 push() 메서드를 사용하는 것이 더 간편합니다. 반면 splice()는 배열의 원하는 위치 어디든 자유롭게 삽입·삭제가 가능하다는 장점이 있으므로, 상황에 맞게 적절한 메서드를 선택하는 것이 좋습니다.