見出し画像

【フレアのJavaScript入門記3日目】letとvarを使った変数の書き方

こんにちは、フレアです。
前回は、変数とは何かという話と3つのキーワードのうちの一つであるconstキーワードを使って変数を書く方法について触れました。
今回は、残りの二つのキーワードで変数を書く方法について勉強していきたいと思います。

let

letやvarキーワードでは、必ずしも箱の中に入れるデータについて最初から宣言しておく必要はありません。

let food = 'hamburger';

省略した形が

let food;

になります。

この状態でconsole.log()で変数の中身を表示すると以下のようになります。

console.log(food);

hamburger // 実行結果

また、letやvarキーワードでは別の値で上書きも可能です。

変数名 = 値; // 値の再代入
 
food = 'sandwich'; // 代入例
再代入イメージ

この場合、console.log()で変数の中身を表示すると以下のようになります。

let food = 'hamburger';
food = 'sandwich';

console.log(food);

sandwich // 実行結果

このように、宣言された変数を何度でも上書き可能です。


ちなみに、初期値を省略した場合、console.log()で変数の中身を表示すると

let food;

console.log(food);

undefined // 実行結果

undefined(未定義)となります。

ここはまぁ・・・
今は気にしなくても良いでしょう!(適当)

var

constとletが追加されるES2015までは、varというキーワードが使われていました。varキーワードもルールは基本letと同じように見えますが、スコープという「変数の有効範囲」が違います。

これは、コーディングした人の意図に反して変数の値が予想外の場所で変更されないようにするための追加仕様のようです。

ネットで調べてみると、「varはバグの原因にもなるので、基本的にはletを使うようにしましょう」と書かれているサイトがたくさんありました。
スコープの違いについてはいずれ理解するとして、ひとまず今後はconstとletを基本的に使うとしましょう!(超適当)


constとletの使い分け

varのことは置いといて、現状2通りの宣言方法があります。これらのうち、どちらを使ってコードを書くべきなのか。

結論から言うと、「constを重視して用いるべき」だそうです。

何故かというと、letのほうができることが多すぎて、読みづらくなってしまうからです。逆に、constは一度値を宣言してしまえば二度と変わることがないため、読みやすいです。


constの方が読みやすい

「どこかで再代入されて値が変わってるかもしれない変数」よりも「決まりきった不変の変数」のほうが良いってことですね。変数なのに変わらないほうが読みやすいとかツッコむのはやめておこう。



checkテスト【変数編】

Q1.数値100が入った変数名numberを宣言するコードを書け!

const number = 100;

Q2.文字列JavaScriptが入った変数名langを宣言するコードを書け!!

const lang = 'JavaScript';

Q3.letとconstの違い!!!

constには初期値の宣言が必要。
constは再代入できない。

この記事が気に入ったらサポートをしてみませんか?