モダンJavascriptの学習記録1

Typescriptを学習する中で、見たことのない書き方に出会ったのでJavascriptから学習しなおしました。

テンプレート文字列

``（バッククォート）の中で${}を使って変数を埋め込むことが出来る記法です。

const name = "hakanai";

const message = `私の名前は${name}です。`;

アロー関数

const 変数 = (引数) => {処理} のように記述します。

const func2 = (num1, num2) => {
    return num1 + num2;
}

// 処理の記述が1行の場合
const func2 = (num1, num2) => return num1 + num2;

// 引数が1つの場合
const func2 = str => return str;

分割代入

オブジェクトや配列から値を取り出す際に中身のプロパティに名前をつけて取り出すことが出来ます。

オブジェクトの場合

const Profile = {
    name: hakanai,
    age: 24
};

// 従来の記法
const message2 = `私の名前は${Profile.name}です。年齢は${Profile.age}です。`;

// 分割代入
const {name, age} = Profile;
const message2 = `私の名前は${name}です。年齢は${age}です。`;

配列の場合

const Profile = ["hakanai", 24]

// 従来の記法
const message1 = `私の名前は${Profile[0]}です。年齢は${Profile[1]}です。`;

// 分割代入
const [name, age] = Profile;
const message2 = `私の名前は${name}です。年齢は${age}です。`;

デフォルト値

変数にデフォルト値を設定できます。

const greeting = (name = "ゲスト") => console.log(`こんにちは！${name}さん！`);

オブジェクトの省略記法

プロパティ名と値（変数名）が同じ場合に値を省略できます。

const name = "hakanai";
const age = 24;

// 従来の記法
const Profile = {
    name: name,
    age: age
};

// 省略記法
const Profile = { name, age };

スプレッド構文（...）

配列の前に...を記述することで下記のようなことが出来ます。

// 配列の展開
const arr1 = [1, 2];
console.log(...arr1); // 出力結果：1 2

// まとめる
const arr2 = [1, 2, 3, 4, 5];
const [num1, num2, ...arr3] = arr;

console.log(num1); // 出力結果：1
console.log(num2); // 出力結果：2
console.log(arr2); // 出力結果：3 4 5

// 配列のコピー
const arr4 = [10, 20];
const arr5 = [30, 40];

const arr6 = [...arr4];
console.log(arr6); // 出力結果：[10, 20]

// 配列の結合
const arr7 = [...arr4, ...arr5];
console.log(arr7); // 出力結果：[10, 20, 30, 40]