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
|
---
title: Array.prototype.concat()
slug: Web/JavaScript/Reference/Global_Objects/Array/concat
tags:
- Array
- JavaScript
- Method
- Prototype
- Reference
translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat
---
<div>{{JSRef}}</div>
<p><code><strong>concat()</strong></code> 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다. </p>
<ul>
<li>기존배열을 변경하지 않습니다. </li>
<li> 추가된 새로운 배열을 반환합니다.</li>
</ul>
<div>{{EmbedInteractiveExample("pages/js/array-concat.html")}}</div>
<h2 id="구문">구문</h2>
<pre class="syntaxbox"><var>array</var>.concat([value1[, value2[, ...[, <var>valueN</var>]]]])</pre>
<h3 id="매개변수">매개변수</h3>
<ul>
<li>배열 또는 값 </li>
<li>만약 value1 ~ valueN 인자를 생략하면 기존배열의 얕은 복사본을 반환.</li>
</ul>
<dl>
<dt><code>valueN</code> {{optional_inline}}</dt>
<dd>자세한 내용은 아래 설명을 참고하세요.</dd>
</dl>
<h3 id="반환값">반환값</h3>
<p>새로운 {{jsxref("Array")}} 객체.</p>
<h2 id="설명">설명</h2>
<p><code>concat</code>은 메서드를 호출한 배열 뒤에 각 인수를 순서대로 붙여 새로운 배열을 만듭니다. 인수가 배열이면 그 구성요소가 순서대로 붙고, 배열이 아니면 인수 자체가 붙습니다. 중첩 배열 내부로 재귀하지 않습니다.</p>
<p><code>concat</code>은 <code>this</code>나 인수로 넘겨진 배열의 내용을 바꾸지 않고, 대신 주어진 배열을 합친 뒤 그 얕은 사본을 반환합니다. 새 배열에는 원본 배열의 요소를 다음과 같은 방법으로 복사합니다.</p>
<ul>
<li>실제 객체가 아닌 객체 참조: <code>concat</code>은 새 배열에 참조를 복사합니다. 원본 배열과 새 배열에서 같은 객체를 가리키게 됩니다. 즉, 참조하는 객체를 수정하면 그 내용이 새 배열과 원본 배열 둘 다에서 나타납니다.</li>
<li>문자열, 숫자, 불리언 등 자료형({{jsxref("String")}}, {{jsxref("Number")}}, {{jsxref("Boolean")}} 객체 아님): <code>concat</code>은 새 배열에 문자열과 수의 값을 복사합니다.</li>
</ul>
<div class="note">
<p><strong>참고:</strong> 배열이나 값을 이어붙여도 원본은 변하지 않으며, 새로운 배열이나 원본 배열을 조작해도 서로 영향을 받지 않습니다.</p>
</div>
<h2 id="예제">예제</h2>
<h3 id="배열_두_개_이어붙이기">배열 두 개 이어붙이기</h3>
<p>다음 예제는 두 개의 배열을 이어붙입니다.</p>
<pre class="brush: js">const alpha = ['a', 'b', 'c'];
const numeric = [1, 2, 3];
alpha.concat(numeric);
// 결과: ['a', 'b', 'c', 1, 2, 3]
</pre>
<h3 id="배열_세_개_이어붙이기">배열 세 개 이어붙이기</h3>
<p>다음 예제는 세 개의 배열을 이어붙입니다.</p>
<pre class="brush: js">const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];
num1.concat(num2, num3);
// 결과: [1, 2, 3, 4, 5, 6, 7, 8, 9]
</pre>
<h3 id="배열에_값_이어붙이기">배열에 값 이어붙이기</h3>
<p>다음 코드는 배열에 세 개의 값을 이어붙입니다.</p>
<pre class="brush: js">const alpha = ['a', 'b', 'c'];
alpha.concat(1, [2, 3]);
// 결과: ['a', 'b', 'c', 1, 2, 3]
</pre>
<h2 id="명세">명세</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">표준</th>
<th scope="col">상태</th>
<th scope="col">비고</th>
</tr>
<tr>
<td>{{SpecName('ES3')}}</td>
<td>{{Spec2('ES3')}}</td>
<td>최초 정의. JavaScript 1.2에서 구현됨.</td>
</tr>
<tr>
<td>{{SpecName('ES5.1', '#sec-15.4.4.4', 'Array.prototype.concat')}}</td>
<td>{{Spec2('ES5.1')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('ES6', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td>
<td>{{Spec2('ES6')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<div>{{Compat("javascript.builtins.Array.concat")}}</div>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>{{jsxref("Array.push", "push")}} / {{jsxref("Array.pop", "pop")}} — 배열의 뒤에 요소 추가/제거</li>
<li>{{jsxref("Array.unshift", "unshift")}} / {{jsxref("Array.shift", "shift")}} — 배열의 앞에 요소 추가/제거</li>
<li>{{jsxref("Array.splice", "splice")}} — 배열의 특정 위치에 요소 추가/제거</li>
<li>{{jsxref("String.prototype.concat()")}}</li>
</ul>
|
