forEachでなくfor...ofで実現するバリデータ例

はじめに

javascript初心者向けの記事です。

forEachの処理でできなかったことをfor...ofで実現した話です。
コードレビューで指摘され、forEach内でreturnしてもcontinue扱いになることを知ったので例をまとめておきます。

やりたいこと

文字列を先頭から1文字ずつチェックします。
数字か平仮名以外であれば、他の文字をチェックせずにfalseを返すバリデータ処理を書きます。

NG例

実際に私が書いた冗長なコードのサンプルは以下です。
この例のように、forEachを使用すると、returnしてもcontinue扱いとなり、ループを抜けることができません。
数字か文字列以外の場合でも、全ての文字をチェックしてしまっています。

NG例

// 各正規表現を定義
const number = new RegExp(/^[0-9]+$/);
const hiragana = new RegExp(/^[ぁ-んー]+$/);

//入力文字列を定義
const str = 'カタカナ01';
const strArray = str.split('');

// 数字と平仮名以外が入っていたら、falseを返す
function validateNumberAndHiragana(array) {
  // 一文字ずつチェックする
  array.forEach((element) => {
    console.log(element);
    if (!(number.test(element) || hiragana.test(element))) {
      // continue扱いのためループから抜けられず全ての文字をチェックしてしまう
      return false;
    }
  });
}
validateNumberAndHiragana(strArray);

// 出力
カ
タ
カ
ナ
0
1

OK例

こちらがOKなサンプルです。
for...ofは、イテレータオジェクトを一つずつ取り出してくれるため、文字列を繰り返し処理することが可能です。さらにreturn文でループを抜けることが可能です。

1文字目のチェックで数字か平仮名でない場合、他の文字をチェックせずループを抜けてfalseを返します。

OK例

//入力文字列を定義
const str = 'カタカナ01';

// 数字と平仮名以外が入っていたら、falseを返す
function validateNumberAndHiragana(str) {
  // 一文字ずつチェックする
  for (const element of str) {
    console.log(element);
    if (!(number.test(element) || hiragana.test(element))) {
      return false;
    }
  }
}
validateNumberAndHiragana(str);

// 出力
カ

おわりに

今回はforEachの処理でできなかったことをfor...ofで実現しました。
近いうちに他の繰り返し処理についてもまとめたいと思います。