モダンJavaScript（？）での文字列結合と関数定義

モダンJavaScriptでの文字列結合と関数定義について従来のjsの記載方法と比較しながら見ていきたいと思います。
従来の記載方法が使えないわけではないので、慣れてる方はそちらでも構わないと思います。

テンプレート文字列

テンプレート文字列とは、文字列の中にjsの変数を埋め込む方法です。
従来の方法での記載例を見てください。

// 変数宣言
const what = "会社員";
const age = 28;

// 従来の方法
const message1 = "私は" + what + "です。年齢は" + age + "です。";
console.log(message1);

上記の内容でブラウザのコンソールを確認すると、以下の様な内容が表示されます。

文字列が「+」によって結合されていることがわかります。
続いて、テンプレート文字列を用いた方法です。

// 変数宣言
const what = "会社員";
const age = 28;

// テンプレート文字列を用いた方法
const message2 = `私は${what}です。年齢は${age}です。`;
console.log(message2);

文字列を囲む「“」（バッククォート）で囲んで文字列を入力します。
バッククォートは端末やキーボードによって違うと思いますが
私の端末では「Shift + @」とかで入力できます。

文字列の中にjsの変数を入力するには「${}」で囲んで入力すれば挿入することができます。
以下の様に同じ結果になります。

アロー関数

ここでは、アロー関数と従来の方法で記載した関数を見ていきたいと思います。
では、従来の方法で記載した関数から見ていきます。

// 従来の関数
function func1(num1, num2) {
  var res = num1 + num2;
  return res;
}
// 上記の関数func1を呼び出す
console.log(func1(1, 2));

引数で「num1」「num2」という値を受け取って足し算した結果を返すという関数を定義しています。
一番最後の行は定義した関数を呼び出しています。（引数num1 = 1、num2 = 2を指定しています）

コンソールログには以下の様に出力されます。

// 関数を変数に格納してから呼び出し
const func2 = function (num1, num2) {
  var res = num1 + num2;
  return res;
};
console.log(func2(1, 2));

こちらは、func2という変数に一旦格納してから、呼び出しています。
結果としては先程と同じになります。

つづいて、アロー関数にて記載します。

const func4 = (num1, num2) => {
  const res = num1 + num2;
  return res;
};
console.log(func4(1, 2));

functionというも文字列を省略した記載方法になっております。
こちらも結果は先程と同様になります。

他の学習内容について参照されたい方はこちらへどうぞ