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
|
---
title: 원시 값
slug: Glossary/Primitive
tags:
- CodingScripting
- Glossary
- JavaScript
translation_of: Glossary/Primitive
---
<p>{{Glossary("JavaScript")}}에서 <strong>원시 값</strong>(primitive, 또는 원시 자료형)이란 {{Glossary("object", "객체")}}가 아니면서 {{glossary("method", "메서드")}}도 가지지 않는 데이터입니다. 원시 값에는 7종류, {{Glossary("string")}}, {{Glossary("number")}}, {{glossary("bigint")}}, {{Glossary("boolean")}}, {{Glossary("undefined")}}, {{Glossary("symbol")}}, 그리고 {{glossary("null")}}이 존재합니다.
<p>대부분의 경우, 원시 값은 언어 구현체의 가장 저급(low level) 단계에서 나타냅니다.</p>
<p>모든 원시 값은 <strong>불변</strong>하여 변형할 수 없습니다. 원시 값 자체와, 원시값을 할당한 변수를 혼동하지 않는 것이 중요합니다. 변수는 새로운 값을 다시 할당할 수 있지만, 이미 생성한 원시 값은 객체, 배열, 함수와는 달리 변형할 수 없습니다.</p>
<h2 id="예제">예제</h2>
<p>다음 예제는 원시 값이 <strong>불변</strong>함을 이해할 때 도움이 됩니다.</p>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js">// 문자열 메서드는 문자열을 변형하지 않음
var bar = "baz";
console.log(bar); // baz
bar.toUpperCase();
console.log(bar); // baz
// 배열 메소드는 배열을 변형함
var foo = [];
console.log(foo); // []
foo.push("plugh");
console.log(foo); // ["plugh"]
// 할당은 원시 값에 새로운 값을 부여 (변형이 아님)
bar = bar.toUpperCase(); // BAZ
</pre>
<p>원시 값을 교체할 수는 있지만, 직접 변형할 수는 없습니다.</p>
<h2 id="또_다른_예제_단계별_정리">또 다른 예제 [단계별 정리]</h2>
<p>다음 예제는 JavaScript가 원시값을 다루는 방법을 이해하는데 도움이 됩니다.</p>
<h3 id="JavaScript_2">JavaScript</h3>
<pre class="brush: js line-numbers language-html language-js notranslate">// 원시 값
let foo = 5;
// 원시 값을 변경해야 하는 함수 정의
function addTwo(num) {
num += 2;
}
// 같은 작업을 시도하는 다른 함수
function addTwo_v2(foo) {
foo += 2;
}
// 원시 값을 인수로 전달해 첫 번째 함수를 호출
addTwo(foo);
// 현재 원시 값 반환
console.log(foo); // 5
// 두 번째 함수로 다시 시도
addTwo_v2(foo);
console.log(foo); // 5
</pre>
<p><code>5</code> 대신 <code>7</code> 일 것이라고 예상하였나요? 그렇다면, 이 코드의 실행 과정을 살펴보세요.</p>
<ul>
<li><code>addTwo</code> 와 <code>addTwo_v2</code> 함수 호출을 위해, JavaScript는 {{glossary("identifier", "식별자")}} <code>foo</code> 의 값을 찾습니다. 이는 인스턴스화된 첫 번째 구문의 변수를 올바르게 찾습니다.</li>
<li>찾은 다음, JavaScript는 인수를 함수의 매개변수로서 전달합니다.</li>
<li>함수의 본문 내 구문들을 실행하기 전에, <strong>JavaScript는 원래 전달된 인수(원시 값)를 복사해</strong> 로컬 복사본을 생성합니다. 이러한 복사본은 함수의 스코프 내에서만 존재하며, 함수 정의 내에 지정한 식별자를 통해 접근가능합니다(<code>addTwo</code> 의 <code>num</code>, <code>addTwo_v2</code> 의 <code>foo</code>).</li>
<li>그 후, 함수의 구문들이 실행됩니다.
<ul>
<li>첫 번째 함수내에서, 로컬 <code>num</code> 인수가 생성되었습니다. 이 값을 2 증가시키는 것이며, 원래 <code>foo</code> 의 값이 아닙니다!</li>
<li>두 번째 함수내에서, 로컬 <code>foo</code> 인수가 생성되었습니다. 이 값을 2 증가시키는 것이며, 원래(외부) <code>foo</code> 의 값이 아닙니다! 또한, 이 경우에서, 외부 <code>foo</code> 변수에는 <strong>어떤 방법으로든</strong> 접근할 수 없습니다. 이는 자바스크립트의 어휘적 유효 범위(lexical scoping)와 결과 변수 섀도잉 때문입니다. 로컬 <code>foo</code> 는 외부 <code>foo</code> 를 숨깁니다. 자세한 내용은, <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Closures">클로저</a> 문서를 보세요.</li>
</ul>
</li>
<li>결과적으로, 우리 함수들 내부의 모든 변경은 그 <strong>복사본</strong>으로 작업하였기 때문에, 원본 <code>foo</code> 에 전혀 영향을 주지 <strong>않았습니다</strong>.</li>
</ul>
<p>이것이 원시 값이 변하지 않는 이유입니다. 원시 값에 직접 작업하지 않으므로, 원본을 건드리지 않고 복사본 가져와 계속 작업을 합니다.</p>
<h2 id="JavaScript에서의_원시_래퍼_객체">JavaScript에서의 원시 래퍼 객체</h2>
<p><code>null</code>과 <code>undefined</code> 를 제외하고, 모든 원시 값은 원시 값을 래핑한 객체를 갖습니다.</p>
<ul>
<li>문자열 원시 값을 위한 {{jsxref("String")}} 객체.</li>
<li>숫자 원시 값을 위한 {{jsxref("Number")}} 객체.</li>
<li>빅인트 원시 값을 위한 {{jsxref("BigInt")}} 객체.</li>
<li>불리언 원시 값을 위한 {{jsxref("Boolean")}} 객체.</li>
<li>심볼 원시 값을 위한 {{jsxref("Symbol")}} 객체.</li>
</ul>
<p>래퍼 객체의 {{jsxref("Object.valueOf", "valueOf()")}} 메서드는 원시 값을 반환합니다.</p>
<h2 id="더_알아보기">더 알아보기</h2>
<h3 id="일반_지식">일반 지식</h3>
<ul>
<li><a href="/ko/docs/Web/JavaScript/Data_structures">JavaScript의 자료형 소개</a></li>
<li>위키백과 {{Interwiki("wikipedia", "원시 자료형")}}</li>
</ul>
<section id="Quick_links">
<ol>
<li><a href="/ko/docs/Glossary">용어 사전</a>
<ol>
<li>{{Glossary("JavaScript")}}</li>
<li>{{Glossary("string")}}</li>
<li>{{Glossary("number")}}</li>
<li>{{Glossary("bigint")}}</li>
<li>{{Glossary("boolean")}}</li>
<li>{{Glossary("null")}}</li>
<li>{{Glossary("undefined")}}</li>
<li>{{Glossary("symbol")}}</li>
</ol>
</li>
<li><a href="/ko/docs/Web/JavaScript/Data_structures">JavaScript의 자료형</a></li>
</ol>
</section>
|
