[javascript] 자바스크립트 배열 항목 위치 이동 (swap)

참고: https://www.freecodecamp.org/news/swap-two-array-elements-in-javascript/

JavaScript에서 배열 작업을 할 때 배열의 두 항목의 위치를 바꿔야 하는 경우가 있습니다. 예를 들면 두 값을 비교한 다음 조건이 참이면 스왑하는 버블 정렬 알고리즘 등이 있을 수 있습니다. 이 외에도 다양한 상황에서 배열의 요소를 스왑하는 경우가 있을 것 입니다.

swap 이라는 용어의 의미를 아직 이해하지 못한 경우를 대비해 간단히 설명하겠습니다. 아래 이미지와 같이 숫자 배열이 있고 인덱스 0의 요소 12와 인덱스 1의 요소 -2의 위치를 바꾸고 싶을 때 두 값의 위치를 바꾸는 것을 swap 한다고 부릅니다.

https://www.freecodecamp.org/news/swap-two-array-elements-in-javascript/

JavaScript로 이러한 유형의 작업 수행에 익숙하지 않은 경우 혼란스러울 수 있습니다. 또는 이러한 문제를 해결하는 더 좋은 방법을 찾고 있을 수도 있습니다. 이 포스트에서는 임시 변수 사용, 디스트럭처링 방법, splice() 사용 방법의 세 가지 접근 방식에 대해 설명하겠습니다.

임시 변수로 배열 요소 swap

임시 변수를 사용하여 요소를 스왑하려면 세 단계를 거쳐야합니다.

1 단계는 첫 번째 요소의 값을 가질 임시 변수를 만드는 것 입니다. 2 단계는 첫 번째 요소의 값을 두 번째 요소의 값으로 할당하는 것 입니다. 3 단계는 두 번째 요소의 값을 임시 변수의 값으로 할당하는 것 입니다.

const myArray = [12, -2, 55, 68, 80];

const temp = myArray[0];
myArray[0] = myArray[1];
myArray[1] = temp;

console.log(myArray);

이를 스왑할 배열과 두 개의 인덱스를 매개변수로 받는 함수로 만들어 재사용할 수도 있습니다.

const swapElements = (array, index1, index2) => {
    const temp = array[index1];
    array[index1] = array[index2];
    array[index2] = temp;
};

let myArray = [12, -2, 55, 68, 80];

swapElements(myArray, 0, 1);

console.log(myArray);

destructuring 방법을 사용해 배열 요소 스왑

배열 요소를 스왑하는 데 사용할 수 있는 더 나은 방법은 단 한 줄의 코드만 필요한 디스트럭처링 방법입니다. 두 요소를 역순으로 가지는 새 배열을 만든 다음 이를 기존 배열의 원하는 순서로 할당 받는 방법입니다.

const myArray = [12, -2, 55, 68, 80];

[myArray[0], myArray[1]] = [myArray[1], myArray[0]];

console.log(myArray);

이 방법 또한 스왑할 배열과 두 개의 인덱스를 매개변수로 받는 재사용 가능한 함수를 만들 수 있습니다.

const swapElements = (array, index1, index2) => {
    [myArray[index1], myArray[index2]] = [myArray[index2], myArray[index1]];
};

let myArray = [12, -2, 55, 68, 80];

swapElements(myArray, 0, 1);

console.log(myArray);

splice() 메소드를 사용하여 스왑

마지막으로 splice() 메소드를 사용하는 방법이 있습니다. 이 방법을 사용하여 배열에서 하나 이상의 요소를 제거하고 해당 요소를 지정된 요소로 바꿀 수 있습니다.

문법:

array.splice(index, howmany, element1, ....., elementX);

예를 들면 배열이 있고 특정 요소를 제거하려는 경우 해당 ID와 제거하려는 요소 수를 지정합니다. 우리의 경우 한 개 입니다.

const myArray = [12, -2, 55, 68, 80];

myArray.splice(1, 1);

console.log(myArray);

또한 제거된 요소의 위치에 다른 값을 넣으려는 경우 코드는 다음과 같습니다.

const myArray = [12, -2, 55, 68, 80];

myArray.splice(1, 1, 32);

console.log(myArray);

그러나 두 개의 요소 위치를 서로 바꾸려면 다음과 같이 합니다.

const myArray = [12, -2, 55, 68, 80];

myArray[0] = myArray.splice(1, 1, myArray[0])[0];

console.log(myArray);

앞의 다른 예제와 마찬가지로 재사용 가능한 함수를 만들려면 스왑하려는 배열과 인덱스 두개를 매개변수로 받도록 하면 됩니다.

const swapElements = (array, index1, index2) => {
    myArray[index1] = myArray.splice(index2, 1, myArray[index1])[0];
};

let myArray = [12, -2, 55, 68, 80];

swapElements(myArray, 0, 1);

console.log(myArray);

정리

이 포스트에서는 JavaScript를 사용하여 배열의 두 항목을 스왑하는 세 가지 방법을 알아봤습니다. 세 가지 방법 모두 사용할 수 있지만 모든 사람이 이해할 수 있고 사용하기 쉬운 ES6 디스트럭처링 방법을 사용하는 것이 가장 좋습니다.

관련 글

자바스크립트 splice() 사용 방법