Reactで配列のメソッドを使用する際に注意すること(push)

自分がReactを勉強し始めて、基本的なことを忘れていたために行き詰まった点をこちらで紹介させていただきます。
ほとんど備忘録のような感覚で書かせていただいているので、細かな間違いがあるかもしれません。

今回は、大抵のプログラミング言語で使用される、配列メソッドpushを使用した際に基本的な部分で行き詰まった点について紹介します。

pushの戻り値は、配列ではなくpush後の配列の要素数である

自分はこれを忘れていて、Reactの勉強をしているときに少し悩まされました。

例えば、ある配列

const Arry = new Array();

に対して、さらに要素を追加したいとします。
そして、その配列の要素を別の変数に記憶させたいとき、自分はついつい次のように書いてしまいました。

const newArry = Array.push( "追加したい要素" );

この場合、タイトルにもある通り、pushは(要素を追加した後の)配列の要素数を戻り値として返すので、newArryは配列ではなく整数値になります。
それに気づかないままnewArryを配列のつもりで使用していくと、エラーが発生してしまいます。

なので、push後の配列の要素を別の配列変数に記憶したい場合、Reactでは次のように書くことができます。

const newArry = [...Arry, ("追加したい要素")];

この

...Arry

は、JavaScriptで使用可能なスプレッド構文と呼ばれる記述法で、その場で配列の要素を展開できます。

まとめ

今回のpushの使い方については、正直Reactは関係ありませんが、自分がReactを使っていて躓いたので、備忘録としてReact関連の記事にさせていただきました。

また、スプレッド構文を用いて配列の要素を変更する手順は、Reactで何度も使うと思うので、参考程度に話させていただきました。

React関係なく、プログラミングで似たような点で躓いていらっしゃる方がおられれば、参考にしていただければ幸いです。