JavaScriptのreverse()とは？配列を逆順にする方法を徹底解説
JavaScriptのreverse()は、配列の要素を逆順に並び替えるためのメソッドです。シンプルな処理ですが、「元の配列がどうなるか」という点でつまずきやすいポイントでもあります。
この記事では、reverse()の基本から注意点、実践的な使い方までを丁寧に解説します。
Contents
reverse()とは？
reverse()の基本構文
reverse()は、配列の順番をその場で逆にするメソッドです。
const array = [1, 2, 3, 4, 5];
array.reverse();
console.log(array); // [5, 4, 3, 2, 1]このように、配列の順序が反転されます。
reverse()の特徴
元の配列が変更される（破壊的メソッド）
reverse()の重要なポイントは、「元の配列を書き換える」という点です。
const array = [1, 2, 3];
const reversed = array.reverse();
console.log(array); // [3, 2, 1]
console.log(reversed); // [3, 2, 1]このように、元の配列と戻り値は同じ内容になります。
元の配列を変更せずにreverse()を使う方法
slice()を使ってコピーする
元の配列を保持したい場合は、事前にコピーを作成します。
const array = [1, 2, 3];
const reversed = array.slice().reverse();
console.log(array); // [1, 2, 3]
console.log(reversed); // [3, 2, 1]slice()については、配列の一部を取得する方法を解説した記事も参考になります。
JavaScriptのslice()の使い方解説
スプレッド構文を使う
より現代的な書き方として、スプレッド構文も利用できます。
const array = [1, 2, 3];
const reversed = [...array].reverse();
console.log(array); // [1, 2, 3]
console.log(reversed); // [3, 2, 1]文字列を逆順にする方法
reverse()は配列専用のため、文字列には直接使えません。
そのため、一度配列に変換する必要があります。
const str = "hello";
const reversed = str.split("").reverse().join("");
console.log(reversed); // "olleh"split()やjoin()については以下の記事で詳しく解説しています。
JavaScriptのjoin()の使い方解説
よくあるミスと注意点
元の配列が変わることに気づかない
const array = [1, 2, 3];
function getReversed(arr) {
return arr.reverse();
}
const result = getReversed(array);
console.log(array); // [3, 2, 1]関数内でreverse()を使うと、外の配列にも影響します。
意図しないバグの原因になるため注意が必要です。
sort()との違いに注意
reverse()は順序を単純に反転するだけです。
const array = [3, 1, 2];
array.reverse();
console.log(array); // [2, 1, 3]並び替え（昇順・降順）をしたい場合は、sort()を使います。
reverse()の実践的な使い方
最新のデータを先頭に表示する
const posts = ["投稿1", "投稿2", "投稿3"];
const latestPosts = [...posts].reverse();
console.log(latestPosts);
// ["投稿3", "投稿2", "投稿1"]新しいデータを上に表示したい場合に便利です。
配列のコピーと組み合わせて安全に使う
const numbers = [10, 20, 30, 40];
const reversedNumbers = [...numbers].reverse();
console.log(numbers); // [10, 20, 30, 40]
console.log(reversedNumbers); // [40, 30, 20, 10]実務では、元データを変更しない書き方が推奨されます。
reverse()のまとめ
reverse()は配列の順序を逆にするメソッド- 元の配列を直接変更する（破壊的）
- 元の配列を保持したい場合はコピーしてから使う
- 文字列には直接使えないため、配列に変換する必要がある
シンプルなメソッドですが、「破壊的である」という点を理解しておくことで、バグを防ぎやすくなります。
関連記事
配列操作は組み合わせて使うことで理解が深まります。用途に応じて適切なメソッドを選択することが重要です。