JavaScriptを習得したい

on Note

変数の宣言と変数への代入

変数の定義では、「これは変数です」と宣言をして、その変数に名前を付け、その変数に値を代入します。こうして 、付けた名前が変数として扱えるようになります。

変数の宣言

宣言文
let itemName;

letと記述することでそれが宣言文になります。半角スペースで間を空けて好きに付ける変数名と続けます。宣言文の最後は「;」(セミコロン)を付けます

「itemName」という変数名を、「let」を使って、変数とすると宣言していることになります。まずは宣言をして、付けた名前が変数として扱えるようになります。

変数名を決める時のルール

変数名に使用できる文字は下記の通りです。

  • アルファベットの大文字・小文字
  • アンダースコア「_」
  • ドル「$」
  • 2文字目以降なら数字も使えます。

アルファベットの大文字と小文字は区別されます。例えば、同じアルファベットの並びであっても、「name」「Name」「NAME」はそれぞれ別の変数名として扱われます。

予約語は変数名に使用できません。

予約語とは、プログラミング言語には既に役割が決まっている単語を言います。「return」や「class」、「while」などがあります。

変数への値の代入

代入文
itemName = "みかん";

名前を付けた変数「itemName」に「みかん」という値を代入しています。

先に宣言しておいた名前に「=」(イコール)を続けて、代入したい値を書きます。「=」の両側は半角スペースで空けるのが一般的です。宣言文の最後は「;」(セミコロン)を付けます

代入する値が文字列なら「"」(ダブルクオテーション)か「'」(シングルクオテーション)で囲む必要があります。数値か変数名を代入する場合は囲みません。

値を入れていない変数にはundefined(「未定義な」という意味)という特別な値が入っている状態です。

consoleで確認した時に「undefined」と表示されたのなら、その変数には値が入っていない、と認識されたということです。

宣言と代入を一緒に書く

宣言文と代入文を一緒にしてしまって書くこともできます。
let itemName = "みかん";

「itemName」を変数とすると宣言し、同時に「みかん」という値を代入しています。最後は「;」(セミコロン)を付けます

これで「itemName」という変数ができたことになります。

let area = "円の面積";    //文字列を代入
let radius = 5;           //数値を代入
let areaArea = area;      //先に宣言した変数を代入

結合した文字列や計算式も代入できる

演算子を使えば文字列を結合したり、計算式を表現することができます。そして変数ではそれらを代入することができます。

let text = "円の面積" + "を求める";
let formula = 5 * 5 * 3.14;

変数「text」には「円の面積を求める」が代入され、変数「formula」には計算結果である「78.5」が代入されます。

計算式を書いた方は、それぞれの値が数値なので計算結果が代入されます。もしそれぞれの値を、「"」で囲まれた文字式として書いていれば結果が変わります。

let sample = 5 + 5;    //計算結果の「10」を代入
let sample2 = "5" + "5";    //文字列の結合となる為「55」を代入

再代入

一度値を代入した変数だが、後にその値を変更したい場合が出てくるかもしれません。そんな時は値を入れ直すこともできます。値を入れ直すことを再代入と言います。

let fruits = "みかん";    //itemを変数と宣言してみかんを代入
fruits = "りんご";    //変数宣言しておいたitemの値を変更

再代入によって値は上書きされ、「fruits」には「りんご」が入りました。

letの再宣言はエラーになる

letで変数宣言をする際、同じ階層では、再び同じ変数名で宣言してはいけません。

同じ階層での重複した宣言のことを再宣言と言います(再定義とも呼ぶ)が、再宣言はエラーになります

再宣言のパターンの例

下の階層ならエラーにならない

再宣言(同じ階層で同じ変数名で再び宣言)となった場合、それがletで宣言した変数であればエラーになると述べました。

ただし、同じくletでの宣言であっても、先の宣言より下の階層での宣言(階層が違えば再宣言と呼ばない)であれば問題ありません。

先の宣言よりも下の階層で宣言し直したのであれば、下の階層では、宣言し直した変数の値が反映されます。上の階層の中でも、最も近い層の変数の値が反映される、ということです。値の上書きです。

エラーにならない宣言のし直し

最後まで値を変えたくない場合の宣言

変数のように値を入れる箱として利用したいが、値を変更されては困るといった場合は、constを使って宣言します。

つまり、const で宣言した変数に関しては再代入と再宣言ができません。

const 変数名 = "値";
宣言と同時に値を代入するようにします。