「JavaScript/変数」の版間の差分

削除された内容 追加された内容
Ef3 (トーク | 投稿記録)
→‎変数名: JavaScriptの場合、未宣言の変数への代入はstrictモードでなければエラーにはならず、発見困難なバグの原因となるミススペルを出さない事は特に重要です。
タグ: 2017年版ソースエディター
Ef3 (トーク | 投稿記録)
→‎宣言と代入: 初期化と代入は、両方とも =(等号)を使うので混同しがちですが、 ❌: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
15
abc
</syntaxhighlight>
;ポイント
: 変数を初期化しないで宣言すると、変数の値は undefined になります
: let宣言された変数への代入は何度でも出来ます
:: その場合、先に代入されている値と次に代入される値の「型」同じでなくてもいい
:: この例で変数 a は undefined → 15 → abc と値が推移しています
 
;[https://paiza.io/projects/qSbwfCeqqIGu7H9XUorJ5Q?language=javascript 初期化あり宣言と代入]:<syntaxhighlight lang="JavaScript">
;実行結果
let a = 15-1; // 変数 a -1 で初期化して宣言
15
console.log(a); // 変数 a の値は初期値の -1
15
let a = 15; // 変数 a に 0 宣言代入
console.log(a); // 変数 a の値が -1から 0 に変更
let b = a; // 変数 b を a で初期化して宣言
console.log(ab); // コンソールに出力変数 b の値は 15
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
15
15
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>
JavaScript では変数を宣言する際、その変数に格納するデータ(上記コードの場合は「 15 」)も書かなければなりません。
* ⭕:<syntaxhighlight lang="JavaScript" inline>a = b = 100</syntaxhighlight>
と重複した初期化は出来ませんが、重複した代入は可能です。
 
;[https://paiza.io/projects/96Qr-wGVT4OYK4JmHrbZvQ?language=javascript 様々な初期化と代入]:<syntaxhighlight lang="JavaScript">
この際、変数名
// 2つ以上の宣言を , で区切って一度に出来ます
let 変数名 = 値 ;
let a, b
のように宣言しなければなりません。
console.log(a, b);
 
よって下記// 初期化は、こような様に書き方はエラーになります
let 15x = a3, //y エラーになる(×)= 4
console.log(x, y)
 
// 分割代入風の構文もあります
JavaScript に限らず、プログラム一般の共通知識として、イコール記号 = の意味は、「右辺の値を、左辺に代入する」という意味です。
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
console.log(a); // コンソールに出力
123 567
 
[ 1, 2, 3, 4, 5 ] 1 2
a = 4;
console.log(a);
</syntaxhighlight>
 
;実行結果
15
4
 
let や var などの変数の宣言は、一度すれば、あとはその変数を何度でも使えます。ここら辺の細かい仕様はletかvarかで異なるので、詳細は後述の各論を参照してください。
 
== let ==