JavaScript / reverse()로 배열 순서 뒤집기와 원본 보존 방법

JavaScript

작성일 2026-10-27 최근 수정일 2026-10-27

Array.reverse()는 배열 요소의 순서를 거꾸로 바꾸며 원본 배열 자체를 수정합니다. 반환값은 새 배열이 아니라 바로 그 원본 배열의 참조입니다. 원래 순서를 유지해야 한다면 먼저 복사하거나, 실행 환경이 지원하는 toReversed()를 사용하세요.

reverse()가 원본에 미치는 영향

items.reverse()에는 인수가 필요하지 않습니다. 첫 요소와 마지막 요소의 자리를 바꾸고 나머지도 반대 순서로 배치합니다. 길이는 그대로지만, 이후 같은 배열을 읽는 코드에는 바뀐 순서가 보입니다. 화면 표시용으로만 뒤집으려다가 공유 중인 데이터를 바꾸지 않도록 주의하세요.

const items = ['A', 'B', 'C', 'D'];
items.reverse();
console.log(items); // ['D', 'C', 'B', 'A']
items.reverse();
console.log(items); // ['A', 'B', 'C', 'D']

두 번 연속 뒤집으면 그 사이 다른 변경이 없는 한 원래 순서가 됩니다. 그렇더라도 다른 코드가 첫 번째 변경을 관찰할 수 있으므로 ‘나중에 다시 뒤집으면 된다’는 이유로 공유 배열을 마음대로 수정하지는 마세요.

반환값도 같은 배열인지 확인하기

reverse()는 원본을 반환하므로 반환값과 원본을 ===로 비교하면 true입니다. 새 배열을 얻었다고 생각해 두 변수에 저장해도 둘은 같은 배열을 가리킵니다. 한쪽에서 요소를 바꾸면 다른 쪽에서 보이는 값도 바뀝니다.

const items = [1, 2, 3];
const returned = items.reverse();
console.log(returned);           // [3, 2, 1]
console.log(returned === items); // true
returned[0] = 9;
console.log(items);              // [9, 2, 1]

이 원본 변경과 반환 참조는 MDN의 Array.reverse() 문서에 명시되어 있습니다.

원본을 유지하면서 반대 순서 만들기

원본이 필요한 경우 items.slice().reverse()로 얕게 복사한 배열을 뒤집을 수 있습니다. toReversed()도 새 배열을 반환하지만 사용할 브라우저의 지원 범위를 확인해야 합니다. 두 방법 모두 배열 안의 객체 자체를 깊게 복제하는 것은 아닙니다.

const original = ['A', 'B', 'C'];
const reversed = original.slice().reverse();
console.log(original); // ['A', 'B', 'C']
console.log(reversed); // ['C', 'B', 'A']
console.log(reversed === original); // false

// 대상 환경에서 지원하면: const modern = original.toReversed();

중첩 객체가 있다면 복사한 배열과 원본 배열이 여전히 같은 객체를 가리킵니다. 배열 요소의 순서만 독립적으로 관리하려는 목적에 적합한 방법입니다. MDN의 Array.toReversed() 문서에서 새 메서드의 동작과 지원 범위를 확인하세요.

전체 예제: 원본 변경과 복사 비교하기

아래 코드를 UTF-8로 array-reverse.html에 저장해 브라우저에서 엽니다. ‘원본 reverse()’와 ‘복사 후 reverse()’를 각각 눌러 원본·결과·참조 비교를 보세요. ‘처음으로’는 새 배열로 초기 순서를 복원합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>배열 순서 뒤집기 비교</title>
</head>
<body>
<button id="mutate" type="button">원본 reverse()</button>
<button id="copy" type="button">복사 후 reverse()</button>
<button id="reset" type="button">처음으로</button>
<pre id="output" aria-live="polite"></pre>
<script>
const initial = ['A', 'B', 'C', 'D'];
let items = initial.slice();
const output = document.querySelector('#output');

function show(label, result, sameReference) {
  output.textContent = `${label}\n` +
    `현재 원본: ${JSON.stringify(items)}\n` +
    `결과 배열: ${JSON.stringify(result)}\n` +
    `원본과 결과가 같은 배열: ${sameReference}`;
}

document.querySelector('#mutate').addEventListener('click', () => {
  const result = items.reverse();
  show('reverse() 실행', result, result === items);
});
document.querySelector('#copy').addEventListener('click', () => {
  const result = items.slice().reverse();
  show('slice().reverse() 실행', result, result === items);
});
document.querySelector('#reset').addEventListener('click', () => {
  items = initial.slice();
  show('초기 상태', items, true);
});
show('초기 상태', items, true);
</script>
</body>
</html>

처음 배열은 ["A","B","C","D"]입니다. 원본을 뒤집으면 두 출력 모두 ["D","C","B","A"]이고 참조 비교는 true입니다. 초기화 뒤 복사 후 뒤집으면 원본은 ["A","B","C","D"], 결과는 ["D","C","B","A"], 비교는 false입니다. 원본 버튼을 다시 누르면 현재 배열의 순서가 또 반대로 바뀝니다.

JavaScript