-
Notifications
You must be signed in to change notification settings - Fork 17
/
variablen.html
369 lines (350 loc) · 28.8 KB
/
variablen.html
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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>JavaScript: Variablen und Konstanten</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="js-doku.css">
</head>
<body>
<div id="nav">
<p>Hier entsteht eine <strong>JavaScript-Dokumentation</strong> von <a href="https://molily.de/">molily</a>. Derzeit ist sie noch lückenhaft, wächst aber nach und nach. Kommentare und Feedback werden gerne per <a href="mailto:[email protected]">E-Mail</a> entgegen genommen.</p>
<p class="contents-link"><a href="./">Zum Inhaltsverzeichnis</a></p>
</div>
<h1>JavaScript: Variablen und Konstanten</h1>
<div class="section" id="variablen">
<h2>Einführung</h2>
<p>Ein jedes JavaScript-Programm arbeitet mit Werten, die im Arbeitsspeicher aufbewahrt werden. Um die Werte gesondert speichern und ansprechen zu können, werden Namen verwendet.</p>
<p>Eine <strong>Variable</strong> (aus dem Lateinischen für veränderbar) kann man sich zunächst als eine Schachtel mit einem Namen vorstellen, in der Wert gespeichert ist.</p>
<p>Im Kapitel über Syntax haben wir die einfache <a href="syntax.html#variablen-deklaration">Variablen-Deklaration</a> bereits kennengelernt. In diesem Kapitel schauen wir uns Variablen im Detail an.</p>
<p>Ein einfaches Beispiel:</p>
<pre>var alter = 32;</pre>
<p>Dies erzeugt eine Variable <code>alter</code> und weist ihr den Wert <code>32</code> zu.</p>
<p>Das Schema der Variablen-Deklaration lautet:</p>
<pre>var <var>Bezeichner</var> = <var>Ausdruck</var>;</pre>
<p>Auf das feste Schlüsselwort <code>var</code> folgt der Name der Variable, genauer gesagt der <a href="#bezeichner">Bezeichner</a>. Danach kommt ein festes <code>=</code> für die Wertzuweisung und schließlich der Wert. Der Wert kann als ein beliebig komplexer <a href="syntax.html#ausdruecke">Ausdruck</a> notiert sein.</p>
</div>
<div class="section" id="variablen-ohne-wert">
<h2>Variablen deklarieren ohne Wert</h2>
<p>Es ist möglich, eine Variable zu deklarieren, ohne ihr einen Wert zuzuweisen. Das sieht beispielsweise so aus:</p>
<pre>var alter;</pre>
<p>Dies erzeugt eine Variable, auf die später verwiesen werden kann. Sie können ihr später mit dem Zuweisungsoperator einen Wert geben, etwa so:</p>
<pre>alter = 32;</pre>
<p>Tatsächlich gibt es keine Variablen ohne Wert. Wenn Sie eine Variable bloß deklarieren, dann bekommt sie automatisch den Wert <a href="kernobjekte.html#undefined">undefined</a>. Sie könnten also gleichermaßen schreiben:</p>
<pre>var alter = undefined;</pre>
<p>In der Praxis hat es sich bewährt, Variablen bei der Deklaration wenn möglich auch einen ausdrücklichen Wert zuzuweisen.</p>
</div>
<div class="section" id="mehrere-variablen">
<h2>Mehrere Variablen deklarieren</h2>
<p>Wenn Sie mehrere Variablen auf einmal deklarieren möchten, so gibt es zwei Schreibweisen. Entweder Sie nutzen mehrere Variablen-Deklarationen:</p>
<pre>
var a = 20;
var b = 40;
var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
</pre>
<p>Oder Sie nutzen eine einzige Variablen-Deklaration und trennen die deklarierten Variablen mit einem Komma:</p>
<pre>
var a = 20,
b = 40,
c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
</pre>
<p>Um die Lesbarkeit zu verbessern, wird pro Zeile eine Variable notiert und die Folgezeilen werden eingerückt.</p>
<p>Die zweite, kurze Schreibweise bringt einige Tücken mit sich. Wenn Sie das Komma vergessen oder einzelne Zeilen verschieben, so wird aus der Variablen-Deklaration eine Wertzuweisung. Diese kann unabsichtlich eine <a href="#globale-variablen">globale Variable</a> anlegen.</p>
<p>Die erste, lange Schreibweise mit mehreren Variablen-Deklarationen ist daher empfehlenswert.</p>
</div>
<div class="section" id="scope">
<h2>Geltungsbereiche</h2>
<p>Jede Variable hat einen gewissen Geltungsbereich (englisch <em>scope</em> = Bereich), in dem sie erzeugt wird und über danach ihren Namen ansprechbar ist.</p>
<p>Es gibt in JavaScript drei Geltungsbereiche, geordnet nach ihrer Größe:</p>
<ol>
<li>Globaler Geltungsbereich</li>
<li>Funktions-Geltungsbereich</li>
<li>Block-Geltungsbereich</li>
</ol>
<p>Um Konflikte zwischen Variablen zu vermeiden und Programme einfach zu halten, gilt folgende Grundregel: Der Geltungsbereich einer Variable sollte immer so klein wie möglich sein. Verwenden Sie wenn möglich den Block-Geltungsbereich, andernfalls den Funktions-Geltungsbereich. Deklarieren Sie eine Variable nur in Ausnahmefällen im globalen Geltungsbereich.</p>
<p>Im Folgenden schauen wir uns an, wie wir Variablen in den jeweiligen Geltungsbereichen erzeugen.</p>
</div>
<div class="section" id="globale-variablen">
<h2>Globale Variablen (<code>var</code>)</h2>
<p>Eine Variablen-Deklaration mit <code>var</code>, die <em>außerhalb</em> einer Funktion steht, erzeugt eine <em>globale Variable</em>. Global bedeutet, dass sie in allen anderen Geltungsbereichen verfügbar ist.</p>
<pre>
var globaleVariable = 'überall verfügbar';
</pre>
<p>Wenn Sie dies direkt in einem Script notieren, so wird eine globale Variable angelegt.</p>
<p>Globale Variablen werden nicht in einem unsichtbaren Geltungsbereich gespeichert, sondern am obersten, globalen Objekt. Das ist <code>window</code>. Wenn Sie eine globale Variable erzeugen, legen Sie damit eine gleichnamige Eigenschaft am Objekt <code>window</code> an.</p>
<pre>
var globaleVariable = 'überall verfügbar';
// Ausgabe: »überall verfügbar«
window.alert(window.globaleVariable);
</pre>
<p>Die Variable im Beispiel können Sie also auch über <code>window.globaleVariable</code> lesen und schreiben. Die Deklaration einer globalen Variable entspricht der Wertzuweisung an die <code>window</code>-Eigenschaft:</p>
<pre>var globaleVariable = 'überall verfügbar';</pre>
<p>ist in dem Fall gleichwertig mit</p>
<pre>window.globaleVariable = 'überall verfügbar';</pre>
<p>Das <code>window</code>-Objekt enthält bereits hunderte vordefinierte Eigenschaften. Die Kernobjekte und viele weitere Programmierschnittstellen sind über <code>window</code> erreichbar. Das bedeutet, der globale Geltungsbereich ist ein »öffentlicher Raum«. Alle Schnittstellen und Scripte teilen sich diesen Raum.</p>
<p>Ein Name kann darin nur einmal vergeben werden. Hunderte Namen sind wie gesagt schon belegt. Konflikte sind daher vorprogrammiert. Es kann schnell vorkommen, dass ein Script eine bestehende <code>window</code>-Eigenschaft überschreibt und damit anderen Scripten in die Quere kommt.</p>
<p>Vermeiden Sie daher globale Variablen möglichst. Die meisten Variablen, die Sie benötigen, können einen eingeschränkten Geltungsbereich haben. Nur einige ausgewählten Werte und Objekte ihrer Programme sollten global verfügbar sein. Das ist zum Beispiel eine öffentliche Schnittstelle, die ihr Programm für andere Programme anbietet.</p>
<p>Globale verfügbare Werte können Sie wie gesagt überall nach dem Schema <code>window.<var>globaleVariable</var> = <var>wert</var></code> anlegen.</p>
</div>
<div class="section" id="funktionsvariablen">
<h2>Funktionsvariablen (<code>var</code>)</h2>
<p>Eine Variablen-Deklaration mit <code>var</code>, die <em>innerhalb</em> einer <a href="funktionen.html">Funktion</a> steht, erzeugt eine <em>Funktionsvariable</em>. Diese gehört zu den <em>lokalen</em> Variablen.</p>
<p>Eine solche Variable hat einen Geltungsbereich, der auf die Funktion selbst beschränkt ist. Die Variable ist nicht von außen sichtbar.</p>
<p>Schauen wir uns eine Beispielfunktion mit Funktionsvariablen an:</p>
<pre>
function summe(array) {
<strong>var ergebnis = 0;</strong>
for (<strong>var i = 0</strong>; i < array.length; i++) {
ergebnis += array[i];
}
return ergebnis;
}
window.alert(summe([ 5, 10, 15 ])); // Ausgabe: »30«
window.alert(ergebnis); // Programmabbruch: ergebnis ist nicht definiert
</pre>
<p>Die Funktion <code>summe</code> erwartet einen Array mit Zahlen und gibt die Summe dieser Zahlen zurück. Innerhalb der Funktion gibt es drei Variablen. Deren Geltungsbereich ist auf die Funktion beschränkt.</p>
<ul>
<li><code>array</code> – der Funktionsparameter</li>
<li><code>ergebnis</code> – eine mit <code>var</code> deklarierte Variable</li>
<li><code>i</code> – eine Variable, die mit <code>var</code> im Kopf der <code>for</code>-Schleife deklariert ist</li>
</ul>
<p>Funktionsparameter verhalten sich also wie Funktionsvariablen: Sie sind nur in der Funktion verfügbar.</p>
<p>Im obigen Beispiel wird versucht, auf die Variable <code>ergebnis</code> außerhalb der Funktion zuzugreifen. Dies ist nicht möglich und führt zu einem Programmabbruch. Denn eine Variable mit dem Namen ergebnis kann an dieser Stelle nicht gefunden werden. Es wird nicht in den Geltungsbereich der Funktion hineingeschaut.</p>
<p>Innerhalb einer Funktion können Sie also sicher Variablen anlegen, ohne dass sie anderem Code außerhalb der Funktion in die Quere kommen. Sie können in verschiedenen Funktionen denselben Namen verwenden, ohne dass die beiden zusammenstoßen.</p>
<p>Wie alle Variablen haben Funktionsvariablen den Vorteil, dass sie in verschachtelten Geltungsbereichen innerhalb der Funktion ebenfalls verfügbar sind. Das ist beispielsweise zu erkennen, wenn Sie eine Funktion in eine andere schachteln:</p>
<pre>
function installiereKlickZähler() {
var <strong>klickZähler</strong> = 0;
function klickHandler() {
<strong>klickZähler</strong>++;
window.alert('Button wurde ' + <strong>klickZähler</strong> + ' Mal geklickt!');
}
document.getElementById('button')
.addEventListener('click', klickHandler);
}
installiereKlickZähler();
</pre>
<p>Das Beispiel geht davon aus, dass es einen Button im Dokument mit der ID <code>button</code> gibt:</p>
<pre><button id="button">Klick mich!<button></pre>
<p>Jedes Mal, wenn der Button geklickt wird, wird ein Zähler erhöht und der aktuelle Zählerwert wird ausgegeben. Dazu registriert die Funktion <code>installiereKlickZähler</code> einen Event-Handler (siehe <a href="event-handling-grundlagen.html">Grundlagen der Ereignis-Verarbeitung</a>). Dieser Handler ist die Funktion <code>klickHandler</code>.</p>
<p>Wir haben hier also eine äußere Funktion, <code>installiereKlickZähler</code>, und eine innere Funktion, <code>klickHandler</code>.</p>
<p>Die Variable <code>klickZähler</code> ist in der äußeren Funktion definiert. Sie ist dort verfügbar, aber auch in der verschachtelten inneren Funktion. Nur so ist es möglich, dass die innere Funktion den Zählerwert bei jedem Klick erhöhen und ausgeben kann.</p>
</div>
<div class="section" id="block-variablen">
<h2>Block-Variablen (<code>let</code>)</h2>
<p>Bisher haben wir Variablen-Deklarationen mit <code>var</code> kennengelernt. Es gibt eine weitere Art, Variablen zu deklarieren, und die fängt mit <code>let</code> an:</p>
<pre>
let alter = 32;
</pre>
<p>Der Unterschied zu <code>var</code> ist der Geltungsbereich. <code>let</code> erzeugt eine Variable im aktuellen <strong>Block</strong>. Solche Variablen gehören ebenfalls zu den <em>lokalen</em> Variablen.</p>
<p>Was ist nun ein Block? Code, der innerhalb geschweifter Klammern <code>{…}</code> steht, bildet einen Block. Verschiedene JavaScript-Strukturen erzeugen solche Blöcke, darunter:</p>
<ul>
<li>Funktionen: <code>function beispiel() {…}</code></li>
<li>Bedingte Anweisungen: <code>if (bedingung) {…} else {…}</code></li>
<li>Schleifen: <code>for (…) {…}</code>, <code>while (…) {…}</code></li>
<li>Nackte Blöcke mit Anweisungen: <code>{…}</code></li>
</ul>
<p>Eine mit <code>let</code> deklarierte Variable gilt nur innerhalb eines solchen <code>{…}</code>-Blocks, in dem sie definiert ist. Außerhalb des Blocks ist sie nicht verfügbar. Schauen wir uns ein Beispiel an:</p>
<pre>
function zähleHoch(anfang, ende) {
for (<strong>let</strong> i = anfang; i <= ende; i++) <strong>{</strong>
<strong>let</strong> frage = 'Aktuell: ' + i + ' Weitermachen?';
<strong>let</strong> weitermachen = window.confirm(frage);
if (!weitermachen) <strong>{</strong>
<strong>let</strong> abbruchNachricht = 'Abgebrochen bei ' + i;
window.alert(abbruchNachricht);
break;
<strong>}</strong>
<strong>}</strong>
}
zähleHoch(0, 10);
</pre>
<p>Die Funktion <code>zähleHoch</code> zählt von einer Zahl hoch bis zu einer anderen Zahl. Anfang- und Endzahl werden per Parameter übergeben, <code>anfang</code> und <code>ende</code>. Das Beispiel ruft die Funktion mit Start <code>0</code> und Ende <code>10</code> auf.</p>
<p>In der Funktion befindet sich eine <code>for</code>-Schleife, die für das eigentliche Zählen zuständig ist. Mit jedem Schleifendurchlauf wird mittels <code>window.confirm()</code> ein Dialogfenster geöffnet. Darin wird der aktuelle Zählerwert ausgegeben und gefragt, ob weiter gezählt werden soll. Im Bestätigungsfenster lässt sich »OK« oder »Abbrechen« wählen. <code>window.confirm()</code> gibt dementsprechend <code>true</code> oder <code>false</code> zurück.</p>
<p>Wenn »Abbrechen« gewählt wird, soll die Schleife ebenfalls abbrechen und die Funktion beendet werden. Vorher wird allerdings noch eine abschließende Meldung mit <code>window.alert()</code> gemacht.</p>
<p>Im Beispiel gibt es sechs Namen mit folgenden Geltungsbereichen:</p>
<table>
<thead>
<tr>
<th>Variable</th>
<th>Geltungsbereich</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>anfang</code> (Funktionsparameter)</td>
<td>Funktion: <code>function zähleHoch(…) {…}</code></td>
</tr>
<tr>
<td><code>ende</code> (Funktionsparameter)</td>
<td>Funktion: <code>function zähleHoch(…) {…}</code></td>
</tr>
<tr>
<td><code>i</code></td>
<td>Block: Schleife <code>for (…) {…}</code></td>
</tr>
<tr>
<td><code>frage</code></td>
<td>Block: Schleife <code>for (…) {…}</code></td>
</tr>
<tr>
<td><code>weitermachen</code></td>
<td>Block: Schleife <code>for (…) {…}</code></td>
</tr>
<tr>
<td><code>abbruchNachricht</code></td>
<td>Block: Bedingte Anweisung <code>if (…) {…}</code></td>
</tr>
</tbody>
</table>
<p>Abgesehen von den zwei Funktionsparametern <code>anfang</code> und <code>ende</code>, die einen Funktions-Geltungsbereich haben, haben wir vier mit <code>let</code> erzeugte Variablen mit einem Block-Geltungsbereich.</p>
<p>Das heißt: <code>i</code>, <code>frage</code> und <code>weitermachen</code> sind nur innerhalb des <code>for</code>-Blocks verfügbar und in allen Blöcken darin. <code>abbruchNachricht</code> ist nur innerhalb des <code>if</code>-Blocks verfügbar und in allen Blöcken darin (wenn es welche gäbe).</p>
<p>Wenn wir also versuchen, außerhalb des Blocks z.B. auf <code>abbruchNachricht</code> zuzugreifen, so gäbe es einen Fehler und das Programm würde abbrechen:</p>
<pre>
if (!weitermachen) {
let abbruchNachricht = 'Abgebrochen bei ' + i;
/* … */
}
window.alert(abbruchNachricht); // Fehler!
</pre>
<p>Um den Geltungsbereich einer mit <code>let</code> erzeugten Variable zu finden, müssen Sie einfach die nächstgelegene Struktur mit geschweiften Klammern <code>{…}</code> suchen. Die Code-Einrückung hilft dabei ebenfalls, denn jeder Block sollte eine neue Einrückungsebene erzeugen.</p>
<p>Wie gesagt sollten Sie der Grundregel folgen, den Geltungsbereich einer Variablen so klein wie möglich zu halten. Dazu eignen sich Variablen mit <code>let</code> gut, denn sie haben den kleinstmöglichen Geltungsbereich. Selbst wenn Sie sie außerhalb eines Blocks deklarieren, so haben sie die erfreuliche Eigenheit, niemals eine Eigenschaft beim globalen Objekt <code>window</code> zu erzeugen.</p>
<p>Der Benutzung von <code>let</code> steht nur eine Sache entgegen: Die Technik wurde erst mit dem <a href="standards.html">JavaScript-Standard ECMAScript 6</a> eingeführt, der 2015 verabschiedet wurde. Alle neueren Browser kennen <code>let</code>, aber manche ältere Browser verstehen <code>let</code> noch nicht. Der Internet Explorer kennt <code>let</code> zum Beispiel erst ab Version 11.</p>
</div>
<div class="section" id="block-konstanten">
<h2>Block-Konstanten (<code>const</code>)</h2>
<p>Zu guter Letzt widmen wir uns der Deklaration von Konstanten mit <code>const</code>. Bisher haben wir nur über Variablen geredet. Was ist eine Konstante?</p>
<p>Eine Konstante ist ebenfalls ein JavaScript-Wert, der im Arbeitsspeicher aufbewahrt wird. Eine Konstante besteht ebenfalls aus einem Namen (einem Bezeichner) und einem Wert. Eine Konstante hat ebenfalls einen Block-Geltungsbereich, so wie Variablen mit <code>let</code>.</p>
<p>Der Unterschied ist: Eine Variable ist veränderbar (variabel eben), eine Konstante ist unveränderbar (konstant eben).</p>
<p>Das Erzeugen einer Konstante ist mit dem Schlüsselwort <code>const</code> möglich und der Aufbau gleicht dem von <code>var</code> und <code>let</code>:</p>
<pre>const <var>Bezeichner</var> = <var>Ausdruck</var>;</code></pre>
<p> Schauen wir uns einen Vergleich an:</p>
<pre>
<strong>var</strong> veränderbarVar = 'alt';
veränderbarVar = 'neu';
<strong>let</strong> veränderbarLet = 'alt';
veränderbarLet = 'neu';
<strong>const</strong> unveränderbarConst = 'alt';
unveränderbarConst = 'neu'; // Fehler!
</div>
<p>Im Beispiel werden zwei Variablen mit <code>var</code> und <code>let</code> erzeugt sowie eine Konstante mit <code>const</code>. Es wird versucht, die Werte nachträglich zu ändern. Das ist bei den beiden Variablen möglich, aber nicht bei der Konstante. JavaScript wirft einen Fehler, wenn Sie versuchen, den Wert einer Konstante nachträglich zu ändern.</p>
<p>Der Wert kann nur einmal festgelegt werden, nämlich in dem Moment, in dem Sie die Konstante mit <code>const</code> erzeugen. Es ist demnach auch nicht möglich, die Wertzuweisung mit <code>=</code> wegzulassen, wie es bei Variablen möglich ist (siehe <a href="#variablen-ohne-wert">Variablen ohne Wert</a>).</p>
<p>Der Sinn von Konstanten ist, eine unveränderbare Verbindung zwischen Name und Wert zu haben. Eine Konstante sorgt dafür, dass unter einem Namen immer derselbe Wert zu finden ist. Unter diesem Namen wird nichts anderes mehr gespeichert.</p>
<p>Das vereinfacht die Programmierung enorm und macht den Code viel klarer! Beim Lesen des Codes müssen Sie nicht mehr Suchen, ob sich der Wert einer Variable später noch einmal ändert. Manche empfehlen sogar, <em>immer wenn möglich</em> Konstanten zu verwenden.</p>
<p>Das mag jetzt etwas theoretisch klingen. Schauen wir uns ein Beispiel mit Variablen an und vergleichen es mit Konstanten.</p>
<pre>
let liste = [ 23, 75, 11, 64, 99, 5 ];
liste = liste.filter(function(zahl) {
return zahl > 50;
});
liste = liste.concat([ 100, 110, 153 ]);
window.alert(liste);
</pre>
<p>Hier werden an einer Liste mit Zahlen (einem <a href="kernobjekte.html#array">Array</a>) verschiedene Operationen durchgeführt. Jede Operation erzeugt eine neue Liste. Die Liste wird zunächst gefiltert, sodass nur Zahlen größer als 50 darin enthalten sind. Dann wird die gefilterte Liste erweitert, sodass am Ende drei neue Zahlen hinzugefügt werden. Schließlich wird die Ergebnis-Liste ausgegeben.</p>
<p>Nach jeder Operation wird die neu erzeugte Liste in der Variable <code>liste</code> gespeichert. Sie bekommt also mit jeder Operation einen neuen Wert zugewiesen, der bestehende wird überschrieben.</p>
<p>Schauen wir dasselbe Beispiel mit Konstanten an:</p>
<pre>
const ausgangsListe = [ 23, 75, 11, 64, 99, 5 ];
const gefilterteListe = ausgangsListe.filter(function(zahl) {
return zahl > 50;
});
const erweiterteGefilterteListe = gefilterteListe.concat([ 100, 110, 153 ]);
window.alert(erweiterteGefilterteListe);
</pre>
<p>Weiterhin erzeugt jede Operation eine neue Liste. Jede neu erzeugte Liste wird aber in ihrer eigenen Konstante gespeichert: <code>ausgangsListe</code>, <code>gefilterteListe</code>, <code>erweiterteGefilterteListe</code>.</p>
<p>Der Beispielcode mit <code>const</code> ist länger und ausführlicher, aber der Code ist verständlicher. Es ist klar, welchen Wert eine Konstante hat, denn Sie ändert ihren Wert nach der Deklaration nicht. Daher sind auch aussagekräftigere Namen möglich, anstatt nur ein generisches <code>liste</code>.</p>
<p>Zugegeben, Sie können auch Variablen so einsetzen können, dass Sie mit jeder Wertänderung eine neue Variable erzeugen. Aber Konstanten zwingen Sie dazu und weisen Sie auf Fehler hin.</p>
<p>Versuchen Sie deshalb einmal, ausschließlich Konstanten zu verwenden, auch auf die Gefahr hin, viele Konstanten zu verwenden. Es gibt natürlich Fälle, in denen Sie immer noch <code>let</code> benötigen. Zum Beispiel muss der Zähler einer <code>for</code>-Schleife eine Variable sein, denn der Wert soll sich ändern.</p>
<p>Es ist wichtig zu versehen, dass bei Konstanten nur die Verbindung zwischen Name und Wert unveränderlich ist. Wenn der Wert ein <a href="kernobjekte.html#object">Objekt</a> ist, ist es weiterhin möglich, das Objekt in sich zu ändern. Es ist nur nicht möglich, den Namen auf ein anderes Objekt zeigen zu lassen. Ein Beispiel, das den Unterschied verdeutlicht:</p>
<pre>
const nutzerin = { name: 'Monika' };
nutzerin.name = 'Monica'; // Erlaubt.
nutzerin = { name: 'Marlene' }; // Fehler!
</pre>
<p>Das Beispiel deklariert eine Konstante namens <code>nutzerin</code> und ändert die Objekteigenschaft <code>nutzerin.name</code>. Das ist möglich, denn das Objekt selbst ist veränderbar. Es führt allerdings zu einem Fehler, der Konstante <code>nutzerin</code> einem neue Wert zuzuweisen.</p>
<p>Genauso wie <code>let</code> steht <code>const</code> erst seit dem JavaScript-Standard ECMAScript 6 zur Verfügung und wird von manchen älteren Browsern noch nicht unterstützt.</p>
<div class="section" id="identifier-resolution">
<h2>Auflösung von Bezeichnern</h2>
<p>Wir haben nun die verschiedenen Möglichkeiten kennengelernt, Verbindungen zwischen Namen und Werten in verschiedenen Geltungsbereichen anzulegen. Bei Variablen ist diese Verbindung veränderbar, bei Konstanten nicht.</p>
<p>Schauen wir uns nun an, wie ein Name zu einem Wert aufgelöst wird. Wie gesagt wird der Name auch Bezeichner (englisch <em>identifier</em>) genannt. Das Auflösen von Bezeichnern zu Werten heißt auf Englisch <em>identifier resolution</em>.</p>
<p>Betrachten wir noch einmal das Beispiel von oben:</p>
<pre>
function zähleHoch(anfang, ende) {
for (let i = <strong>anfang</strong>; <strong>i</strong> <= <strong>ende</strong>; <strong>i</strong>++) {
let frage = 'Aktuell: ' + i + ' Weitermachen?';
let weitermachen = <strong>window</strong>.confirm(<strong>frage</strong>);
if (!<strong>weitermachen</strong>) {
let abbruchNachricht = 'Abgebrochen bei ' + <strong>i</strong>;
<strong>window</strong>.alert(<strong>abbruchNachricht</strong>);
break;
}
}
}
<strong>zähleHoch</strong>(0, 10);
</pre>
<p>Hier kommen verschiedene Bezeichner vor, die der JavaScript-Interpreter zu Werten auflösen muss. Sie sind grün hervorgehoben.</p>
<p>Im Beispiel haben wir mehrere verschachtelte Geltungsbereiche, in denen unterschiedliche Namen gespeichert sind. Hier eine Visualisierung:</p>
<div class="js-scope js-scope-global">
<p>1. Globaler Geltungsbereich. Definierte Bezeichner: <code>window</code>, <code>zähleHoch</code></p>
<div class="js-scope js-scope-function">
<p>2. Funktions-Geltungsbereich (<code>zähleHoch</code>). Definierte Bezeichner: <code>anfang</code>, <code>ende</code></p>
<div class="js-scope js-scope-block">
<p>3. Block-Geltungsbereich (<code>for</code>). Definierte Bezeichner: <code>i</code>, <code>frage</code>, <code>weitermachen</code></p>
<div class="js-scope js-scope-block">
<p>4. Block-Geltungsbereich (<code>if</code>). Definierte Bezeichner: <code>abbruchNachricht</code></p>
</div>
</div>
</div>
</div>
<p>Ein Bezeichner wird aufgelöst, indem die sogenannte Kette von Geltungsbereichen (englisch <em lang="en">scope chain</em>) abgelaufen wird. Die Kette wird anhand der Position des Bezeichners bestimmt. Sie enthält alle Geltungsbereiche ausgehend vom aktuellen nach außen hin bis zum äußersten, globalen Geltungsbereich.</p>
<p>Zum Beispiel steht im innersten Geltungsbereich 4 der Bezeichner <code>window</code>. Denn dort wird <code>window.alert(…);</code> aufgerufen. Die Kette enthält die Geltungsbereiche 4→3→2→1 in dieser Reihenfolge, vom aktuellen bis hin zum äußersten.</p>
<p>Es wird zunächst in Geltungsbereich 4 gesucht, dem aktuellen. Dort ist aber kein Bezeichner <code>window</code> definiert! Also wird weiter gesucht: im Bereich 3, dann im Bereich 2 und schließlich im Bereich 1. Erst dort, im globalen Geltungsbereich, findet sich der Bezeichner <code>window</code>.</p>
<p>Spielen wir das Ganze noch einmal für den Bezeichner <code>i</code> durch, der ebenfalls im innersten Geltungsbereich 4 benutzt wird. Die Kette enthält wieder die Geltungsbereiche 4→3→2→1, vom aktuellen bis zum äußersten. Beim Ablaufen der Kette auf der Suche nach <code>i</code> werden wir aber schon Geltungsbereich 3 fündig. Das Ablaufen der Kette wird abgebrochen, denn wir haben schon gefunden, was wir suchten.</p>
<p>Diese Funktionsweise ist zunächst einmal ein Interna des JavaScript-Interpreters. Sie erklärt aber auch, wie sich die Geltungsbereiche, von denen wir soviel gehört haben, praktisch auswirken. Beim Deklarieren von Variablen und Konstanten wählen Sie gewisse Geltungsbereiche, damit der Zugriff auf Namen und Werte möglich (oder absichtlich unmöglich) ist.</p>
</div>
<div class="section" id="bezeichner">
<h2>Regeln und Konventionen für Bezeichner</h2>
<p>JavaScript-Bezeichner unterliegen gewissen Regeln, die Sie beim Wählen von Namen beachten müssen:</p>
<p>Ein Bezeichner darf nur aus Buchstaben, Dezimalziffern (0-9), dem Dollarzeichen (<code>$</code>) sowie dem Unterstrich (<code>_</code>) bestehen. Jedes dieser Zeichen darf an beliebiger Stelle vorkommen, mit Ausnahme der Ziffern, welche nicht an erster Stelle stehen dürfen.</p>
<p>Genauer gesagt sind Zeichen aus der Unicode-Gruppen <code>ID_Start</code> an erster Stelle und Zeichen aus <code>ID_Continue</code> an den folgenden Stellen erlaubt. Das sind eine ganze Menge: Neben dem lateinischen Alphabet gehören Buchstaben mit Diakritika wie ü, ö, ä, ß, é, â, ì, å, õ usw. dazu. Griechische, kyrillische, hebräische, japanische, chinesische, arabische Zeichen usw. sind ebenfalls erlaubt.</p>
<p>Alle anderen Zeichen, etwa Leer- oder Sonderzeichen, sind in Bezeichnern nicht erlaubt.</p>
<p>Beispiele für <strong>erlaubte Bezeichner</strong>:</p>
<pre>
mitarbeiter_name
mitarbeiterName
_mitarbeitername
$mitarbeitername
lohnIn$
mitarbeiter1
twenty4seven
größe
</pre>
<p>Beispiele für <strong>nicht erlaubte</strong> Bezeichner:</p>
<pre class="erroneous">
mitarbeiter name
mitarbeiter-name
mitarbeiter.name
lohnIn€
lohnIn£
2raumwohnung
ein♥FürTiere
arbeiter&angestellte
</pre>
<p>Im europäischen und noramerikanischen Raum beschränken sich die meisten JavaScript-Programmierer auf lateinische Buchstaben ohne diakritische Zeichen. Der Bezeichner <code>größe</code> ist zwar möglich. Üblicher ist allerdings, <code>groesse</code> zu notieren, um Schwierigkeiten bei der Zeichenkodierung aus dem Weg zu gehen. Im internationalen, kommerziellen Umfeld werden meistens englischsprachige Bezeichner verwendet.</p>
<p>Fragt sich nur noch, wie mit Groß- und Kleinschreibung in Bezeichnern umgegangen wird. Das ist eine Frage des Stils und letztlich Ihnen überlassen. Die vordefinierten JavaScript-Schnittstellen verwenden das sogenannte <strong>camelCase</strong>: Der erste Buchstabe ist klein. Wird ein Wort angehängt, so folgt ein Großbuchstabe und es geht wieder klein weiter. Wie der Höcker beim Kamel. So kommt beispielsweise <code>mitarbeiterName</code>, <code>toLocaleString</code> und <code>getElementById</code> heraus. Diese Schreibweise ist weit verbreitet und Ihnen sei auch geraten, diese zu verwenden.</p>
<!-- Konstruktoren PascalCase -->
</div>
<div class="sequence-navigation">
<p class="next"><a href="kernobjekte.html" rel="next">Datentypen und Kernobjekte</a></p>
<p class="prev"><a href="syntax.html" rel="prev">Syntax-Grundlagen</a></p>
</div>
<div id="footer">
<p><strong>JavaScript-Dokumentation</strong> · <a href="./">Zum Inhaltsverzeichnis</a></p>
<p>Autor: <a href="https://molily.de/">molily</a> · Kontakt: <a href="mailto:[email protected]">[email protected]</a></p>
<p>Lizenz: <a rel="license" href="https://creativecommons.org/licenses/by-sa/3.0/de/">Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0</a></p>
<p><a href="https://github.com/molily/javascript-einfuehrung">JavaScript-Einführung auf Github</a></p>
<p>Kostenloses Online-Buch und E-Book:<br><a href="https://testing-angular.com" lang="en" hreflang="en">Testing Angular – A Guide to Robust Angular Applications</a> (englisch)</p>
</div>
<script src="js-doku.js"></script>
</body>
</html>