Javascript テンプレート文字列・アロー関数

テンプレート文字列

今までは+を使ったりしなければいけなく、コーテーションがその都度必要だったりしたがテンプレート文字列を使うと、文字列の中に埋め込むことができる。
使い方は文字列を ` バッククウォートで囲み、jsの文は${}で囲む。

const name = "tami";
const age = 20;
const favo = {
  food: "りんご",
  color: "赤"
  };
  
  const hello =`私の名前は${name}です。年齢は${age}歳です。
                好きな食べ物は${favo["food"]}、好きな色は${favo["color"]}です。`;
                
  console.log(hello)

私の名前はtamiです。年齢は20歳です。好きな食べ物はりんご、好きな色は赤です。 

アロー関数

従来はfunctionを用いて関数を用いていたが、ES6から別の書き方ができるようになった。
=>が弓矢に見えることからアロー関数と呼ぶ。

従来

//引数に文字列を渡してそれをreturnで返すという関数があったとする


  function func1(str){
    return str;
  };

  console.log(func1("func１です！"));

func1です！

変数に無名関数を入れた場合

const func1 = function(str){
  return str;
};

console.log(func1("func１です！"));

func1です！

アロー関数

//無名関数のときの'function() ='のfunctionがなくなって>が追加されたような見た目
const func1 = (str) => {
    return str;
};

console.log(func1("func１です！"));

//引数が一つの場合、()を省略できる。ただpritierを使うと自動で()が付くので
//どちらで記述するにしろ記法を統一すること。
const func1 = str => {
    return str;
};

console.log(func1("func１です！"));

//実行内容が単一の場合、returnと波括弧{}も省略できる。
const func1 = str => str;

console.log(func1("func１です！"));

func1です！
func1です！
func1です！

まとめ

ES6から便利な記法が増えた。テンプレート文字列も、アロー関数もより簡単にわかりやすく、書くことができるなと思った。アロー関数に関してはまだ理解できていない部分があるが、追々理解していければと思う。
無名関数に関しては今回は変数定義しての使い方しか書いていないが、例えば引数に入れるときに無名関数で書いて、なおかつアロー関数で書けば、変数名を考えて定義してという工程を省けるので、非常に短くわかりやすく処理内容を書くことができる。
引数に関数を入れるとき１００％この書き方で書けばいいというわけではなく、同じ関数を何度も記述したりする場合など、変数に定義して記述していくほうが記述がスマートになる場合もあるため、時と場合に応じて書き方を選ぶことが大切。