「JavaScript/変数」の版間の差分
削除された内容 追加された内容
→変数名: JavaScriptの場合、未宣言の変数への代入はstrictモードでなければエラーにはならず、発見困難なバグの原因となるミススペルを出さない事は特に重要です。 タグ: 2017年版ソースエディター |
→宣言と代入: 初期化と代入は、両方とも =(等号)を使うので混同しがちですが、 ❌:let a = b = 100 ⭕:a = b = 100 と重複した初期化は出来ませんが、重複した代入は可能です。 タグ: 2017年版ソースエディター |
||
11 行
=== 宣言と代入 ===
;[https://paiza.io/projects/eN-EX6clgSnc7TbBciVhRg?language=javascript 初期化なし宣言と代入]:<syntaxhighlight lang="JavaScript">
let a; // 変数 a を(初期化なしで)宣言
<syntaxhighlight lang="JavaScript">▼
console.log(a); // 未初期化の変数の値は undefined
let a = 15; // 変数を宣言▼
a = 15; // 変数 a に 0 を代入
console.log(a); // コンソールに出力▼
console.log(a); // 変数 a の値が undefined から 0 に変更
a = "abc"; // 変数 a に 0 を代入
console.log(a); // 変数 a の値が 0 から "abc" に変更
</syntaxhighlight>
▲;実行結果:<syntaxhighlight lang="JavaScript">
undefined
abc
</syntaxhighlight>
;ポイント
: 変数を初期化しないで宣言すると、変数の値は undefined になります
: let宣言された変数への代入は何度でも出来ます
:: その場合、先に代入されている値と次に代入される値の「型」同じでなくてもいい
:: この例で変数 a は undefined → 15 → abc と値が推移しています
;[https://paiza.io/projects/qSbwfCeqqIGu7H9XUorJ5Q?language=javascript 初期化あり宣言と代入]:<syntaxhighlight lang="JavaScript">
▲ 15
console.log(a); // 変数 a の値は初期値の -1
15▼
console.log(a); // 変数 a の値が -1から 0 に変更
let b = a; // 変数 b を a で初期化して宣言
a = "abc"; // 変数 a に 0 を代入
console.log(a); // 変数 a の値が 0 から "abc" に変更
console.log(b); // 変数 b の値は 15 のまま
b = a = 43; // 変数 a に 43 を代入し、その値を変数 b に代入
console.log(b); // 変数 b の値は 15 のまま
console.log(a); // 変数 a の値が 0 から "abc" に変更
</syntaxhighlight>
;実行結果:<syntaxhighlight lang="JavaScript">
-1
abc
15
43
43
</syntaxhighlight>
: 変数を初期値を明示して宣言すると、変数の値は初期値になります
: 初期値には変数も使えます
: 代入は演算子で右側から評価されます
:: <syntaxhighlight lang="JavaScript" inline>b = a = 43</syntaxhighlight> は <syntaxhighlight lang="JavaScript" inline>b = (a = 43)</syntaxhighlight> に同じ
==== 構文 ====
ここで出てきた構文は、3つです。
;letによる変数宣言(初期化なし): <syntaxhighlight lang="JavaScript">let 変数名</syntaxhighlight>
;letによる変数宣言(初期化あり): <syntaxhighlight lang="JavaScript">let 変数名 = 初期値</syntaxhighlight>
;代入(代入演算子による代入式): <syntaxhighlight lang="JavaScript">変数名 = 値</syntaxhighlight>
初期化と代入は、両方とも <code>=</code>(等号)を使うので混同しがちですが、
* ❌:<syntaxhighlight lang="JavaScript" inline>let a = b = 100</syntaxhighlight>
* ⭕:<syntaxhighlight lang="JavaScript" inline>a = b = 100</syntaxhighlight>
と重複した初期化は出来ませんが、重複した代入は可能です。
;[https://paiza.io/projects/96Qr-wGVT4OYK4JmHrbZvQ?language=javascript 様々な初期化と代入]:<syntaxhighlight lang="JavaScript">
// 2つ以上の宣言を , で区切って一度に出来ます
let a, b
console.log(x, y)
// 分割代入風の構文もあります
let [i, j] = [ 123, 567 ]
console.log(i, j)
let p = [1, 2, 3, 4, 5];
let [q, r] = p;
console.log(p, q, r)
</syntaxhighlight>
;実行結果:<syntaxhighlight lang="JavaScript">
undefined undefined
▲let a = 15; // 変数を宣言
3 4
123 567
[ 1, 2, 3, 4, 5 ] 1 2
▲console.log(a);
</syntaxhighlight>
▲ 15
== let ==
|