Javascript 変数の学習メモ

変数の基本

変数(let)、定数(const)はデータにあだ名をつけるみたいな機能
(昔はvarも使用されていたが、varはもう使わない為、覚えなくてよい)
変数、定数は使い方が３つある
1. 宣言→ あだ名をつけること
2. 代入→ あだ名に対して値をひも付けすること
3. 参照→ あだ名にひもづいている値を使うこと
変数(let)は、再代入できる、再定義できない。(先に宣言だけして、後から代入することができる。)
定数(const)、再代入できない、再定義できない。(宣言と値の代入はセット。)
変数の名前は、「 Unicord文字(記号以外の文字)、数字、$、_ 」が使える。
(日本語も使えるが、非推奨)
同じスコープ内で、同じ変数名を定義することはできない ( スコープについては後に記載)

変数 let

let x = 20; // 宣言、xの値を代入
let y = 30; // 宣言、yの値を代入

console.log(x); // xをコンソールに出力 = 20
console.log(x * y); // x * yをコンソールに出力 = 600

x = 7; // 変数xを再代入

console.log(x); //xをコンソールに出力 = 7

定数 const

const x = 20; // 宣言、変数xの値を代入
const y = 30; // 宣言、変数yの値を代入

console.log(x); // xをコンソールに出力 = 20
console.log(x * y); // y * yをコンソールに出力 = 600

x = 7; // 変数xを再代入  → エラー！

有効範囲

スコープとは変数の名前や関数などの参照できる範囲を決めるもの。スコープの中で定義された変数はスコープの内側でのみ参照でき、スコープの外側からは参照できない
{ と }で囲んだ範囲をブロックと呼ぶ
ブロック内で宣言された変数は、スコープ内でのみ参照でき、スコープの外側からは参照できない
同じスコープ内で、同じ変数名を定義することはできない

例-1

{const x = 20;} 

console.log(x); // xをコンソールに出力 → エラー！

→ブロックスコープ内で定義した変数なので、スコープの外からの参照できない

例-2

{
  let x = 20;
  console.log(x); // xをコンソールに出力 → OK
}

→ブロックスコープ内で定義し、スコープ内で参照しているのでOK

例-3

{
  const x = 20;
  console.log(x); // 20と出力
  {
    const x = 30;
    console.log(x); // 30と出力
  }
} 

const x = 40;
console.log(x); // 40と出力

→それぞれのスコープで宣言しているため、それぞれ別の値が出力される

例-4

{
  const x = 20;
  console.log(x); // → エラー！
  const x = 30;
  console.log(x); // → エラー！
}

→同じスコープ内で、同じ変数名を定義することはできないので、エラーになる。

constの値が再代入できる場合もある

MDNによると、「定数の中身がオブジェクトの場合、オブジェクトの内容（プロパティなど）は変更可能です。」とあるように、オブジェクト内の値に関しては、再代入が可能になる。

つまり、参照型(オブジェクトや配列)では、値を格納している参照値を変更せず格納された値を変更できるため、下記のように、格納された値のみを変更することができる。

constの再代入できる例

// オブジェクトの中身の変更の場合

const example = {name:"田中" , age:36};
// example =  {name:"佐藤" , age:36};  // エラー
example.name = '佐藤';  // OK

console.log(example.name); // 佐藤

// 配列の中身の変更の場合

const example = ['A', 'B', 'C'];
// example = ['エー', 'ビー', 'シー'];  // エラー
example[0] = 'エー';  // OK

console.log(example[0]); // エー

まとめ

基本の部分ですが、重要な部分だと思いメモとして残しました。
最初、constは「定数なので、再定義、再代入できない」のにも関わらず、スコープ外で同じ名称の宣言をした際に使えてしまうことに引っかかりましたが、ブロックとスコープの意味を調べることで、「有効範囲」を確認することで、理解が深まったように感じます。また、

Javascript 変数 (初学者の学習メモ)

Javascript 変数の学習メモ

変数の基本

有効範囲

constの値が再代入できる場合もある

まとめ