blob: 43adf695eeada092341e9fc1db201370e67826fe (
plain)
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
154
155
156
157
|
---
title: const
slug: Web/JavaScript/Reference/Statements/const
tags:
- ECMAScript 2015
- JavaScript
- Language feature
- Reference
- Statement
- constants
translation_of: Web/JavaScript/Reference/Statements/const
---
<div>{{jsSidebar("Statements")}}</div>
<p>定数 (const) は、<code><a href="/ja/docs/Web/JavaScript/Reference/Statements/let">let</a></code> キーワードを使って定義する変数と同じ、ブロックスコープを持ちます。定数の値は、再代入による変更はできず、再宣言もできません。</p>
<div>{{EmbedInteractiveExample("pages/js/statement-const.html")}}</div>
<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox notranslate">const <var>name1</var> = <var>value1</var> [, <var>name2</var> = <var>value2</var> [, ... [, <var>nameN</var> = <var>valueN</var>]]];</pre>
<dl>
<dt><code><var>nameN</var></code></dt>
<dd>定数名。正当な{{Glossary("identifier", "識別子")}}ならは、どんなものでもかまいません。</dd>
<dt><code><var>valueN</var></code></dt>
<dd>定数の値。正当な<a href="/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions">式</a>ならば、どんなものでもかまいません。</dd>
</dl>
<p><a href="/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">分割代入</a>構文は、変数の宣言にも使用できます。</p>
<pre class="syntaxbox notranslate">const <var>{ bar }</var> = <em>foo</em>; // where foo = { bar:10, baz:12 };
/* これは、値が 10 の 'bar' という名前の変数を作成します。*/</pre>
<dl>
</dl>
<h2 id="Description" name="Description">解説</h2>
<p>この宣言は、宣言された場所に応じて、グローバルまたはブロック内にローカルなスコープを持った定数を作成します。グローバルな定数は {{jsxref("Statements/var", "var")}} 変数とは異なり、{{domxref("window")}} オブジェクトのプロパティには<strong>なりません</strong>。</p>
<p>定数には初期化子が必要です。その値は、宣言されたのと同じ文の中で指定しなければなりません。(後から変更できないことを考えると、これは理にかなっています)</p>
<p><strong><code>const</code> 宣言</strong>は、値への読み取り専用の参照を作ります。これは、定数に保持されている値は<strong>不変ではなく</strong>、その変数の識別子が再代入できないということです。たとえば、定数の中身がオブジェクトの場合、オブジェクトの内容(プロパティなど)は変更可能です。</p>
<p>「<a href="/ja/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone">一時的なデッドゾーン</a>」に関する考慮事項はすべて、{{jsxref("Statements/let", "let")}} と <code>const</code> の両方に適用されます。</p>
<p>定数は、同じスコープ内の関数や変数と同じ名前にすることはできません。</p>
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Basic_const_usage" name="Basic_const_usage">基本的な定数の使い方</h3>
<p>定数は大文字または小文字で宣言することができますが、すべて大文字で宣言するのが慣例です。</p>
<pre class="brush: js; notranslate">// MY_FAV を定数として定義して、その値を 7 にします。
const MY_FAV = 7;
// これはエラーを投げます。
// Uncaught TypeError: Assignment to constant variable.
MY_FAV = 20;
// MY_FAV は 7 です。
console.log('my favorite number is: ' + MY_FAV);
// 定数を再宣言しようとするとエラーを投げます。
// Uncaught SyntaxError: Identifier 'MY_FAV' has already been declared
const MY_FAV = 20;
// MY_FAV という名前は上記の定数のために予約されているので、これも失敗します。
var MY_FAV = 20;
// これもエラーを投げます。
let MY_FAV = 20;
</pre>
<h3 id="Block_scoping" name="Block_scoping">ブロックスコープ</h3>
<p>ブロックスコープの性質に注意することが重要です。</p>
<pre class="brush: js notranslate">if (MY_FAV === 7) {
// これは問題なく、ブロックスコープの MY_FAV 変数を作成します。
// (ブロックスコープの変数を宣言する let も問題なく機能します)
let MY_FAV = 20;
// MY_FAV は現在 20 です。
console.log('my favorite number is ' + MY_FAV);
// これはグローバルコンテキストに巻き上げられ、エラーを投げます。
var MY_FAV = 20;
}
// MY_FAV は 7 のままです。
console.log('my favorite number is ' + MY_FAV);
</pre>
<h3 id="const_needs_to_be_initialized" name="const_needs_to_be_initialized">定数は初期化が必要です。</h3>
<pre class="brush: js notranslate">// エラーが投げられます。
// Uncaught SyntaxError: Missing initializer in const declaration
const FOO;
</pre>
<h3 id="const_in_objects_and_arrays" name="const_in_objects_and_arrays">オブジェクトと配列の定数</h3>
<p>定数はオブジェクトや配列に対しても動作します。</p>
<pre class="brush: js notranslate">const MY_OBJECT = {'key': 'value'};
// オブジェクトの上書きはエラーを投げます。
// Uncaught TypeError: Assignment to constant variable.
MY_OBJECT = {'OTHER_KEY': 'value'};
// しかしながら、オブジェクトのキーは保護されていないので、
// 次の文は問題なく実行されます。
MY_OBJECT.key = 'otherValue'; // Object.freeze() を使用すればオブジェクトを不変にできます。
// 配列も同じです。
const MY_ARRAY = [];
// 配列にアイテムをプッシュすることができます。
MY_ARRAY.push('A'); // ["A"]
// しかしながら、新しい配列を変数に代入するとエラーを投げます。
// Uncaught TypeError: Assignment to constant variable.
MY_ARRAY = ['B'];</pre>
<h2 id="Specifications" name="Specifications">仕様</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、<a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
<p>{{Compat("javascript.statements.const")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{jsxref("Statements/var", "var")}}</li>
<li>{{jsxref("Statements/let", "let")}}</li>
<li><a href="/ja/docs/Web/JavaScript/Guide/Grammar_and_types#Constants">JavaScript ガイド - 『値、変数、リテラル』 - 定数</a></li>
</ul>
|