こんにちは！今週もRaiseTechのReactコース課題を進めていきます。
今回からは、JavaScriptの基礎を学習していきます！大学でも学習してますがふわふわ理解なので、ここでしっかり調べていきます。
本記事ではまず「JavaScriptの変数」についてまとめました。
前回のお話はこちらから
JavaScriptの変数
変数とは、文字列や数値を格納できるものです。何が便利なのか、変数を使った場合と使わない場合で比較しました。
例えば、Aさん・Bさん・Cさんのそれぞれの税抜購入金額を計算するときです。
//変数を使わない場合
console.log(100*1.1); //Aさん
console.log(500*1.1); //Bさん
console.log(750*1.1); //Cさん
//変数を使った場合
const tax = 1.1;
console.log(100*tax); //Aさん
console.log(500*tax); //Bさん
console.log(750*tax); //Cさん行数としては変数を使った場合が１行多いですが、もし消費税が12%になったらどうでしょうか？
変数を使わなければ、1.1を1.12にすべて変える必要があります。しかし、変数を使った場合 const tax = 1.12と修正するだけで済みますね。
数値だけに限らず、オブジェクトや配列など記述量が長いものを変数に格納しておけば、後ろで呼ぶときも少量のコードで済むというメリットがあります。
var
結論：現在これを使って変数を宣言することは推奨されていません。
理由は「再宣言＆再代入ができる」からです。
再宣言とは？
var txt = "Hello World";
console.log(txt); //出力 -> Hello World
:
いろんな処理
:
var txt = "こんにちは"; //この行が再宣言！
console.log(txt); //出力 -> こんにちはtxtという同じ変数名で２回宣言しています。これを再宣言といいます。
このあと出てくる残り2つの変数は再宣言するとエラーが出ますが、varはエラーを出してくれません。
プログラムの先頭で宣言した事を忘れて、同じ名前で宣言をしてしまったら…バグが起こりますね。
再代入とは？
var number = 20;
console.log(number); //出力 -> 20
:
いろんな処理
:
number = 50; //この行が再代入！
console.log(number); //出力 -> 50数値や文字列などがすでに格納されている変数に、異なる数値や文字列を再度代入することを再代入といいます。
再宣言と再代入…似てますね。図で比較してみました↓
【再宣言】
【再代入】
再宣言はしっかり箱まで用意して値を入れる、再代入は箱は用意せず既存の値を追い出して値を入れるという感じでしょうか。
少し話がそれましたが、varはバグの原因が詰まったアンハッピーセットなので基本使うことがないと覚えておきます。
const
結論：基本的にconstで宣言しておけばOKだそうです。（例外あり）
constは再宣言や再代入はできないため、基本的に１度宣言したあと変更を加えることはできません。
const txt = "Hello World";
:
いろんな処理
:
txt = "こんにちは"; //再代入エラー
const txt = "Hello"; //再宣言エラー基本的にということなので、配列やオブジェクトは宣言後に変更することができます。
let
結論：constで宣言すると都合が悪い時の代打
都合が悪い時というのが、「再代入が必要なとき」です。
letは再宣言はできませんが、再代入はできます。
let txt = "Hello World";
console.log(txt); //出力 -> Hello World
:
いろんな処理
:
txt = "こんにちは"; //再代入
console.log(txt); //出力 -> こんにちは
let txt = "Hello"; //再宣言エラーどんなときに再代入が必要になるのかはこのあとの「constとletの使い分け」で紹介します。
var、let、constの違いは？
| var | let | const | |
|---|---|---|---|
| 再宣言 | ○ | × | × |
| 再代入 | ○ | ○ | × |
| 参照範囲 | ブロックスコープなし | ブロック { } | ブロック { } |
簡単にまとめるとこんな感じです。ここでは参照範囲について少し詳しく見てみます。
//varの場合
{
var str = "Hello";
console.log(str); //出力 -> Hello
}
console.log(str); //出力 -> Hello
//letの場合
{
let str = "こんにちは";
console.log(str); //出力 -> こんにちは
}
console.log(str); //出力 -> Hello
//constの場合
{
const str = "Hello World";
console.log(str); //出力 -> Hello World
}
console.log(str); //出力 -> Helloこのコードを実行した場合、consoleは以下のようになりました↓
注目なのは、{ } の外で console.log(str) と記述した結果は全てvarで宣言した「Hello」が表示されていることです。
{ } の外で記述された console.log(str) は、{ } 内でvar宣言した値（Hello）は参照できますが、{ } 内でletやconst宣言した値（こんにちは・Hello World）は参照できません。その結果が先程のconsole表示になります。
varは自由人すぎますね…。
constとletの使い分け
varは基本使うことがないのであれば、letとconstはどのように使い分けるべきなのでしょうか？
結論：基本的にconstを使って宣言することが望ましい。
基本的にということなので例外はあります。例えばこんな例↓
for(let number = 1; number < 10; number++){
console.log(number);
}別記事でfor文について詳しく書きますが、簡単に説明すると「numberという変数を宣言し1を代入→numberを１から＋１を10未満になるまで繰り返してconsoleに表示してください」という処理です。
実行結果はこんな感じ↓
1~9の数値がconsoleに表示されました。
この場合は、letを使う必要があります。なぜなら再代入が必要だからです。
試しにletをconstに変更して実行してみました↓
constは再代入ができないので、怒られましたね。
このようにプログラムの中で、変数に再代入が必要な場合にはletを使って実装します。
まとめ
- varは使わない
- 基本的にconstで宣言
- 再代入が必要なときだけletで宣言
最後に
変数１つでもかなり奥が深かったです。これまでは、変数＝letで宣言しておけばだいたいOKの感覚でしたが、これからは「基本const＋ 再代入が必要な場合let」というように変数に入れるものの性質を考えながら宣言していこうと思います。
最後までお読みいただきありがとうございました。
コメント