JavaScript reverse() 메서드란?
자바스크립트의 reverse() 메서드는 배열 요소들의 순서를 거꾸로 뒤집는 데 사용됩니다. 첫 번째 요소가 마지막으로, 마지막 요소가 첫 번째로 이동하는 방식으로 배열 전체가 반전됩니다.
reverse() 메서드는 별도의 매개변수를 받지 않으며, 원본 배열 자체를 직접 변경(in-place)한다는 점이 특징입니다. 따라서 원본 배열을 유지해야 하는 경우에는 주의가 필요합니다.
문법
array.reverse()
예제 1: 기본 사용법
다음은 reverse() 메서드를 사용하여 배열의 순서를 뒤집는 기본적인 예제입니다.
<!DOCTYPE html>
<html>
<body>
<h2>데모 제목</h2>
<p id="test"></p>
<script>
var arrStud = ["Laptop", "Desktop", "Tablet"];
document.getElementById("test").innerHTML = "초기 배열 = "+arrStud+", <br>뒤집힌 배열 = "+arrStud.reverse();
</script>
</body>실행 결과
위 결과를 보면 ["Laptop", "Desktop", "Tablet"] 배열이 reverse() 호출 후 ["Tablet", "Desktop", "Laptop"]으로 순서가 반전된 것을 확인할 수 있습니다.
예제 2: 버튼 클릭으로 배열 뒤집기
이번에는 버튼 클릭 이벤트와 함께 reverse() 메서드를 활용하는 예제입니다. 사용자가 버튼을 누르면 화면에 표시된 배열의 순서가 실시간으로 뒤집힙니다.
<!DOCTYPE html>
<html>
<body>
<h2>차량 종류</h2>
<button onclick="display()">Reverse</button>
<p id="test"></p>
<script>
var car = ["Hatchback", "Convertible", "SUV", "AUV", "MUV"];
document.getElementById("test").innerHTML = "초기 배열 = "+car;
function display() {
car.reverse();
document.getElementById("test").innerHTML = "뒤집힌 배열 = "+car;
}
</script>
</body>실행 결과
위의 “Reverse” 버튼을 클릭하면 다음과 같이 배열의 순서가 뒤집혀 표시됩니다.
알아두면 좋은 점
- reverse() 메서드는 원본 배열을 직접 수정하며, 반환값으로 변경된 배열 자신을 반환합니다.
- 원본 배열을 보존한 채 순서만 뒤집고 싶다면, 먼저
slice()나 스프레드 연산자([...arr])로 복사본을 만든 후 reverse()를 적용하세요. - ES2023부터는 원본을 변경하지 않는
toReversed()메서드도 사용할 수 있습니다.