事の発端
関数ポインタを使用する以下のコードを実行。
しかし、実行結果が変数に入らない。
以下、その時のコードをかなり簡略化したもの。
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
感想
アロー関数はしょっちゅう使用しているので、この仕様は把握していた。
しかし、ブロック文体の中で関数を実行すれば必ず戻り値を返すだろうという謎の思い込みがあって悩む結果となった。
仕様を把握した気になっていただけで、本当は把握できていなかったのだと認識できた。
まだまだ勉強が足りないと感じました。