概要

JavaScriptを学習、理解を深めるため「JavaScript Primer 迷わないための入門書」を読み、
理解した内容等を記載していく。

JavaScript入門一覧に他の記事をまとめています。

この記事で理解できること

変数宣言に使用できるキーワード
各宣言キーワードの特徴
変数名のルール(命名規則)

変数と宣言

JavaScriptには以下３つの変数宣言キーワードが存在する。

const(ES2015〜)
let(ES2015〜)
var

「const」「let」および「var」について

varは古くから変数宣言に用いられていたキーワードで、意図しない動作を生み出しやすいことが懸念されていた。
ES2015からconst、letが追加されたことでvarが抱えていた問題を回避できるようになった。
既にvarで書かれたコードの動作を考慮し、var自体の変更・改善はされていない。

ECMAScript
JavaScriptの動作を決めている仕様の名称
2015年にECMAScript 2015(ES2015)という大きなアップデートが行われた仕様が公開された
ECMAScriptは毎年更新され、構文や機能が追加されている

各宣言キーワードと特徴について

各キーワードの宣言方法および、特徴を記載していく。

const

初期値は必須。
constで宣言された変数には再代入できない。
同じ変数名を複数定義しようとすると構文エラーとなる。
変数に対して値を再代入する必要がない場合は、constが推奨されている。

// 定義方法
const 変数名 = 初期値;

// 例：titleという変数を宣言し、初期値を設定
const title = "JavaScript入門"

let

初期値なしの変数宣言が可能(値が未定義ということを表すundefinedという値で初期化される)
同じ変数名を複数定義しようとすると構文エラーとなる。
変数が参照する値を変化させたい場合など、変数への再代入が必要な場合はletを利用する(例：ループなどの反復処理)

// 定義方法(初期値なし、あり)
let 変数名;
let 変数名 = 初期値;

// 例：初期値なし
let title;

// 例：titleという変数を宣言し、初期値を設定
let title = "JavaScript入門";

// 「JavaScript入門」から「JavaScript初級」へ値を再代入
title = "JavaScript初級";

var

初期値なしの変数宣言が可能。(値が未定義ということを表すundefinedという値で初期化される)
変数への値の再代入が可能。
同じ変数名を再定義してもエラーにならない。

// 定義方法(初期値なし、あり)
var 変数名;
var 変数名 = 初期値;

// 例：初期値なし
var title;

// 例：titleという変数を宣言し、初期値を設定
var title = "JavaScript入門";

// 「JavaScript入門」から「JavaScript初級」へ値を再代入
var title = "JavaScript初級";

// 例：同じ変数名で再定義
var title = "JavaScript入門";
var title = "JavaScript初級"; // 変数titleの値は「JavaScript初級」へと上書きされる

// ちなみに値を設定せず再定義した場合は「undefined」にはならず「JavaScript入門」のまま
var title = "JavaScript入門";
var title;                    // →この時点では「JavaScript入門」のまま
var title = "JavaScript初級"; // 変数titleの値は「JavaScript初級」へと上書きされる

変数名に使える名前のルール

変数や関数の宣言時に付ける名前にはルールが存在する(命名規則という表現する場合もある)
以下のようなルール(命名規則)が存在する。

OKなこと

名前には半角アルファベット、_(アンダースコア)、$(ダラー)、数字が使用できる。
上記を組み合わせて使用する。

※大文字小文字は区別される

const $;           // OK
const _result;     // OK
const javascript;  // OK *この二つは別の変数として区別される
const JAVASCRIPT;  // OK *この二つは別の変数として区別される
const js_2021:     // OK

NGなこと

数字から始まる名前にすること。
予約語と同じ名前にすること(JavaScriptで用意している機能名に使用されているもの)

※ ひらがなや一部の漢字など変数名に使用できるが、全角文字が混在すると扱いにくい場合があるため非推奨

const 2021_js;      // 数字からは始まる名前はNG
const let;          // 予約語(JavaScriptが用意している機能の名前)と同じはNG
const Qiitaで学習;  // OK(だが全角が混在すると扱いにくい場合があるため非推奨)

【Tips】 constは定数(不変)ではない

constキーワードの宣言された変数への値の再代入はできないが不変ではない。

// 例：オブジェクトが持つ値(プロパティや、プロパティの値)の変更は可能
const taro = {name: "Taro", age: 24};
console.log(taro); // => {name: 'Taro', age: 24}

// オブジェクトtaroのnameプロパティの値を変更
taro.name = "taro";
console.log(taro); // => {name: 'taro', age: 24}

// プロパティを追加
taro.u = "プロパティuを追加しました";
console.log(taro); // => {name: 'taro', age: 24, u: 'プロパティuを追加しました'}

【JavaScript】変数と宣言

概要