はじめに

React を実務で使用するために、現在 TypeScript を学習しております。
しかし、そもそもの JavaScript の理解が不十分だと判断し、アウトプットと備忘録のために投稿することにしました。
ES2015 以降に実装された書き方を中心にまとめています。
エディタは sandbox を使用しました。
内容に不備などございましたら、ご指摘いただけますと幸いです。

基本的な機能の一覧

var の変数宣言

var は古い変数宣言の方法になります。
var での変数宣言は以下のように、上書きや再宣言どちらも出来てしまいます。
しかしプロジェクトが大きくなると、意図しないところで変数を上書き＆再宣言してしまう問題があるため、使用するには注意が必要です。

var val1 = "var変数";
console.log(val1);

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

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

コンソール

var変数
var変数を上書き
var変数を再宣言

let の変数宣言

ES2015 から導入された、後で書き換えることができる変数を定義する書き方です。
let の特徴として、上書きは可能ですが再宣言は不可能という制約があります。

let val2 = "let変数";
console.log(val2);

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

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

コンソール

Error in sandbox:

const の定数宣言

const も、ES2015　に導入されたものになります。
特徴としては、上書きと再宣言ともに不可という制約がある、厳密な宣言になります。
なお const は、val や let のような「変数」を定義するのではなく、「定数」を定義するという言い方になります。
数学で出てくる「定数」とも少しニュアンスが違いますので、その点もご注意ください。

const val3 = "const定数";
console.log(val3);

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

// constは再宣言が不可能
const val3  = "const定数を再宣言";
console.log(val3);
// エラー

コンソール

Error in sandbox:

以上のように、const には厳密な制約がかかっております。
オブジェクトを定義する時は、基本的に const しか使いません。
しかし、このような厳密な const でも、const で定義したオブジェクト内の値を変えることができたり、プロパティも追加できてしまいます。

// constで定義したオブジェクトはプロパティの変更が可能
const val4 = {
  name: "佐藤一郎",
  age: 18,
};

val4.name = "田中太郎";
val4.address = "東京";
console.log(val4);

コンソール

▼ {name: "田中太郎", "age": 18}
    name: "田中太郎"
    age: 18
    address: "東京"

配列

オブジェクトの時と同様に、const で定義しても中身の値を変えたり、追加（push）したりすることができます。

// constで定義した配列はプロパティの変更が可能
const val5 = ['apple', 'orange'];
val5[0] = "grape";
val5.push('banana');
console.log(val5);

コンソール

▼ (3) ["grape", "orange", "banana"]
    0: "grape"
    1: "orange"
    2: "banana"

実際に React の開発での宣言もほとんど const を使用していきます。
ここでは記述しませんが、React の中で動的に値が変わるものは state という別の定義を使用します。
ですので基本的には const を使用し、処理の中で上書きが必要な変数に関しては let を使用していく、というような流れになります。

テンプレート文字列

ES2015 から、文字列の中に JavaScript の変数を従来より便利に埋め込めるようになり、コードも読みやすくなりました。

const name = "佐藤一郎";
const age = "18";
// 「私の名前は佐藤一郎です。年齢は18歳です。」と出力したい

// 従来の方法
const message1 = "私の名前は"　+　name + "です。年齢は"　+　age + "歳です。";
console.log(message1);
// テンプレート文字列を用いた方法
const message2 = `私の名前は${name}です。年齢は${age}歳です。`;
console.log(message2);

コンソール

私の名前は佐藤一郎です。年齢は18歳です。
私の名前は佐藤一郎です。年齢は18歳です。

アロー関数

こちらも ES2015 で追加された、新しい関数になります。
function の記述が不要になり、「 => 」という記号で表現され、アロー関数という名前の由来になっています。
アロー関数内の処理が一行で終わるような場合には、「 { } 」と「 return 」の両方を省略することもできます。
ただし、ブラケットを「 { } 」で囲う場合に「 return 」を省略してしまうと、エラーになるため注意が必要です。

// 従来の関数
function func1(str) {
  return str;
}
console.log(func1("func1です。"));

const func2 = function(str) {
  return str;
}
console.log(func2("func2です。"));

// アロー関数
const func3 = (str) => {
  return str;
}
console.log(func3("func3です。"));

const func4 = (str) => str;
console.log(func4("func4です。"));

const func5 = (num1, num2) => num1 + num2;
console.log(func5(10, 20));

コンソール

func1です。
func2です。
func3です。
func4です。
30

おわりに

分割代入やスプレッド構文、三項演算子などに関しては、後日改めて投稿したいと思います。

参考記事・教材