みかづきブログ・カスタム

基本的にはちょちょいのほいです。

Array.prototype.forEach を使うとループを途中で止めることができないので、代わりに Array.prototype.some を使ってループを止める 🔁

f:id:kimizuka:20200819113319p:plain

最近、1年前の己のコードを見返す機会があったのですが、

this.items.some((item, i) => {

});

という見慣れない記述が。

itemsは配列だったので、Array.prototype.someを使ってます、
いつもだったら、forEachを使う場面なのですが、何故にsomeという見慣れないメソッドをつかったのか。
理由はおろか、Array.prototype.someの仕様自体、全く記憶になく調べ直してみました。

Array.prototype.someとは

some() メソッドは、配列の少なくとも一つの要素が、指定された関数で実装されたテストに合格するかどうかをテストします。これは論理値を返します。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/some より引用

const array = [1, 2, 3, 4, 5];

// checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// expected output: true

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/some より引用

というように使うようです。
上記のだと、要素にひとつでも偶数が入っていればtrue、入っていなければ奇数が返ってきます。

ただ、僕の記述では、戻り値を捨てているので、単純にforEachの代わりとしてに使ってます。

なぜだ。

しかし、気付きました。これは余計なループをさせないためだと。


Array.prototype.forEachとは

forEach() メソッドは与えられた関数を、配列の各要素に対して一度ずつ実行します。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach より引用

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach より引用

forEachは配列をループで回せる便利なメソッドなのですが、途中で止めることができません。
1年前の僕はこの問題を解決するためにsomeを使っていたようです。


Array.prototype.someは途中で止まる

someはforEachと違って「trueが返ってくるとそこで止まる」という性質があります。

const array = [1, 2, 3, 4, 5];

// checks whether an element is even
const even = (element, i) => {
  console.log(element, i);
  return element % 2 === 0;
}

console.log(array.some(even));
// expected output: true

最初の例にconsole.logを入れるとわかるのですが、
配列の1番目の要素、2を見つけたところでループがとまります。
副作用的な使い方ですが、これは便利です。



以上、1年前に書いた自分のコードから学んだことでした。
副作用的に使うときはコメントを残しておかないと、他人はおろか、自分でもわからなくなるなと思いました。以後気をつけます。