概要
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を追加しました'}