概要

変数宣言とはプログラムを実行する際に、繰り返し利用できるように文字や数値の入れる箱に名前を付けて宣言すること。変数を宣言するときはvar let const の3種類を使用します。

従来のJavaScriptではvarを使用していたのですが、上書き可能であることや再宣言可能であることが問題となっており、現在ではあまり使用されていません。

上書き可能：一度定義した変数に別の値を代入できること。再宣言可能：全く同じ変数名を複数箇所で変数定義出来ること。

以下でvar let constそれぞれで変数を宣言したときに、どのような特徴を持つものか記載していきます。

var(上書き可能、再宣言可能)

var val1 = "varで変数宣言"
console.log(val1); //varで変数宣言

▼上書き可能

val1 = "varは変数の上書き可能"
console.log(val1); //varは変数の上書き可能

▼再宣言可能

var val1 = "varは変数の再宣言可能"
console.log(val1); //varは変数の再宣言可能

let val2 = "letで変数宣言"
console.log(val2); //letで変数宣言

▼上書き可能

val2 = "letは変数の上書き可能"
console.log(val2); //letは変数の上書き可能

▼再宣言不可能(再宣言をしようとするとエラーとなる)

let val2 = "letは変数の再宣言不可能"
console.log(val2); //エラー

let val3 = "constで変数宣言"
console.log(val2); //constで変数宣言

▼上書き不可能

val3 = "constは変数の上書き不可能"
console.log(val3); //エラー

▼再宣言不可能

let val3 = "constは変数の再宣言不可能"
console.log(val3); //エラー

基本的にconstは変数の上書きも再宣言も不可能なのですが、オブジェクト型に関してはconstで定義していても変数の値を変更していくことが出来る。

プリミティブ型(変数の変更が不可能)

オブジェクト型(変数の変更が可能)

▼オブジェクトを定義

const obj1 =  {
 name: "田中",
 age: "20",
};
console.log(obj1); //{name: "田中", age: 20}

▼プロパティ値を変更

obj1.name = "Tanaka";
console.log(obj1); //{name: "Tanaka", age: 20}

▼プロパティ値を追加

obj1.address = "Tokyo";
console.log(obj1); //{name: "Tanaka", age: 20, address: "Tokyo"}

▼配列を定義

const arr1 = ["dog", "cat"];
console.log(arr1); //["dog", "cat"]

▼配列の1つ目の値を変更

arr1[0] = "fish";
console.log(arr1); //["fish", "cat"]

▼配列に値を追加

arr1.push("humstar");
console.log(arr1); //["fish", "cat", "humstar"]

React開発では、基本的にconst を使用しますがStateで管理せず処理の中で上書きをしていく場合はletを使用する場合があるとのことです。
勉強を進めていく中で、用途が分かってきたらまとめていこうと思います。