1. ホーム 
  2. 備忘録 
  3. JavaScript

変数と定数

変数と定数

Javascript で変数を宣言するときには var, let, const のキーワードが使用できる

以前までは var しかなかったが、ECMAScript2015(ES6)以降では加えて let と const が使用できるようになった

var, let, const の違いについては以下の表のとおりである

const let var
再宣言 × ×
再代入 ×
スコープ ブロック ブロック 関数
ホイスティング エラー エラー undefined

それぞれについて詳細を記載していく

まず再宣言だが、var 以外は再宣言を認めておらず、再宣言しようとするとエラーが発生する

これは同じ変数を間違えて再宣言して書き換えてしまうことがないようにするための措置であり、この理由により基本的には var での宣言はしないほうが良い


次に再代入については、const は初期化時点で値を代入する必要があるため、再代入は禁止となっている

自分が取り扱いたい値が変数なのか定数なのかによってキーワードを使い分けると良い


スコープに関しては、let と const はブロックスコープが有効である。

{} で区切られたスコープや if文 for文 など、閉じられたスコープでそれぞれ変数の有効範囲が決まる

var に関しては上記のスコープの影響を受けず、同一関数内であればどこで宣言しても有効となってしまう


ホイスティングに関して、まずホイスティングの言葉の説明からしておくと "宣言の巻き上げ" のことである

変数や関数の定義をコードが実行される前にメモリに配置する挙動を指しており、例えば以下はエラーにならず undefined を返す

console.log(x); // undefined

var x = 0;

これが let や const だと変数宣言前の使用ということでエラーが発生するが、
var で宣言した場合は "var x" というメモリ確保だけはプログラムの始めに行われ、そのあとにプログラムに沿って処理を順に行い、"x = 0;"の代入が行われるという流れになる


実は const は定数ではない?

const は「再代入できない変数」を定義する変数宣言であり、必ずしも定数を定義するものではない

プリミティブな値で初期化すれば実質的に定数となるが、オブジェクトも const をつけて宣言することができる

そのため、下記の例のように値自体は書き換えることが可能となるため、定数ではないという扱いになる

const object = {
  key: "値"
};

object.key = "新しい値";

命名規則

Javascript の各種命名規則について以下に記載する

記法 記法名
コンポーネント名 パスカルケース UserForm
変数名 ローワーキャメルケース sampleValue
定数名 スネークケース API_URL
メソッド名 ローワーキャメルケース addNumber
プロパティ名 ローワーキャメルケース userName
クラス名 パスカルケース MyCar

    参考文献

  1. 【JavaScript】var / let / const を本気で使い分けてみた
  2. 【JavaScript】ホイスティングとは?
  3. JavaScriptの命名規則早見表(と記法)