배열 순서 바꾸기

배열 순서를 바꾼다면 코드로 어떻게 할 수 있을까?

 

const arr = [1, 2, 3, 4];

 

1부터 4까지 숫자 배열을 가진 arr의 첫 번째와 세 번째 값을 바꿔보자.

 

1. 임시 변수 사용하기

가장 먼저 떠오르는 방법은 새로운 변수에 변경하고자 하는 값을 담아주고 값을 바꿔주는 방법이다.

const arr = [1, 2, 3, 4];
const temp = 1;

arr[0] = arr[2];
arr[2] = temp;

console.log(arr) // [3, 2, 1, 4]

 

2. 구조 분해 할당(Destructuring Assignment) 사용하기

 

const arr = [1, 2, 3, 4];

[arr[0], [arr2]] = [arr[2], arr[0]]

console.log(arr) // [3, 2, 1, 4]

 

구조 분해 할당을 사용해서 배열 요소를 서로 교환하는 방법이다.

이는 우변 [arr[2], arr[0]]가 먼저 평가된 후, 좌변 [arr[0], [arr2]]에 하나씩 할당되는 방식이다.

우변 arr[2]는 3, arr[0]은 1이므로 정리해보자면 [arr[0], arr[2]] = [3, 1]이 된다.

좌변에 값 할당으로 arr[0]은 arr[2]의 값인 3을을 담게 된다.

arr[2]는 arr[0]의 값인 1이 담긴다.

그리고 arr[1], arr[3]은 변경한 것이 없으므로 유지가 된다.

 

3. splice method 사용

const arr = [1, 2, 3, 4];
const temp = arr[0];

arr.splice(0, 1, arr[2]);
arr.splice(2, 1, temp);

console.log(arr); // [3, 2, 1, 4]

splice를 사용하면 사라진 index에 맞춰 당겨지게 된다.

반대로 값을 추가하게 되면 index는 이에 맞춰 뒤로 밀린다.

 

index 변경이 한 번만 될 수 있도록 임시 변수에 원하는 값을 담았다.

 

splice로 0번째 자리에 2번째 값을 삽입한다.

그리고 임시 변수에 담아둔 값을 2번째 자리에 삽입한다.

 

이 외에도 다양한 방법이 있을 것같지만 개인적으로 구조 분해 할당이 제일 간결하고 편해보인다.

 

끝!