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
|
---
title: Array.prototype.fill()
slug: Web/JavaScript/Reference/Global_Objects/Array/fill
tags:
- Array
- ECMAScript 2015
- JavaScript
- Method
- Prototype
- polyfill
translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill
---
<div>{{JSRef}}</div>
<p><code><strong>fill()</strong></code> 메서드는 배열의 시작 인덱스부터 끝 인덱스의 이전까지 정적인 값 하나로 채웁니다.</p>
<p>{{EmbedInteractiveExample("pages/js/array-fill.html")}}</p>
<h2 id="Syntax">구문</h2>
<pre class="syntaxbox"><code><var>arr</var>.fill(<var>value</var>[, <var>start<var>[, <var>end</var>]])</var></var></code></pre>
<h3 id="Parameters">매개변수</h3>
<dl>
<dt><code>value</code></dt>
<dd>배열을 채울 값.</dd>
<dt><code>start</code> {{optional_inline}}</dt>
<dd>시작 인덱스, 기본 값은 0.</dd>
<dt><code>end</code> {{optional_inline}}</dt>
<dd>끝 인덱스, 기본 값은 <code>this.length</code>.</dd>
</dl>
<h3 id="반환_값">반환 값</h3>
<p>변형한 배열.</p>
<h2 id="Description">설명 </h2>
<p><code>fill</code> 메서드는 <code>value</code>, <code>start</code>, <code>end</code>의 3개 인자를 가집니다. <code>start</code>와 <code>end</code> 인자는 선택 사항으로써 기본값으로 각각 <code>0</code>과, <code>this</code> 객체의 <code>length</code>를 가집니다.</p>
<p><code>length</code>가 배열의 길이일 때, <code>start</code>가 음수이면 시작 인덱스는 <code>length+start</code>입니다. <code>end</code>가 음수이면 끝 인덱스는 <code>length+end</code>입니다.</p>
<p><code>fill</code>은 일반 함수이며, <code>this</code> 값이 배열 객체일 필요는 없습니다.</p>
<p><code>fill</code> 메서드는 변경자 메서드로, 복사본이 아니라 <code>this</code> 객체를 변형해 반환합니다.</p>
<p><code>value</code>에 객체를 받을 경우 그 참조만 복사해서 배열을 채웁니다.</p>
<h2 id="Examples">예제</h2>
<pre class="brush: js">[1, 2, 3].fill(4); // [4, 4, 4]
[1, 2, 3].fill(4, 1); // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2); // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1); // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3); // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2); // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN); // [1, 2, 3]
[1, 2, 3].fill(4, 3, 5); // [1, 2, 3]
Array(3).fill(4); // [4, 4, 4]
[].fill.call({ length: 3 }, 4); // {0: 4, 1: 4, 2: 4, length: 3}
// Objects by reference.
var arr = Array(3).fill({}); // [{}, {}, {}]
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]
</pre>
<h2 id="Polyfill">폴리필</h2>
<pre><code>if (!Array.prototype.fill) {
Object.defineProperty(Array.prototype, 'fill', {
value: function(value) {
// Steps 1-2.
if (this == null) {
throw new TypeError('this is null or not defined');
}
var O = Object(this);
// Steps 3-5.
var len = O.length >>> 0;
// Steps 6-7.
var start = arguments[1];
var relativeStart = start >> 0;
// Step 8.
var k = relativeStart < 0 ?
Math.max(len + relativeStart, 0) :
Math.min(relativeStart, len);
// Steps 9-10.
var end = arguments[2];
var relativeEnd = end === undefined ?
len : end >> 0;
// Step 11.
var final = relativeEnd < 0 ?
Math.max(len + relativeEnd, 0) :
Math.min(relativeEnd, len);
// Step 12.
while (k < final) {
O[k] = value;
k++;
}
// Step 13.
return O;
}
});
}</code></pre>
<h2 id="Specifications">명세</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('ES2015', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td>
<td>{{Spec2('ES2015')}}</td>
<td>Initial definition.</td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">브라우저 호환성</h2>
<div>{{Compat("javascript.builtins.Array.fill")}}</div>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>{{jsxref("Array")}}</li>
<li>{{jsxref("TypedArray.prototype.fill()")}}</li>
</ul>
|
