【Javascrip】配列の .reverse() に気をつけろ！

こんばんは。
たかきです。

今日もjavascriptを書いております。
みなさんも書いてますか？

配列、使ってますか？
使ってますよね。

array に .reverse() って使ったことありますか？
そう、配列を逆順にするあれですね。

var arr = [0, 1, 2, 3, 4];
var arrRev = arr.reverse();
console.log(arrRev); // [4, 3, 2, 1, 0]

そう、こんな関数ですね。

えー、長い記事書こうと思ってましたが、面白くなる気配がなかったので結論だけ書きますね。
.reverse() は唱えた瞬間に元の array の順番も入れ替わるので注意です。

先ほどの例だと、

var arr = [0, 1, 2, 3, 4];
var arrRev = arr.reverse();
console.log(arrRev); // [4, 3, 2, 1, 0]
console.log(arr); // [4, 3, 2, 1, 0]←

arrも逆順になるので注意。

僕はreactのあるstateを逆順に使うときにこれでハマりました。
render関数の中で、this.state.arr.reverse() を加工して使おうと思ったら、この瞬間にstateが逆転して意図しない挙動になったのです。

もしやりたいなら underscore.js とか lodash.js の _.clone(); で複製してから使うんでうすね。

clone せずに、

var newArr = this.state.arr;
newArr.reverse();

なんてしても、arrayは参照渡しなので意味無いですぜ。