JavaScript でアロー関数

developer.mozilla.org

アロー関数をいつもマニュアル見ながら書いてるので 自分用メモ

ふつうのアロー関数

// 普通の関数定義
function tashizan(a,b){
    console.log({a}, {b});
    return a+b;
}

// アロー関数
const tashizan = (a,b) => {console.log({a}, {b}); return a+b;}


tashizan(1,2);  // 3

かっこは省略できる

// 戻り値がひとつのときは {} を省略できる
const kakezan = (a, b) => a*b;

// 引数がひとつのときは () を省略できる
const hanbun = a => a/2;

オブジェクトを返すとき

オブジェクトリテラルじゃなくてブロックと勘違いされるため、中かっこで囲う必要がある

// オブジェクトを返したい、
const obuje = a => ({"hoge": a});

定義時の変数の値を使うとき

関数の中にある変数は その変数そのものになるので、値が変わると反映してしまう

let A=12;
const sansho = () => A;

sansho();  // 12

A=13;
sansho();  // 13 になっちゃう。これを12のままにしたい

なので、クロージャで定義時の値を別の変数に取って 関数の定義を返す
（アロー関数あんまり関係ない）

let A=12;

// 変数を取っておく方法
const sansho1 = (function() {
  var save = A;
  return function() {
    return save;
  };
})();

// アロー関数で書き直し
const sansho1 = (() => {
  var save = A;
  return function() {
    return save;
  };
})();

// アロー関数で短く書き直し
const sansho1 = (() => {
  var save = A;
  return () => save;
})();

let A=12;

// 変数を定義時に引数で渡す方法
const sansho2 = (function(save) {
  return function() {
    return save;
  };
})(A);

// アロー関数で書き直し
const sansho2 = ((save) => {
  return function() {
    return save;
  };
})(A);

// アロー関数で短く書き直し
const sansho2 = ((save) => () => save)(A);


sansho2();  // 12

A=13;
sansho2();  // 12 のまま