【JavaScript】関数とオブジェクト⑦ アロー関数

はじめに

Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。

前回の記事

目的

• 関数とオブジェクトについての理解を深める

本題

1.アロー関数

無名関数を記述しやすくした省略記法のこと

基本構文.

() => {};

例1

基本的な書き方

// 一般的な関数
function a(name){
  return "hello " + name;
}

// 関数式にした場合
const b = function(name){
  return "hello " + name;
}

// 上記をアロー関数に直すと下記の通り
const c = name => "hello " + name;

// functionを削除して、{}の前に=>を置く
// 引数が１つの場合()は省略できる
// 実行行が一行の場合は{}が省略できる
// そうすると変数cにアロー関数が代入される
console.log(c("炭治郎"));

例2

２つ以上引数を渡したい場合

// ()で引数を囲い、第二引数を用意
const d = (name, name1) => "hello " + name + ", " + name1
console.log(d("善逸", "伊之助"));

例3

引数がない場合

// 引数がなくても()の省略は不可
const e = () => "hello";
console.log(e());

// （）ではなく_でも代用可
const f = _ => "hello";
console.log(f());


// 複数行ある場合は{}使う
// {}がある場合はreturn省略不可
const g = () => {
  const h = "うまい！" + "うまい！";
  return h;
}
console.log(g())

2.無名関数とアロー関数の違い

省略記法であるだけなので、機能が同じというわけではない

	無名関数	アロー関数
this	◎	✗
arguments	◎	✗
new	◎	✗
prototype	◎	✗

上記のように使えない機能もある

今日はここまで！

参考にさせて頂いた記事

• 【JS】ガチで学びたい人のためのJavaScriptメカニズム