[Javascript] 배열 거꾸로 뒤집는 3가지 방법

 

1. for 반복문 사용
2. reverse() 함수
3. reverse() 함수 - 원본 배열 유지하기

 

1. for 반복문 사용

const arr = ['Apple', 'Banana', 'Orange'];

// 배열 거꾸로
const reverse = [];
for(let i=arr.length-1; i >= 0; i--) {
  reverse.push(arr[i]);
}

// 결과 출력
document.write('arr : ' + arr);
document.write('<br>');
document.write('reverse : ' + reverse);

 

반복문을 사용하여 배열을 거꾸로 뒤집었습니다.

 

 

 

2. reverse() 함수

reverse() 함수는 배열의 순서를 거꾸로 만들어 줍니다.

array.reverse()

이 함수는 이 함수를 호출한 배열을 거꾸로 뒤집고, 그 배열을 가리키는 참조값을 반환합니다.

따라서, 이 함수를 실행시키면 원본 배열이 변형됩니다.

 

const arr = ['Apple', 'Banana', 'Orange'];

// 배열 거꾸로
const reverse = arr.reverse();

// 결과 출력
document.write('arr : ' + arr);
document.write('<br>');
document.write('reverse : ' + reverse);

 

위 예제는 reverse() 함수를 이용하여 배열을 거꾸로 뒤집었습니다.

출력된 결과를 보면

원본 배열인 arr가 거꾸로 뒤집힌 것을 확인 할 수 있습니다.

 

 

 

3. reverse() 함수 - 원본 배열 유지하기

reverse() 함수를 사용하면 원본 배열이 변형됩니다.

원본 배열은 그대로 유지하고, 리턴되는 값만 변경하고 싶을 때는

원본 배열을 복사해서 사용해야 합니다.

const arr = ['Apple', 'Banana', 'Orange'];

// 배열 거꾸로
const reverse = [...arr].reverse();

// 결과 출력
document.write('arr : ' + arr);
document.write('<br>');
document.write('reverse : ' + reverse);

 

위 예제는 원본 배열을 복사해서, 

복사한 배열에 reverse() 함수를 적용하였습니다.

 

[...arr].reverse()

배열을 복사하기 위해서 spread operator(전개 연산자)를 사용하였습니다.

'...'이 spread operator(전개 연산자)입니다.

spread operator(전개연산자)는 배열이나 객체에서 element들을 꺼내어, 복사해줍니다.

즉, 위 코드에서

[...arr] 구문은, 원본 배열인 arr를 복사한 새로운 배열입니다.

새로 복사한 [...arr]를 reverse 했으니, 

원본 배열인 arr는 변경이 되지 않겠죠?