Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

자바스크립트에서 배열을 뒤집는 방법: reverse() 메서드부터 직접 구현까지

자바스크립트에서 배열의 순서를 거꾸로 뒤집는 방법은 크게 두 가지가 있습니다. 내장 메서드인 reverse()를 활용하는 방법과, 반복문을 이용해 직접 구현하는 방법입니다. 각각의 방법을 코드 예제와 함께 살펴보겠습니다.

1. reverse() 메서드 사용하기

배열 객체에서 기본적으로 제공하는 reverse() 메서드를 사용하면 단 한 줄의 코드로 배열을 손쉽게 뒤집을 수 있습니다. 다만 이 메서드는 원본 배열 자체를 변경(mutate)한다는 점에 유의해야 합니다.

예제 코드

<html>
<body>
<script>
   var a = [1,2,3,4,5];
   a.reverse();
   document.write(a);
</script>
</body>
</html>

실행 결과

5,4,3,2,1

2. 내장 메서드 없이 직접 구현하기

내장 메서드를 사용하지 않고 배열을 뒤집으려면 for 반복문을 활용할 수 있습니다. 원본 배열의 마지막 요소부터 첫 번째 요소까지 차례대로 새로운 배열에 담으면 역순 배열을 만들 수 있습니다.

예제 코드

<html>
<body>
<p id="reverse"></p>
<script>
   var t = [];
   var a = [1,2,3,4,5];
   for(var i = 0; i < a.length; i++){
       t[i] = a[a.length - 1 - i];
   }
    document.getElementById("reverse").innerHTML = t;
</script>
</body>
</html>

실행 결과

5,4,3,2,1

추가 팁: 원본 배열을 유지하면서 뒤집기

앞서 언급했듯이 reverse()는 호출된 원본 배열을 직접 변경합니다. 따라서 원본 배열을 그대로 유지해야 하는 경우에는 스프레드 연산자(...)로 배열을 복사한 뒤 뒤집는 것이 안전합니다.

const original = [1, 2, 3, 4, 5];
const reversed = [...original].reverse();

console.log(reversed); // 5,4,3,2,1
console.log(original); // 1,2,3,4,5 (원본 유지)

정리하면, 간단하게 처리할 때는 reverse() 메서드를, 로직을 직접 제어하거나 학습 목적이라면 반복문 구현을 활용하는 것이 좋습니다. 상황에 맞는 방법을 선택해 사용하시기 바랍니다.