この記事の経緯
自分でJavaScriptを書いていて、理解を深める、それをアウトプットして伝えよう！ということで記事にしてみました。
このコードはGASを書いていて使っているコードなので、正確にいうと、JavaScriptではないんですが、大体一緒なんでご勘弁を。
下記で書いている３パターンの記述は全て最終的な戻り値は同じものになっております。
結果は一緒だけども、記述の違いを見比べていただいてJavaScriptの理解を深めていただければと思います。
前提：関数の第1引数のpostTextの中に投稿者の情報が含まれています。その投稿者が誰なのかを調べるための関数です。調べるための要素としてgithubアカウントを用いています。そのgithubアカウントが含まれているかどうかで投稿者が誰なのかを調べるための関数となっています。
パターン1: for文とif文の組み合わせ
// postText:string 検索したい文字列が含まれているのかを探す対象
// membersArr:array 受講生の情報一覧となるオブジェクトが入っている
// 配列に入っているオブジェクトの情報
// {
// no: int,
// username: string,
// userid: string,
// githubAccount: string
// }
function searchPostMember(postText, membersArr){
let returnMemberObj = {};
for(let i = 0; i < membersArr.length; i++){
// indexOfを用いて探したいテキストが含まれているのかを判別しています
if((postText.indexOf(membersArr[i]["githubAccount"]) > -1) &&
(membersArr[i]["githubAccount"] !== "")){
returnMemberObj = membersArr[i];
}
}
return returnMemberObj;
}
最初はね、for文とif文を組み合わせてやるのがいいと思います。わかりやすいですし。
そこからもう少し踏み込んだ書き方をするとforEachになるのかなと思います。
forEachは配列の際に使用できるメソッドとなっております。
for文は元の要素に関わらず使えるものですが、ここからは各要素に準ずるメソッドになってきます。
パターン２: forEachメソッドとif文
function searchPostMember(postText, membersArr){
let returnMemberObj = {};
membersArr.forEach( member => {
if((postText.includes(member.githubAccount)) &&
(member.githubAccount !== "")){
returnMemberObj = member;
}
})
return returnMemberObj;
}
forEachの記述だと、配列内のものを全文回っていった上で、まだif文を使わないといけないのでこれもなんとかしたいですよね。
そこで使うのがfindメソッドとなります。
パターン3: findメソッド
function searchPostMember(postText, membersArr){
return membersArr.find( member =>
(postText.indexOf(member.githubAccount) > -1)) &&
(member.githubAccount !== "")
)
}
※ちなみになんですが、findの前はsomeメソッドなんかで出来ないかなーとか思って調べていたんですが、someは戻り値がtrue/falseしかないようなので諦めたというかfindにしました。
後書き
findだととてもコンパクトにかけますね。ただ、コンパクトすぎて何やってるのか初見だとわかんないと思います。
これは、「コールバック関数」というものを理解できたときに理解ができると思います。
正直、自分はこんなの何書いてるのか最近までちゃんとわかってませんでした。
最近の皆さんは理解力半端ないのですぐわかるかと思いますが、分かんなくても書き続けているととある瞬間から「そういうことか！！！」と気づくと思います。
とにかく書き続けることです！