(JavaScript学習記録) 変数と宣言 ~varの問題を添えて~

✋はじめに ~小さなアウトプットをしてみる~

はじめてのQiita投稿です
Reactの学習をしていく中でもう一度基礎を固める必要があると感じたので、記事にまとめることにしました。
Qiitaでは、小さなアウトプットを継続して積み重ねていくようなスタイルで書いていきたいと思います✍️

💡まとめ

• const：再代入できない変数を宣言できる
• let：再代入ができる変数を宣言できる
• varは：再代入ができる変数を宣言できるが、いくつかの問題がある
• 基本的にはconstを使う
• ループなどで参照する値を変化させたい場合letを使う
• 変数の名前（識別子）には利用できる名前のルールがある

1. 変数と宣言の定義

変数：値を格納するための名前付きの箱のこと
宣言：変数を作成すること
変数を宣言することで、その変数が使用可能になる

2. JavaScriptにおける変数と定数の種類

• const
• let
• var(非推奨)

varが使われていた頃は、意図しない動作が発生しやすかった。
その問題を解決するためにECMAScript2015で、constとletが追加された

　👀ひとつずつみていく

1. const

特徴
・値の変更をしたくない、定数の宣言に使用する。(再代入できない)
・宣言と同時に必ず値を代入する必要がある
・ブロックスコープで宣言された変数は、そのブロック内でのみアクセス可能]

ブロックスコープ
波括弧{}で囲まれた範囲のこと
constやletを用いた宣言はその宣言があるブロックないでしか機能しない

✍️ 基本的にはconst(定数)を使っていく意識

Q:なぜ定数を使わないといけないのか
A:変数の再代入は、参照透過性と呼ばれるルールを壊すため、バグが発生しやすい

参照透過性
「変数の値は最初に定義した値と常に同じである」

(再代入したいケース)
ループなどの反復処理の途中で特定の変数が参照する値を変化させたい場合があります。
その際は、変数への再代入が可能なlet利用します。

サンプルコード

// 書き方：　const 変数名 = 初期値;
const bookTitle = "JavaScript Primer";
bookTitle = "新しいタイトル"; // => TypeError: invalid assignment to const 'bookTitle'

/** constで定数を宣言する例（円周率) **/
const PI = 3.14;
console.log(PI); // 3.14

// 再代入しようとするとエラーが発生する
PI = 3.141592;
// Uncaught TypeError: Assignment to constant variable.

2. let

• 再代入可能
• ブロックスコープで宣言された変数は、そのブロック内でのみアクセス可能
• 初期値を指定しなくてもいい

constとの違いは、

「再代入可能であり、初期値を指定しなくていい」

といいうこと

let bookTitle;
// `bookTitle`は自動的に`undefined`という値になる
// letで変数を宣言する例
let num = 10;
console.log(num); // 10

// 再代入することができる
num = 20;
console.log(num); // 20

// ブロックスコープの例
{
  let x = 5;
  console.log(x); // 5
}
console.log(x); // Uncaught ReferenceError: x is not defined

3. var

• 再代入が可能
• 再定義可能
• ブロックスコープを持たないため、関数スコープまたはグローバルスコープでのみ宣言された変数は、どこからでもアクセス可能
• 初期値を指定しなくていい

Varの問題

• 変数の巻き上げ
• 再定義ができてしまう

1. 変数の巻き上げ

宣言された変数が宣言部分よりも前に使用されてもエラーが発生しない現象のこと

function example() {
  console.log(x); // undefined(表示できてしまう)
  var x = 10;
}
example();
//変数xを下で宣言しているのにその上のconsole.logで実行できてしまう

上記の例では、変数xが宣言される前に参照されていますが、エラーにはならずundefinedが出力されます。

function example() {
  var x; //空値で宣言してる
  console.log(x); // undefined
  x = 10;
}
example();

2. 再定義することができる

letでは再定義しようとするとエラーが発生するけど、varだと発生しない

コードサンプル

/*letの場合*/
// "x"という変数名で変数を定義する
let x;
// 同じ名前の変数"x"を定義するとSyntaxErrorとなる
let x; // => SyntaxError: redeclaration of let x

/*varの場合*/
// "x"という変数を定義する
var x = 1;
// 同じ名前の変数"x"を定義できる
var x = 2;
// 変数xは2となる

Q：なぜvarの仕様を変えずにletやconstが新しく追加されたのか

A: 後方互換性のため

varの仕様を変えてしまうと、既存のアプリケーションが動かなくなってしまう可能性があったため、新しくletとconstを用意した

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

• 半角のアルファベット、_（アンダースコア）、$（ダラー）、数字を組み合わせた名前にする
• 変数名は数字から開始できない
• 予約語と被る名前は利用できない

let $; // OK: $が利用できる
let _title; // OK: _が利用できる
let jquery; // OK: 小文字のアルファベットが利用できる
let TITLE; // OK: 大文字のアルファベットが利用できる
let es2015; // OK: 数字は先頭以外なら利用できる
let 日本語の変数名; // OK: 一部の漢字や日本語も利用できる

ダメな例

let 1st; // NG: 数字から始まっている
let 123; // NG: 数字のみで構成されている
let let; // NG: `let`は変数宣言のために予約されているので利用できない
let if; // NG: `if`はif文のために予約されているので利用できない

参考