javascript 基本文法1
javascript 基本文法についてです。
1. 変数と宣言
JavaScriptには「これは変数です」という宣言をするキーワードとして、 const、let、varの3つがあります。
varはもっとも古くからある変数宣言のキーワードですが、意図しない動作を作りやすい問題が知られています。
そのためECMAScript 2015で、varの問題を改善するためにconstとletという新しいキーワードが導入されました。
1-1. const
次のように、constキーワードに続いて変数名を書き、代入演算子（=）の右辺に変数の初期値を書いて変数を定義できます。
const 変数名 = 初期値;次のコードではbookTitleという変数を宣言し、初期値が"JavaScript Primer"という文字列であることを定義しています。
const bookTitle = "JavaScript Primer";const、let、varどのキーワードも共通の仕組みですが、変数同士を,（カンマ）で区切ることにより、同時に複数の変数を定義できます。
次のコードでは、bookTitleとbookCategoryという変数を順番に定義しています。
const bookTitle = "JavaScript Primer",
bookCategory = "プログラミング";これは次のように書いた場合と同じ意味になります。
const bookTitle = "JavaScript Primer";
const bookCategory = "プログラミング";また、constは再代入できない変数を宣言するキーワードです。
そのため、constキーワードで宣言した変数に対して、後から値を代入することはできません。
次のコードでは、constで宣言した変数bookTitleに対して値を再代入しているため、次のようなエラー（TypeError）が発生します。
エラーが発生するとそれ以降の処理は実行されなくなります。
const bookTitle = "JavaScript Primer";
bookTitle = "新しいタイトル"; // => TypeError: invalid assignment to const 'bookTitle'一般的に変数への再代入は「変数の値は最初に定義した値と常に同じである」という参照透過性と呼ばれるルールを壊すため、バグを発生させやすい要因として知られています。
そのため、変数に対して値を再代入する必要がない場合は、constキーワードで変数宣言することを推奨しています。
変数に値を再代入したいケースとして、ループなどの反復処理の途中で特定の変数が参照する値を変化させたい場合があります。
そのような場合には、変数への再代入が可能なletキーワードを利用します。
1-2. let
letの使い方はconstとほとんど同じです。
次のコードでは、bookTitleという変数を宣言し、初期値が"JavaScript Primer"という文字列であることを定義しています。
let bookTitle = "JavaScript Primer";letはconstとは異なり、初期値を指定しない変数も定義できます。
初期値が指定されなかった変数はデフォルト値としてundefinedという値で初期化されます（undefinedは値が未定義ということを表す値です）。
次のコードでは、bookTitleという変数を宣言しています。
このときbookTitleには初期値が指定されていないため、デフォルト値としてundefinedで初期化されます。
let bookTitle;
// `bookTitle`は自動的に`undefined`という値になるこのletで宣言されたbookTitleという変数には、代入演算子（=）を使うことで値を代入できます。
代入演算子（=）の右側には変数へ代入する値を書きますが、ここでは"JavaScript Primer"という文字列を代入しています。
let bookTitle;
bookTitle = "JavaScript Primer";letで宣言した変数に対しては何度でも値の代入が可能です。
let count = 0;
count = 1;
count = 2;
count = 3;1-3. var
var bookTitle = "JavaScript Primer";varでは、letと同じように初期値がない変数を宣言でき、変数に対して値の再代入もできます。
var bookTitle;
bookTitle = "JavaScript Primer";
bookTitle = "新しいタイトル";・varの問題
varはletとよく似ていますが、varキーワードには同じ名前の変数を再定義できてしまう問題があります。letやconstでは、同じ名前の変数を再定義しようとすると、次のような構文エラー（SyntaxError）が発生します。 そのため、間違えて変数を二重に定義してしまうというミスを防ぐことができます。
// "x"という変数名で変数を定義する
let x;
// 同じ名前の変数"x"を定義するとSyntaxErrorとなる
let x; // => SyntaxError: redeclaration of let x一方、varは同じ名前の変数を再定義できます。
これは意図せずに同じ変数名で定義してもエラーとならずに、値を上書きしてしまいます。
// "x"という変数を定義する
var x = 1;
// 同じ名前の変数"x"を定義できる
var x = 2;
// 変数xは2となるまたvarには変数の巻き上げと呼ばれる意図しない挙動があり、letやconstではこの問題が解消されています。
また、ほとんどすべてのケースでvarはconstかletに置き換えが可能です。
2. 変数名に使える名前のルール
ここまででconst、let、varでの変数宣言とそれぞれの特徴について見てきました。
どのキーワードにおいても宣言できる変数に利用できる名前のルールは同じです。
また、このルールは変数の名前や関数の名前といったJavaScriptの識別子において共通するルールとなります。
変数名の名前（識別子）には、次のルールがあります。
・半角のアルファベット、_（アンダースコア）、$（ダラー）、数字を組み合わせた名前にする
・変数名は数字から開始できない
・予約語と被る名前は利用できない
変数の名前は、半角のアルファベットであるAからZ（大文字）とaからz（小文字）、_（アンダースコア）、$（ダラー）、数字の0から9を組み合わせた名前にします。 JavaScriptでは、アルファベットの大文字と小文字は区別されます。
これらに加えて、ひらがなや一部の漢字なども変数名に利用できますが、全角の文字列が混在すると環境によって扱いにくいこともあるためお勧めしません。
let $; // OK: $が利用できる
let _title; // OK: _が利用できる
let jquery; // OK: 小文字のアルファベットが利用できる
let TITLE; // OK: 大文字のアルファベットが利用できる
let es2015; // OK: 数字は先頭以外なら利用できる
let 日本語の変数名; // OK: 一部の漢字や日本語も利用できる
変数名に数字を含めることはできますが、変数名を数字から開始することはできません。
これは変数名と数値が区別できなくなってしまうためです。
let 1st; // NG: 数字から始まっている
let 123; // NG: 数字のみで構成されている
また、予約語として定義されているキーワードは変数名には利用できません。
予約語とは、letのように構文として意味を持つキーワードのことです。
基本的には構文として利用される名前が予約されています。
let let; // NG: `let`は変数宣言のために予約されているので利用できない
let if; // NG: `if`はif文のために予約されているので利用できない
3. まとめ
JavaScriptにおける変数を宣言するキーワードとしてconst、let、varがある
・constは、再代入できない変数を宣言できる
・letは、再代入ができる変数を宣言できる
・varは、再代入ができる変数を宣言できるが、いくつかの問題が知られている
・変数の名前（識別子）には利用できる名前のルールがある
varはほとんどすべてのケースでletやconstに置き換えが可能です。
constは再代入できない変数を定義するキーワードです。
再代入を禁止することで、ミスから発生するバグを減らすことが期待できます。
そのため変数を宣言する場合には、まずconstで定義できないかを検討し、できない場合はletを使うことを推奨しています。