Javascript | filter + arrow関数末尾の[0] とは？

Question

下記コードのArray.prototype.filterの最後にある[0]の意味がわかりません。
これはどういう名称の文法でしょうか。初見の記法でしたので、
お尋ねをさせていただきたいです、ご教授をいただけると幸いです。

const setIsHeaderLabel = (model/*: Sequelize */, columnName/*: string */, value/*: string */) => {
  if (!value) return;
  const flag = Object.keys(constant.IS_HEADER_LABEL).filter(k => {
    return constant.IS_HEADER_LABEL[k] === value;
  })[0];
  model.setDataValue(columnName, flag);
};

constant.IS_HEADER_LABEL は下記だとします。

c.IS_HEADER_LABEL = {
  1: '付与する',
  0: '付与しない',
};

宜しくお願いします。

Comments

[Lhankor_Mhy]

普通に添え字ではないかと思うのですが、そういうお話ではなく？

Answer 1

ES5ではArray.prototype.filterしか存在しませんでした。
該当するもののうち、先頭のものだけ取り出したい場合は一度filterで配列にしてから[0]というプロパティにアクセスしていました。

ES2015ではArray.prototype.findがあるのでそちらを使いましょう。
アロー関数使ってるのにArray.prototype.findが存在してないってのもありえません。

const setIsHeaderLabel = (model/*: Sequelize */, columnName/*: string */, value/*: string */) => {
  if (!value) return;

  // "0" or "1" or undefinedが結果の候補になっちゃう
  // このundefinedは駄目そう
  const flag = Object.keys(constant.IS_HEADER_LABEL).find(k =>
    constant.IS_HEADER_LABEL[k] === value
  );

  // 意図を考慮するとこの行が抜けてるんじゃないかな？
  if (flag == null) return;

  model.setDataValue(columnName, flag);
};

ついでにアロー関数は{}を省略すると1つの式をそのままreturnするのでより自然になります。

Comments

[Lhankor_Mhy]

constant.IS_HEADER_LABEL[k] === value;
が typo です。

[miyabi-sun]

最後の`;`でエラーになりますね。
開発の時はeslinter入れてますが、こういう時はよくやらかすうっかりさんなので助かりました。
ありがとうございます。

[Lhankor_Mhy]

いえ、なんとなく Babel を通してみただけで、そうでなければ私も気づかなかったです。
というか、読み返すと、わかりにくいコメントですね、すみません。

[退会済みユーザー]

ありがとうございます！このコードは基本1つの値しか期待していない関数なのですが、
Array.prototype.filterを用いる以上、配列で返されるので添字[0]を利用することで
値を取得していたことが、ご回答のおかげで把握できました。
またfindの件も、とても勉強になりました。確かにこのコードはArray.prototype.findで
書換をした方がいいですね。

------------------------------
// 意図を考慮するとこの行が抜けてるんじゃないかな？
if (flag == null) return;
------------------------------

これは if(flag==undefined) return; ではなくやはりnullであるべきでしょうか？
もしよろしければご教授いただけると幸いです。

[miyabi-sun]

追加講義ということで普段の口調を使うね。

> これは if(flag==undefined) return; ではなくやはりnullであるべきでしょうか？
そうだね。
普段JavaScriptで比較演算子を使う場合は`===`を使えと教わるんだけど、
このケースだけは`===`ではなく`==`を使うべきだし、比較するのはnullが最もふさわしい。

理由として、JavaScriptの仕様でundefinedが予約語ではない。
つまりundefinedという変数を宣言して上書きできる小ネタがある。
いやびっくりだよ。

そして==は型変換可能という意味で、nullやundefinedはif文に単体で放り込むとfalseとして扱われる。
https://developer.mozilla.org/ja/docs/Glossary/Falsy
なので、`0 == null`や`"" == undefined`は一見trueになりそうなんだけど、
nullやundefinedと==で比較してtrueが返ってくるのは、nullかundefinedのみ。
この仕様があるので、nullとundefined両対応で弾く時は基本的に`if (a == null)`が使われるのだ。

---

ついでに別方向、
`if (!flag) return;`という選択肢も見ていこう。

Object.keys(obj)は必ずStringの配列を返す。
そしてJavaScriptはif文に単体で放り込んだ場合、Boolean型でないものがtrueになるかfalseになるかという変換先が仕様で厳格に決められている。

では問題、Stringの"0"はtrueであるか？それともfalseであるか？
これは結構難問だね。正解できたかな？

それに比べると、Array.prototype.findが見つからなかったらundefined返すって言ってるんだから素直にundefinedを弾いた方がわかりやすい
まず無いだろうけど`Object.keys({"": "taro"})`の場合falseになる値が取れるからバグになるしね。

```
(undefined => undefined)(1)
// 1 <- デベロッパツール上で引数束縛でいけることを確認

Object.keys({"0": "taro"})
// ["0"]

Boolean('0')
// true

Object.keys({"": "taro"})
```

[退会済みユーザー]

大変為になりました、ありがとうございます。

■ undefinedが予約語でない点
■型変換可能==をnullやundefinedで用いる場合、それぞれnullやundefinedでしかtrueにならない点
■console.log(Boolean('0')); // trueになること
■アロー関数の{}を省略することで、returnを省略できる点など

知らないこと、整理できたことが多くありました、ありがとうございます！

Answer 2

filterが配列を返すので、要はarray[0]、つまり配列の最初の要素、です。

Comments

[papinianus]

細かくいうなら
まず、Object.keys(constant.IS_HEADER_LABEL)が、[0,1]を返す
次に、[0,1].filter(callback)で、callback内の処理は、ヘッダラベル[0]、ヘッダラベル[1]としたときの値がvalueと同じかを判定。例えばvalueが"付与する"だったら[1]になる。
で、その0番目の要素である、Number(1)が得られる。

処理を全体として見ると、valueで表現される文字列をフラグである値に変換している処理。フラグが数値じゃなくても汎用的に使える構文になっている。

[退会済みユーザー]

ありがとうございます、非常に勉強になりました！
「フラグが数値じゃなくても汎用的に使える構文になっている」
のフラグの部分というのは、
----------------------------------
c.IS_HEADER_LABEL = {
1: '付与する',
0: '付与しない',
};
----------------------------------
の'1'や'0'の部分を指し、これらが必ずしも数字である必要はないような
設計になっているという認識ですよね！

[papinianus]

そうです！