1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
---
title: Array.prototype.splice()
slug: Web/JavaScript/Reference/Global_Objects/Array/splice
tags:
- Array
- JavaScript
- Method
- Prototype
- Reference
translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice
---
<div>{{JSRef}}</div>
<p><code><strong>splice()</strong></code> 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.</p>
<div>{{EmbedInteractiveExample("pages/js/array-splice.html")}}</div>
<h2 id="구문">구문</h2>
<pre class="syntaxbox">array.splice(<em>start</em>[, <em>deleteCount</em>[, <em>item1</em>[, <em>item2</em>[, <em>...</em>]]]])
</pre>
<h3 id="매개변수">매개변수</h3>
<dl>
<dt><code>start</code></dt>
<dd>배열의 변경을 시작할 인덱스입니다. 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정됩니다. 음수인 경우 배열의 끝에서부터 요소를 세어나갑니다(원점 -1, 즉 -n이면 요소 끝의 n번째 요소를 가리키며 <code>array.length - n</code>번째 인덱스와 같음). 값의 절대값이 배열의 길이 보다 큰 경우 0으로 설정됩니다.</dd>
<dt><code>deleteCount</code> {{optional_inline}}</dt>
<dd>배열에서 제거할 요소의 수입니다.</dd>
<dd><code>deleteCount</code>를 생략하거나 값이 <code>array.length - start</code>보다 크면 <code>start</code>부터의 모든 요소를 제거합니다.</dd>
<dd><code>deleteCount</code>가 0 이하라면 어떤 요소도 제거하지 않습니다. 이 때는 최소한 하나의 새로운 요소를 지정해야 합니다.</dd>
<dt><code>item1, item2, <em>...</em></code> {{optional_inline}}</dt>
<dd>배열에 추가할 요소입니다. 아무 요소도 지정하지 않으면 <code>splice()</code>는 요소를 제거하기만 합니다.</dd>
</dl>
<h3 id="반환_값">반환 값</h3>
<p>제거한 요소를 담은 배열. 하나의 요소만 제거한 경우 길이가 1인 배열을 반환합니다. 아무 값도 제거하지 않았으면 빈 배열을 반환합니다.</p>
<h2 id="설명">설명</h2>
<p>만약 제거할 요소의 수와 추가할 요소의 수가 다른 경우 배열의 길이는 달라집니다.</p>
<h2 id="예제">예제</h2>
<h3 id="하나도_제거하지_않고_2번_인덱스에_drum_추가">하나도 제거하지 않고, 2번 인덱스에 "drum" 추가</h3>
<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum');
// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"]
// removed is [], no elements removed</pre>
<h3 id="하나도_제거하지_않고_2번_인덱스에_drum과_guitar_추가">하나도 제거하지 않고, 2번 인덱스에 "drum"과 "guitar" 추가</h3>
<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum', 'guitar');
// myFish is ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// removed is [], no elements removed
</pre>
<h3 id="3번_인덱스에서_한_개_요소_제거">3번 인덱스에서 한 개 요소 제거</h3>
<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
var removed = myFish.splice(3, 1);
// removed is ["mandarin"]
// myFish is ["angel", "clown", "drum", "sturgeon"]
</pre>
<h3 id="2번_인덱스에서_한_개_요소_제거하고_trumpet_추가">2번 인덱스에서 한 개 요소 제거하고 "trumpet" 추가</h3>
<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
var removed = myFish.splice(2, 1, 'trumpet');
// myFish is ["angel", "clown", "trumpet", "sturgeon"]
// removed is ["drum"]</pre>
<h3 id="0번_인덱스에서_두_개_요소_제거하고_parrot_anemone_blue_추가">0번 인덱스에서 두 개 요소 제거하고 "parrot", "anemone", "blue" 추가</h3>
<pre class="brush: js">var myFish = ['angel', 'clown', 'trumpet', 'sturgeon'];
var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue');
// myFish is ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
// removed is ["angel", "clown"]</pre>
<h3 id="2번_인덱스에서_두_개_요소_제거">2번 인덱스에서 두 개 요소 제거</h3>
<pre class="brush: js">var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon'];
var removed = myFish.splice(myFish.length - 3, 2);
// myFish is ["parrot", "anemone", "sturgeon"]
// removed is ["blue", "trumpet"]</pre>
<h3 id="-2번_인덱스에서_한_개_요소_제거">-2번 인덱스에서 한 개 요소 제거</h3>
<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(-2, 1);
// myFish is ["angel", "clown", "sturgeon"]
// removed is ["mandarin"]</pre>
<h3 id="2번_인덱스를_포함해서_이후의_모든_요소_제거">2번 인덱스를 포함해서 이후의 모든 요소 제거</h3>
<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2);
// myFish is ["angel", "clown"]
// removed is ["mandarin", "sturgeon"]</pre>
<h2 id="명세">명세</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('ES3')}}</td>
<td>{{Spec2('ES3')}}</td>
<td>Initial definition. Implemented in JavaScript 1.2.</td>
</tr>
<tr>
<td>{{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}}</td>
<td>{{Spec2('ES5.1')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td>
<td>{{Spec2('ES6')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("javascript.builtins.Array.splice")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>{{jsxref("Array.prototype.push()", "push()")}} / {{jsxref("Array.prototype.pop()", "pop()")}} — 배열 끝에 요소를 추가하거나 제거</li>
<li>{{jsxref("Array.prototype.unshift()", "unshift()")}} / {{jsxref("Array.prototype.shift()", "shift()")}} — 배열 처음에 요소를 추가하거나 제거</li>
<li>{{jsxref("Array.prototype.concat()", "concat()")}} — 배열과 배열 또는 값을 합친 새로운 배열 반환</li>
</ul>
|
