定義と使い方

配列において reverse() 関数は、与えられた 配列の要素の順序を逆順（reverse）に直接並べ替えます。

特徴

  • この関数は、与えられた元の配列を直接変更します。
  • 配列の最初の要素は最後になり、最後の要素は最初になります。
  • 新しい配列を返しません。

基本例

JavaScript 
const arr = [1, 2, 3, 4, 5];
const reversedArr = arr.reverse();

/* 配列の要素の順序を逆順に並べ替えます。 */
console.log(reversedArr); // 出力: [5, 4, 3, 2, 1]

/* 元の配列を直接変更します。 */
console.log(arr); // 出力: [5, 4, 3, 2, 1]

構文

JavaScript 
arr.reverse()

arrは、reverse()関数を適用する元の配列です。

引数

ありません。

戻り値

元の配列の要素の順序を逆順に並べ替え、その結果として該当する配列を返します。
戻り値は変更された元の配列自体です。新しい配列は返しません。

注意点

注意すべき点は、reverse()関数が既存の元の配列を直接変更するということです。
つまり、reverse()関数を呼び出すと、呼び出した元の配列自体が逆順に変更され、新しい配列やコピーは生成されません。したがって、この関数を使用する場合は、元の配列が変更されることを考慮する必要があります。もし元の配列を変更せずに保持したい場合は、コピーを作成してからreverse()を適用するか、または元の配列を直接変更せずに、与えられた配列の要素の順序を逆順（reverse）に並べ替えた配列を返すtoReversed()関数を使用してください。

slice()関数を使用して、元の配列をコピーする

補足説明
配列の slice() 関数は、配列の特定の範囲の要素を切り取り（slice）、抽出した結果を新しい配列として返します。

JavaScript 
const originalArray = [1, 2, 3, 4, 5];

// 元の配列のコピーを作成
const copiedArray = originalArray.slice();

// コピーに対して reverse() 関数を適用
copiedArray.reverse();

console.log(originalArray); // [1, 2, 3, 4, 5] (元の配列は変更されません)
console.log(copiedArray);   // [5, 4, 3, 2, 1] (逆順になった配列)

スプレッド（...）構文を使用して、元の配列をコピーする

補足説明
スプレッド（...）構文は、値（value）として反復可能なオブジェクト（配列、文字列、DOMコレクションなど）の要素を、個別に展開して並べる（spread）JavaScriptの文法です。...（3つの点）の後に、該当する値（value）として反復可能なオブジェクト（配列、文字列、DOMコレクションなど）を記述する形式です。

JavaScript 
const originalArray = [1, 2, 3, 4, 5];

// スプレッド（...）構文を使用して元の配列をコピー
const copiedArray = [...originalArray];

// コピーに対して reverse() 関数を適用
copiedArray.reverse();

console.log(originalArray); // [1, 2, 3, 4, 5] (元の配列は変更されません)
console.log(copiedArray);   // [5, 4, 3, 2, 1] (逆順になった配列)

toReversed() 関数を使用する

toReversed()関数は、reverse()関数とすべての機能が同一ですが、元の配列を変更しません。

この関数は、reverse()関数の欠点を補完するために、ECMAScript 2023で初めて導入されました。以前は、reverse()関数のみを使用して、配列の要素の順序を逆順に並べ替えることができました。

reverse()関数は元の配列を変更するため、元の配列の要素を保持する必要がある場合には使用できません。toReversed()関数は新しい配列を生成して要素を並べ替えるため、このような問題を解決できます。

JavaScript 
const originalArray = [1, 2, 3, 4, 5];

/* 配列の要素の順序を逆順に並べ替えます。 */
const reversedArray = originalArray.toReversed();

console.log(reversedArray); // [5, 4, 3, 2, 1] (逆順になった配列)

/* 元の配列は変更されません。 */
console.log(originalArray);   // [1, 2, 3, 4, 5]
配列 toReversed() 関数の互換性
メソッド
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
Node.js
Node.js
toReversed() 110 110 115 16 20

例

reverse() 関数は、さまざまな状況で多様に活用できます。いくつかの例を見てみましょう。

順序を反転させた後に反復

JavaScript 
const numbers = [1, 2, 3, 4, 5];

// 配列の順序を逆順に変更し、各要素を出力
numbers.reverse().forEach(number => {
    console.log(number);
});

// 出力順序: 5, 4, 3, 2, 1

コード補足説明
forEach() 関数は、配列を反復処理して各要素をコールバック関数で処理するための関数です。

文字列を反転させる

JavaScript 
const str = "Hello, World!";

// 文字列を配列に分割し、逆順に反転させた後、再び文字列に結合します。
const reversedStr = str.split("").reverse().join("");

console.log(reversedStr);
// 出力: "!dlroW ,olleH"

コード補足説明
文字列の split() 関数は、文字列を指定された区切り文字や正規表現に基づいて分割し、配列に変換します。

コード補足説明
配列の join() 関数は、配列の各要素を指定された区切り文字で結合（join）し、1つの文字列として返します。

逆順にフィルタリング

JavaScript 
const numbers = [1, 2, 3, 4, 5];

// 配列を逆順に変更し、特定の条件を満たす要素のみをフィルタリング
const filteredNumbers = numbers.reverse().filter(number => number % 2 === 0);

console.log(filteredNumbers);
// 出力: [4, 2]

コード補足説明
配列の filter() 関数は、配列の要素を反復処理しながら、コールバック関数を使用して特定の条件に従ってフィルタリングする関数です。フィルタリングされた新しい配列を返します。

互換性

配列 reverse() 関数の互換性
メソッド
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
Node.js
Node.js
reverse() 1 12 1 1 0.10

仕様書

配列 reverse() 関数の仕様
仕様書
reverse() ECMAScript® 2026 Language Specification
#sec-array.prototype.reverse

参考資料

関連項目