JavaScript
es6
es2015

アロー関数の簡潔文体とブロック文体の違いに手間取った

事の発端

関数ポインタを使用する以下のコードを実行。
しかし、実行結果が変数に入らない。
以下、その時のコードをかなり簡略化したもの。

const validate = {
  isNotEmpty: {引数が空かどうかチェックし、Booleanを返す。}
}

const hoge = {
  validate: {
    logic: (v) => { validate.isNotEmpty(v); }
  }
}

const value = 'input_value';
const validateFunc = hoge.validate.logic;
const isValid = validateFunc(value);

console.log(isValid); // なぜかundefined!!

原因

validate.isNotEmpty(v) の戻り値がreturnされていなかったため。
MDNを参照すると、どうやらブロック文体では明示的にreturnを記述して上げないと実行結果がreturnされないらしい。
そこで、コードを以下のように変更して見た。

const validate = {
  isNotEmpty: {引数が空かどうかチェックし、Booleanを返す。}
}

const hoge = {
  validate: {
    logic: (v) => { return validate.isNotEmpty(v); }
  }
}

const validateFunc = hoge.validate.logic;
const isValid1 = validateFunc('input_value');
const isValid2 = validateFunc('');

console.log(isValid1); // true
console.log(isValid2); // false

これで動作するようになったが、この書き方はESLintに引っかかる。
正しくは以下。

const validate = {
  isNotEmpty: {引数が空かどうかチェックし、Booleanを返す。}
}

const hoge = {
  validate: {
    logic: (v) => validate.isNotEmpty(v)
  }
}

const validateFunc = hoge.validate.logic;
const isValid1 = validateFunc('input_value');
const isValid2 = validateFunc('');

console.log(isValid1); // true
console.log(isValid2); // false

感想

アロー関数はしょっちゅう使用しているので、この仕様は把握していた。
しかし、ブロック文体の中で関数を実行すれば必ず戻り値を返すだろうという謎の思い込みがあって悩む結果となった。
仕様を把握した気になっていただけで、本当は把握できていなかったのだと認識できた。
まだまだ勉強が足りないと感じました。