はじめに
記事を見ていただいて、ありがとうございます!
Webエンジニアをしているsannoと申します。
突然ですがJavaScriptの組み込みmethodのincludes()は、ArrayとStringの両方にあります。
今回はそのincludes()について解説してゆきたいと思います。
興味がある方はぜひ、見ていってください。
JavaScriptの組み込みincludes() method
JavaScriptの組み込みincludes() methodはArrayにもStringにもあります。
それぞれのincludes()の動作としては、以下のような感じです。
console.log(['abcde', 'fghij'].includes('abcde'));
// > true
console.log(['abcde', 'fghij'].includes('bc'));
// > false
console.log('abcde'.includes('abcde'));
// > true
console.log('abcde'.includes('bc'));
// > true
console.log('abcde'.includes('bcf'));
// > falseそれで突然、inclueds()のことが気になったかといいますと、とある処理でArrayとStringが混在されているObjectがあって、そこでincludes()で条件判定されていたからというだけなんですけれどね。
具体的には以下のようなObjectで、意図しないものが条件を通ってしまう可能性があったという感じです。
// こんなObjectがあって
const persons = {
Tom: {
age: 25,
hobby: 'play tennis game',
},
Mary: {
age: 20,
hobby: [
'cooking',
'play tennis',
],
}
};
Object.keys(persons).forEach(function (key) {
// Maryだけを条件に通したいつもりがTomも通ってしまう
if (persons[key]['hobby'].includes('play tennis')) {
console.log(key + ' likes sports.');
}
});
// > Tom likes sports.
// > Mary likes sports.上記のコードで、includes()なんだの以前に何がいけないかといいますと、hobbyにArrayとStringが混在していることですね。
hobbyに複数のものが入る可能性があるならば、初めからすべてArrayに統一しろよって話ですね。
JavaScriptは型定義を持たないので、複雑なObjectだと同じプロパティなのに異なる型の値が入ってしまうということもあるかもしれません。
そこは細心の注意を払うしかないといえばそれまでなのですが、TypeScriptを導入して静的型付けで想定外の値が入らないようににしておくというのも一つの手かもしれません。
まとまりがない結論になってしまいますが、includes()を使うときには気をつけなければだなと思いました。
おわりに
JavaScriptの組み込みmethodのincludes()はArrayとStringの両方にあり、滅多に起こることではないと思いますが、それによって想定外の結果になることもあるという話でした。
もしかしたら、includes()のmethodはArrayとString以外にもあるかもしれません。
その時はコメントなどでご指摘ください。
結論として何が言いたいかと言いますと、静的型付けって良いよねということでした。
(JavaScriptも素晴らしい言語だと思います)
ここまで記事を見ていただいて、ありがとうございました!
コメント